在 MVC 中渲染局部视图

Question

我正在使用 MVC 结构。我必须创建一个可以通过下拉列表过滤的报告。我很喜欢使用局部视图来显示报告。 这是我想要实现的页面结构。 在页面顶部，会有一些下拉列表。 下面是报告页面。

当用户更改下拉列表中的选项时，报告将被过滤。

我有两个问题 1.如何渲染部分页面。 2.如何通过ajax/jquery刷新部分页面。我想在客户端执行此操作。

我在网上查了一下，我正在渲染页面，如下代码所示 查看

<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.Partial 直接加载 View 而无需进入 Controller Action。 如果您有要传递的数据或者您只想在页面上加载一些静态内容，则应该使用它