asp.net-mvc - 在 MVC 中呈现局部 View

Question

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

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

我有两个问题 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>

这是我在 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();
}

感谢任何形式的帮助。

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>

注意:您应该在 Controller 操作中使用return PartialView(); 并且不要使用 @Html.Partial 而是使用 @Html.Action。 @Html.Partial 直接加载View，不去Controller Action。 如果你有数据要传递或者你只是想在页面上加载一些静态内容，应该使用它