如何更新多个部分视图（一个主网格和另一个总计网格）？答案

【问题标题】：How to update multiple partial views (one main grid and another totals grid)?如何更新多个部分视图（一个主网格和另一个总计网格）？
【发布时间】：2012-09-09 19:47:33
【问题描述】：

我的主索引页面上有两个带有过滤器下拉列表的部分视图。 One partial view is for displaying a list of emps and the other is a roll-up for totaling emp.salary, etc. Currently, I can update my main emp grid via ajax when the filter dropdown is selected.问题是，每次将新过滤器应用于主 emp 网格时，我的汇总网格都需要重新计算，我不知道该怎么做。

查看模型的细节较少，这里是代码：

控制器：Person/Index()

// GET: /Person/
public ViewResult Index()
{
   IList<Person> ppl = cs = db.Persons.ToList();

   PersonRollup pr= new PersonRollup();            
   foreach (Person p in ppl)
   {
      pr.salary += ii.salary
   }
   PersonViewModel pvm = new PersonViewModel{Persons = ppl, PersonsRollup = pr}
   return View(pvm);
}

视图：人物/索引

@model Models.PersonVM>

@Html.ListBox("Filter")  

<div id="PersonRollupGrid">@Html.Partial("_PersonsRollup", Model.PersonsRollup)</div>

<div id="PersonGrid">@Html.Partial("_Persons", Model.Persons)</div>  

@* Filter selected from drop down *@
<script type="text/javascript">
    $("select").multiselect({
        click: function () {
            $.get('@Url.Action("FilterPersons")', function (data) {
                $('#PersonGrid').html(data);
            });
            // ???????????????????????????????????????????
            //   How can I update the rollup grid here....
            //???????????????????????????????????????????
            }
        });
</script>

共享视图：_Persons

@model IEnumerable<Models.Person>

<table>
    <tr>
        <th>Name</th>
        <th>Salary</th>
    </tr>

    @foreach (var item in Model) {
    <tr>
        <td>@item.name</td>
        <td>@item.salary</td>
    </tr>
</table>

共享视图：_PersonsRollup

@model Models.PersonRollup

<table>
    <tr>
        <th>TotalSalary</th>
    </tr>
    <tr>
        <td>@model.salary</td>
    </tr>
</table>

控制器：过滤器

  public ActionResult FilterPersons(string someFilteredData)
  {
    IList<Person> ppl = cs = db.Persons.Where(/*someFilteredData*/).ToList();

   PersonRollup pr= new PersonRollup();            
   foreach (Person p in ppl)
   {
      pr.salary += ii.salary
   }
   PersonViewModel pvm = new PersonViewModel{Persons = ppl, PersonsRollup = pr}

   return PartialView("_Persons", ppl.Persons);
  }

【问题讨论】：

标签： c# asp.net asp.net-mvc jquery

【解决方案1】：

 //get the filtered viewmodel data
 $.get('@Url.Action("FilterPersons")', function (data) { 
      //pass viewmodel to get rendered view             
      $("#PersonGrid").load("/Person/GetPersonsView"
         data.Persons, function () {
           //callback
      });
      //pass viewmodel to get rendered view       
      $("#PersonRollupGrid").load("/Person/GetPersonsRollUpView",
         data.PersonsRollup, function () {
           //callback
      });

 });


  public ActionResult FilterPersons(string someFilteredData)
  {
       ....
       return JsonResult(pvm, JsonRequestBehavior.AllowGet);
  }

  public ActionResult GetPersonsView(Persons persons)
  {   
      return PartialView("_Persons", persons);
  }

  public ActionResult GetPersonsRollUpView(PersonRollup personRollup)
  {   
      return PartialView("_PersonsRollUp", personRollup);
  }

【讨论】：

太棒了！我遇到的唯一问题是从我对 FilterPersons 的调用返回 json 结果时。返回 Json(pvm, JsonRequestBehavior.AllowGet);我收到“内部服务器错误”
但我假设内部错误与我的 PersonView 的属性有关（包含 Persons IEnum 和 PersonsRollup IEnum 并且 Persons[] 集合是 Person 类型的域对象的列表.
是的，你需要一些轻量级的 DTO。

【解决方案2】：

我建议您创建另一个局部视图，例如 _PersonDetails，它又将具有两个局部视图：_Persons 和 _PersonsRoll。 _PersonDetails 可以在索引视图中呈现。视图将接受 viewModel - PersonViewModel。在 _PersonDetails 视图中，您可以渲染 _Persons 和 _PersonsRoll 并传递其模型对象 - Persons、PersonRollUp。在您的 Ajax 调用期间，您从控制器加载 _PersonDetails 视图。子视图将自动呈现。这样做的好处是您只需要进行一次服务器调用即可呈现两个视图（在您的情况下取决于相同的视图模型）

【讨论】：