Question

在我的View我显示一个用于选择年份列表的下拉列表。但是与选定年份相对应的数据来自多个表格。因此，与所选年份相对应的Partial View数据需要ViewModal。部分视图中的数据是ViewModel中的记录列表。问题：当我们在同一个视图中处理两个不同的ViewModel时，如何才能实现上述目标。示例如下：

注意：

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

家长的ViewModel [for years dropdown]

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

家长视图

@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>

Answer 1

您只需进行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());
    });
});

部分视图使用不同的ViewModel而不是Parent的ViewModel

1 个答案: