Question

我的主索引页面上有两个部分视图，带有过滤器下拉列表。一个局部视图用于显示emps列表，另一个是用于累计emp.salary等的汇总。目前，当选择过滤器下拉列表时，我可以通过ajax更新我的主emp网格。问题是，每当新的过滤器应用于主网格时，我的翻转网格需要重新计算，而且我不确定如何去做。

此处的详细信息视图模型是代码：

控制人：人/指数（）

// 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);
  }

Answer 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);
  }

Answer 2

我建议你创建另一个部分视图说_PersonDetails，它反过来会有两个部分视图：_Persons和_PersonsRoll。 _PersonDetails可以在Index视图中呈现。该视图将接受viewModel - PersonViewModel。在_PersonDetails视图中，您可以渲染_Persons和_PersonsRoll以传递其模型对象--Persons，PersonRollUp。在Ajax调用期间，您从控制器加载_PersonDetails视图。子视图将自动呈现。这样做的好处是您只需要进行一次Server调用即可呈现两个视图（在您的情况下，视图取决于相同的viewModel）

如何更新多个局部视图（一个主网格和另一个总网格）？

2 个答案: