ViewModel、View 和 PartialView 发布到控制器

Question

我正在尝试执行以下操作：我有两个模型，标题和列表（详细信息），由视图模型发送到视图。加载主视图时，会从先前加载的 ViewModel.header 模型的列表中显示一个下拉列表。当您单击该下拉列表时，将加载部分视图，其中包含一些值，这些值由 ViewModel.List(details) 的 ddl 值过滤，供用户完成信息。到目前为止一切正常，但是在执行 Post 时，控制器接收到的 ViewModel.List(details) 为 null。

我做错了什么？

标题

    public class StockTransactionsHeader
{
    [Key]
    public int TransactionHeaderID { get; set; }

    public DateTime TransactionDate { get; set; }

    public string TransactionDocument { get; set; }

    public int CategoryID { get; set; }

    [NotMapped]
    public List<SelectList> CategoryCollection { get; set; }

    public virtual List<StockTransactionsDetails> StockTransactionsDetails { get; set; }

}

详情

    public class StockTransactionsDetails
{
    [Key]
    public int TransactionDetailID { get; set; }

    public int TransactionHeaderID { get; set; }

    public int ProductID { get; set; }

    public decimal Qty { get; set; }

    public decimal Amount { get; set; }

    public decimal TransactionAmount { get; set; }

    [NotMapped]
    public string ProductDescription { get; set; }

    public virtual StockTransactionsHeader StockTransactionsHeader { get; set; }
}

视图模型

public class StockTransactionsViewModel
{
    public StockTransactionsHeader StockTransactionsHeader { get; set; }
    public List<StockTransactionsDetails> StockTransactionsDetails { get; set; }
}

控制器创建

 public ActionResult Create()
 {
     var stockTransactions = new StockTransactionsViewModel();
     stockTransactions.StockTransactionsHeader = GetHeaderCategories();

     return View(stockTransactions);
 }

GetHeaderCategories()

private StockTransactionsHeader GetHeaderCategories()
{
        var header = new StockTransactionsHeader();
        header.CategoryCollection = CommonServices.GetSelecList((int)DeliveryCommonHelper.ConfigurationType.Categoria);
        return header;
}

主视图

@model DeliverySolutionCommon.ViewModels.StockTransactionsViewModel
@using (Html.BeginForm())
{
    <div class="form-row">
        <div id="partialView" class="table-responsive">

        </div>
    </div>

    <div class="form-group">
        <div class="col-md-2">
            <input type="submit" value=" Procesar " class="btn btn-warning" />
        </div>
    </div>
}

加载局部视图的脚本

    <script>
    $(document).ready(function () {
        $("#Category").on("change", function () {
            autoFiltro();
        })
    })

    function autoFiltro() {
        var url = "@Url.Action("GetProductsListByCategory", "StockTransactions")";
        var id = $("#Category").val();
        var data = { idCategory: id };

        $.post(url, data).done(function (data) {
            $("#partialView").html(data);
        })
    }
</script>

GetProductsListByCategory

        [HttpPost]
    public PartialViewResult GetProductsListByCategory(int idCategory)
    {
        var products = ProductsServices.GetProductsListByCategory(idCategory);
        var stockTransactions = new StockTransactionsViewModel();
        stockTransactions.StockTransactionsDetails = GetTransactionsDetails(products);

        return PartialView("_createStockTransactions", stockTransactions);
    }

获取交易详情

        private List<StockTransactionsDetails> GetTransactionsDetails (List<Products> products)
    {
        var details = new List<StockTransactionsDetails>();

        foreach (var item in products)
        {
            StockTransactionsDetails detail = new StockTransactionsDetails();
            detail.ProductID = item.ProductID;
            detail.ProductDescription = item.Description;

            details.Add(detail);
        }
        return details;
    }

部分视图

    @model DeliverySolutionCommon.ViewModels.StockTransactionsViewModel
<table class="table table-sm table-bordered table-striped">
    @foreach (var item in Model.StockTransactionsDetails)
        {
            <tr class="d-flex">
                <td class="col-7">
                    @Html.DisplayFor(modelItem => item.ProductDescription)
                </td>
                <td class="col-1">
                    @Html.EditorFor(modelItem => item.Qty, new { htmlAttributes 
                    = new { @class = "form-control" } })
                </td>
                <td class="col-2">
                    @Html.EditorFor(modelItem => item.Amount, new { 
                     htmlAttributes = new { @class = "form-control" } })
                </td>
                <td class="col-2">
                    @Html.EditorFor(modelItem => item.TransactionAmount, new { 
                     htmlAttributes = new { @class = "form-control" } })
                </td>
            </tr>
        }
</table>

Aaaa 终于创建帖子

        [HttpPost]
    public ActionResult Create(StockTransactionsViewModel stockTransactionsView)
    {
       // StockStransactionsView.StockTransactionsDetails = null

    }

Answer 1

问题是您正在回发一个列表，而您的 HTML 中没有索引信息... MVC 模型绑定器不知道如何在没有索引信息的情况下将项目放入列表中...

你可以试试这样的：

@for (int i = 0; i < Model.StockTransactionsDetails.Count, i++)
{  

    <tr class="d-flex">
        <td class="col-7">
            @Html.EditorFor(modelItem => Model[i].Amount, new { 
                 htmlAttributes = new { @class = "form-control" } })
        </td>

       // more code...

这会将索引信息添加到您的 HTML...

您也可以使用EditorTemplate... 像这样：

// Note that EditorFor template would iterate the list item for you
@Html.EditorFor(m => m.Model.StockTransactionsDetails) 

This tutorial might help