Визуализировать частичное представление в MVC

Question

Я использую структуру MVC. Я должен создать отчет, который можно отфильтровать по выпадающим спискам. Я хочу использовать частичное представление для отображения отчета. Вот структура страницы, которую я хочу достичь. В верхней части страницы будут некоторые выпадающие списки. Ниже это будет страница для отчета.

когда пользователь изменяет параметры из выпадающего списка, отчет будет отфильтрован.

У меня два вопроса 1. Как сделать частичную страницу. 2. Как обновить частичную страницу через ajax/jquery. Я хочу сделать это на стороне клиента.

Я проверил онлайн, я рендеринг страницы, как показано в коде ниже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>

Это то, что я получил в контроллере

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();
}

Любая помощь приветствуется.

Answer 1

Вы должны использовать JQuery для достижения этой функции

Сначала примените некоторый идентификатор к вашему контейнеру данных

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

А затем напишите сценарий для вашего события изменения выпадающего с помощью 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>

Примечание: вы должны использовать return PartialView(); из действия вашего контроллера И не используйте @Html.Partial и используйте вместо него @Html.Action. @Html. Частичные загрузки Просмотр напрямую, без перехода к действиям контроллера. Его следует использовать, если у вас есть данные для передачи или если вы просто хотите загрузить статический контент на страницу