render partial view in MVC

Question

I am using MVC Structure. I have to create a report which can be filtered by drop downs. I am thing to use a partial view to display report. HEre is the structure of the page I want to achieve. On top of page, there will be some drop down lists. Below these will be page for report.

when user changes the options from dropdownlist, the report will be filtered.

I have two questions 1. How to render partial page. 2. How to refresh partial page through ajax/jquery. I want to do this on client side.

I have checked online, I am rendering page as shown in code below VIEW

<h3>Report</h3>
<div>
    <table>
        <tr>
            <td>ServiceLine</td>
            <td>@Html.DropDownList("ServiceLine", null, new {id="ServiceLine"}) </td>
        </tr>
    </table>
</div>
<div>
    <h2>List</h2>
    <div>
        @Html.Partial("PartialView")
    </div>
</div>

This is what I have got in controller

public ActionResult PortfolioReport(char serviceLine)
{
    //Department List

     var serviceLines = Enum.GetValues(typeof(SogetiDepartments)).Cast<SogetiDepartments>().Select(v => new SelectListItem
    {
        Text = v.ToString(),
        Value = ((char)v).ToString(),
    });

     foreach (SelectListItem item in serviceLines)
     {
         if (Convert.ToChar(item.Value) == serviceLine)
             item.Selected = true;
     }


     ViewBag.ServiceLine = serviceLines;

    return View();
}

Any kind of help is appreciated.

Answer 1

You have to use jQuery to achieve this feature

First apply some identifier to your data container

<div id="reportContent">
        @Html.Partial("PartialView")
</div>

And then write script on your dropdown change event using jQuery

<script type="text/javascript">
$(function(){
    $("#ServiceLine").change(function{
    // get data from server using ajax
    var url = 'YourPartialPageURL?'+serviceLine+="="+$(this).val();
    $('#reportContent').load(url);
  });

});
</script>

Note: You should use return PartialView(); from your controller action And don't use @Html.Partial and use @Html.Action instead. @Html.Partial loads View directly without going to Controller Action. It should be used if you have data to be passed with you or if you just want to load some static content on the page