ViewModel 与 Parent 的 ViewModel 不同的局部视图

Partial View with different ViewModel than Parent's ViewModel

在我的 View 中,我显示了一个用于选择年份列表的下拉菜单。但是所选年份对应的数据来自多个表。因此 Partial View 对应于所选年份的数据需要 ViewModal。部分视图中的数据是来自 ViewModel 的记录列表。 问题:当我们在同一个视图中处理两个不同的视图模型时,如何实现上述内容。示例如下:

注意

  1. 我正在使用 Ajax 和 Tag Helpers。但是没有这些技术的任何建议都可以。
  2. 我知道如何通过 Ajax 加载局部视图数据。

Parent 的 ViewModel [年份下拉列表]

public class OrderYearsViewModel
{
  public SelectList lstOrderYears { get; set; }    
  public int SelectedOrdYear { get; set; }
}

Parent 查看

@model MyProj.Models.OrderYearsViewModel

<div>
  <form asp-controller="OrderYearsCtrl" asp-action="SelectYearsList" method="get">
    Select Order Year:<select asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button type="button" value="Go" class="clsGo">GO</button>
  </form>
</div
<div id="OrderDetailsID">
  <!--Partial view data for selected year displayed here-->
</div>

部分视图的 ViewModel [对于每年选择的订单]

public class OrdersPerYearViewModel
{
  public in CustomerID { get; set; }    
  public string CustName{ get; set; }
  public string OrderType { get; set; }
  public float Price { get; set; }
  ....
}

局部视图

@model List<MyProj.Models.OrdersPerYearViewModel>
<table><tr><th>..</th>..........</th></tr>
@foreach (var item in Model)
{
    <tr>
        <td>
            @item.CustomerID
        </td>
        <td>
            @item.CustName
        </td>
        <td>
           @item.OrderType
        </td>
        <td>
           @item.Price 
        </td>
        ....
}
</table>

您只需拨打 Ajax 电话

@model MyProj.Models.OrderYearsViewModel
<div>
  Select Order Year:<select id="ddlYear" asp-for="SelectedOrdYear" asp-items="Model.lstOrderYears"></select><button id="btnGo" type="button" value="Go" class="clsGo">GO</button>
</div>
<div id="OrderDetailsID">
  <!--Related data for each year displayed here-->
</div>

在文档准备好注册按钮上单击

$(document).ready(function(){
    $("#btnGo").click(function(){$("#OrderDetailsID").load("@Url.Action("yourpartialviewactionname","controllername")"+"?year="+$("#ddlYear").val());
    });
});