ASP.NET MVC - 添加到视图模型列表并提交

Question

我有一个带有 order/odc 请求表单的 ASP.NET MVC 程序。我有一个客户、订单和订单项目模型。我想要做的是允许用户为要批准的项目列表下订单。我将视图模型传递给 form/view，其中包含一些字段，包括订单项目对象列表。我能够动态地将行添加到显示订单项列表的 table，但在提交时，viewmodel 列表中没有任何内容。我究竟做错了什么？如何将输入到 table 的项目传递到视图以便我可以提交到数据库？

控制器

    public ActionResult NewOdc()
    {
        var viewModel = new NewOdcViewModel()
        {
            OdcItems = new List<tblOdcItem>() 
        };

        viewModel.OdcItems.Add(new tblOdcItem());

        return View(viewModel);
    }

我从 jQuery 调用此代码以将新项目添加到列表中：

    public ActionResult GetView(string rowCount)
    {
        tblOdcItem item = new tblOdcItem();
        return PartialView("_OdcItemEditor", item);
    }

然后在提交时调用此代码：

    [HttpPost]
    public ActionResult NewOdcSubmit(NewOdcViewModel viewModel)
    {
        _context.tblOdcs.Add(new tblOdc());
        ...

我正在使用 foreach 遍历列表并为每个项目创建一个部分。

查看：

@using (Html.BeginForm("NewOdcSubmit", "Odc", FormMethod.Post))
{
            if (Model != null)
            {
                @Html.HiddenFor(m => m.OdcItems);
            }

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h2 class="panel-title">Enter New ODC</h2>
                </div>
                <div class="panel-body">
                    @Html.AntiForgeryToken()
                    <div class="form-group">
                        @Html.LabelFor(model => model.User.UserName, new { @class = "col-md-2 col-sm-1 control-label" })
                        <div class="col-md-2 col-sm-3">
                            @Html.TextBoxFor(model => model.User.UserName, new { @Value = ((PM_Portal2020.Models.tblUser)Session["User"]).UserName, @readonly = true })
                        </div>
                        @Html.LabelFor(model => model.User.Phone, new { @class = "col-md-2 col-sm-1 control-label" })
                        <div class="col-md-2 col-sm-3">
                            @Html.TextBoxFor(model => model.User.Phone, new { @Value = ((PM_Portal2020.Models.tblUser)Session["User"]).Phone })
                        </div>
                    </div>
                    <div class="form-group col-md-10 col-sm-12">
                        <label>Expenses</label>
                        <table id="submissionTable" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Qty</th>
                                    <th>Description</th>
                                    <th>Estimated Cost</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (PM_Portal2020.Models.tblOdcItem item in Model.OdcItems)
                                {
                                    @Html.Partial("_OdcItemEditor", item)
                                }
                            </tbody>
                        </table>
                        <p>
                            <button id="add" type="button" class="btn btn-primary">Add</button>
                        </p>
                    </div>
                    <div class="form-group col-lg-10 col-sm-12">
                        @Html.LabelFor(model => model.Details, new { @class = "col-md-2 col-sm-1 control-label" })
                        <div class="">
                            @Html.TextAreaFor(model => model.Details, new { @class = "form-control" })
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="">
                        <button type="submit" class="btn btn-success">Save</button>&nbsp;&nbsp;
                        @Html.ActionLink("Back", "Index")
                    </div>
                </div>
            </div>
}

Shared 文件夹中的部分视图：

@model PM_Portal2020.Models.tblOdcItem

<tr @Html.Id("tablerow" + Model.ID)>
    <td>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Quantity, new { @class = "text-box single-line", name = "Quantity[" + Model.ID + "]", type = "text", value = "", required = "required" })
        </div>
    </td>
    <td>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Description, new { @class = "text-box single-line", name = "Description[" + Model.ID + "]", type = "text", value = "", required = "required", id = "itemDesc" })
        </div>
    </td>
    <td>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EstimatedCost, new { @class = "text-box single-line", name = "EstimatedCost[" + Model.ID + "]", type = "text", value = "", required = "required" })
        </div>
    </td>
    <td>
        <button type="button" class="btn btn-primary" onclick="removeTr(this);">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </td>
</tr>

查看模型

public class NewOdcViewModel
{
    public NewOdcViewModel()
    {
    }

    public IList<tblOdcItem> OdcItems { get; set; }
    public string Details { get; set; }
    public int OdcId { get; set; }
    public tblUser User { get; set; }
}

它提交给控制器，但 odcitems 列表始终计数 = 0。任何帮助都会很棒。谢谢

Answer 1

名称应与型号属性匹配，因此在部分视图中，您已将名称设置为 OdcItems[0].Quantity 而不是 Quantity[" + Model.ID + "].

@Html.TextBoxFor(model => model.Quantity, new { @class = "text-box single-line", name = "OdcItems[0].Quantity", type = "text", value = "", required = "required" })

例如。 OdcItems[0].数量

OdcItems[1].数量

OdcItems[2].数量

.....

OdcItems[n].数量

Answer 2

这里是 javascript 的例子，只是在 add/delete 操作 re-arrange 名字时使用这个函数。

function RearangeName(){
        var i = 0;
        $("#submissionTable>tbody>tr").each(function () {
            $(this).find("input").each(function () {
                if ($(this).prop("name").indexOf('Quantity') > 0) {
                    $(this).attr('name', "OdcItems[" + i + "].Quantity");
                }
                if ($(this).prop("name").indexOf('Description') > 0) {
                    $(this).attr('name', "OdcItems[" + i + "].Description");
                }
                if ($(this).prop("name").indexOf('EstimatedCost') > 0) {
                    $(this).attr('name', "OdcItems[" + i + "].EstimatedCost");
                }
            });
            i++;
        });
    }

ASP.NET MVC - 添加到视图模型列表并提交

ASP.NET MVC - add to a viewmodel list and submit

asp.net-mvc

submit

viewmodel