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

欢迎寻求任何关于IT技术方面的帮助。

- Developer

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直接加载视图，而不经过控制器操作。如果您有要传递的数据，或者只想在页面上加载一些静态内容，则应使用它。

- K D

---

嗨KD，目前一切都运行良好。现在只剩下一个问题，那就是刷新。当我将参数作为查询字符串传递时，它能够到达控制器吗？因为数据来自控制器，在部分视图中，我只是呈现页面。 - Developer

如果您在页面加载时已经有数据，那为什么还要传递查询字符串呢？如果您已经有了数据，则只需使用Html.Partial()将其传递到视图中即可。如果您想在服务器上调用控制器操作，则应使用Html.Action。 - K D

感谢 K D 的帮助。代码现在运行良好。稍后我会为此提供解决方案。你的想法很有效。[点赞] - Developer