Question

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

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

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

注意：您应该使用控制器操作中的返回PartialView（）; 并且不要使用@ Html.Partial并使用@ Html.Action代替。 @ Html.Partial直接加载View而无需转到Controller Action。如果您要随身携带数据，或者只是想在页面上加载一些静态内容，则应该使用它

在MVC中渲染局部视图

1 个答案: