3

我正在使用 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();
}

任何形式的帮助表示赞赏。

4

1 回答 1

6

你必须使用 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。如果您有要传递的数据或者您只想在页面上加载一些静态内容，则应该使用它

于 2013-05-07T10:15:27.837 回答