Question

我正在使用C＃和.NET Framework 4.5.1开发ASP.NET MVC 5 Web。

我在form文件中有cshtml：

@model MyProduct.Web.API.Models.ConnectBatchProductViewModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
</head>
<body>
    @if (@Model != null)
    { 
        <h4>Producto: @Model.Product.ProductCode, Cantidad: @Model.ExternalCodesForThisProduct</h4>
        using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
        {
            @Html.HiddenFor(model => model.Product.Id, new { @id = "productId", @Name = "productId" });

            <div>
                <table id ="batchTable" class="order-list">
                    <thead>
                        <tr>
                            <td>Cantidad</td>
                            <td>Lote</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].Quantity")</td>
                            <td>@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].BatchName")</td>
                            <td><a class="deleteRow"></a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5" style="text-align: left;">
                                <input type="button" id="addrow" value="Add Row" />
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <p><input type="submit" value="Seleccionar" /></p>
        }
    }
    else
    { 
        <div>Error.</div>
    }
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/js/createBatches.js"></script> <!-- Resource jQuery -->    
</body>
</html>

这是行动方法：

[HttpPost]
public ActionResult Save(FormCollection form)
{
    return null;
}

两个ViewModel：

public class BatchProductViewModel
{
    public int Quantity { get; set; }
    public string BatchName { get; set; }
}

public class ConnectBatchProductViewModel
{
    public Models.Products Product { get; set; }
    public int ExternalCodesForThisProduct { get; set; }

    public IEnumerable<BatchProductViewModel> BatchProducts { get; set; }
}

但是我在FormCollection form var中得到了这个： enter image description here

但我希望获得IEnumerable<BatchProductViewModel> model：

public ActionResult Save(int productId, IEnumerable<BatchProductViewModel> model);

如果我使用上述方法签名，则两个参数都为空。

我想要IEnumerable，因为用户将使用jQuery动态添加更多行。

这是jQuery脚本：

jQuery(document).ready(function ($) {
    var counter = 0;

    $("#addrow").on("click", function () {

        counter = $('#batchTable tr').length - 2;

        var newRow = $("<tr>");
        var cols = "";

        var quantity = 'ConnectBatchProductViewModel.BatchProducts[0].Quantity'.replace(/\[.{1}\]/, '[' + counter + ']');
        var batchName = 'ConnectBatchProductViewModel.BatchProducts[0].BatchName'.replace(/\[.{1}\]/, '[' + counter + ']');

        cols += '<td><input type="text" name="' + quantity + '"/></td>';
        cols += '<td><input type="text" name="' + batchName + '"/></td>';

        cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
        newRow.append(cols);

        $("table.order-list").append(newRow);
        counter++;
    });


    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();

        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Row");
    });
});

有什么想法吗？

我已经检查了这个SO answer和this article，但我没有让我的代码正常工作。

Answer 1

您需要在for循环中为集合生成控件，以便使用索引器正确命名它们（请注意，属性BatchProducts必须为IList<BatchProductViewModel>

@using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
{
  ....
  <table>
    ....
    @for(int i = 0; i < Model.BatchProducts.Count; i++)
    {
      <tr>
        <td>@Html.TextBoxFor(m => m.BatchProducts[i].Quantity)</td>
        <td>@Html.TextBoxFor(m => m.BatchProducts[i].BatchName)</td>
        <td>
          // add the following to allow for dynamically deleting items in the view
          <input type="hidden" name="BatchProducts.Index" value="@i" />
          <a class="deleteRow"></a>
        </td>
      </tr>
    }
    ....
  </table>
  ....
}

然后POST方法需要

public ActionResult Save(ConnectBatchProductViewModel model)
{
  ....
}

修改

注意：在编辑之后，如果要在视图中动态添加和删除BatchProductViewModel项，则需要使用BeginCollectionItem帮助程序或html模板，如{{3 }}

动态添加新项目的模板将是

<div id="NewBatchProduct" style="display:none"> <tr> <td><input type="text" name="BatchProducts[#].Quantity" value /></td> <td><input type="text" name="BatchProducts[#].BatchName" value /></td> <td> <input type="hidden" name="BatchProducts.Index" value ="%"/> <a class="deleteRow"></a> </td> </tr> </div>

请注意虚拟索引器和隐藏输入的不匹配值会阻止此模板回发。

然后添加新BatchProducts的脚本将是

$("#addrow").click(function() { var index = (new Date()).getTime(); // unique indexer var clone = $('#NewBatchProduct').clone(); // clone the BatchProducts item // Update the index of the clone clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); clone.html($(clone).html().replace(/"%"/g, '"' + index + '"')); $("table.order-list").append(clone.html()); });

Answer 2

在您的Post Methode中，您会收到＆＃34; MyProduct.Web.API.Models.ConnectBatchProductViewModel＆＃34;作为参数。
将现有模型用于Post方法。

为什么你想从你的模型中获得IEnumerable？只有一个可用，包括模型中的id。

Answer 3

您可以访问this article获取video tutorial的完整源代码。

你必须首先创建一个动作，我们可以从中传递对象列表

[HttpGet]
public ActionResult Index()
{
    List<Contact> model = new List<Contact>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        model = dc.Contacts.ToList();
    }
    return View(model);
}

然后我们需要为该操作创建一个视图

@model List<UpdateMultiRecord.Contact>
@{
    ViewBag.Title = "Update multiple row at once Using MVC 4 and EF ";
}
@using (@Html.BeginForm("Index","Home", FormMethod.Post))
{
    <table>
            <tr>
                <th></th>               
                <th>Contact Person</th>
                <th>Contact No</th>
                <th>Email ID</th>
            </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>               
                <td> @Html.HiddenFor(model => model[i].ContactID)</td>
                <td>@Html.EditorFor(model => model[i].ContactPerson)</td>
                <td>@Html.EditorFor(model => model[i].Contactno)</td>
                <td>@Html.EditorFor(model => model[i].EmailID)</td>
            </tr>
        }
    </table>
    <p><input type="submit" value="Save" /></p>
    <p style="color:green; font-size:12px;">
        @ViewBag.Message
    </p>
}
 @section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
 }

然后我们必须编写用于将对象列表保存到数据库的代码

[HttpPost]
public ActionResult Index(List<Contact> list)
{  
    if (ModelState.IsValid)
    {
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            foreach (var i in list)
            {
                var c = dc.Contacts.Where(a =>a.ContactID.Equals(i.ContactID)).FirstOrDefault();
                if (c != null)
                {
                    c.ContactPerson = i.ContactPerson;
                    c.Contactno = i.Contactno;
                    c.EmailID = i.EmailID;
                }
            }
            dc.SaveChanges();
        }
        ViewBag.Message = "Successfully Updated.";
        return View(list);
    }
    else
    {
        ViewBag.Message = "Failed ! Please try again.";
        return View(list);
    }
}

Answer 4

using(Html.BeginForm())
{
  // code here 

}

在发布表格数据时，所有标签必须包含在标签中。

Answer 5

按照DRY的原理，您可以为此目的创建一个EditorTemplate。步骤：

1-在“视图”>“共享”>中创建名为（ EditorTemplates ）的新文件夹

2-在新创建的EditorTemplates文件夹内创建一个视图，根据OP示例，该视图的模型应为BatchProductViewModel。将您的代码放在编辑器视图内。不需要循环或索引。

每个子实体的EditorTemplate的行为都类似于PartialView，但采用的是更通用的方式。

3-在您的父实体的视图中，致电您的编辑器： @ Html.EditorFor（m => m.BatchProducts）

不仅可以提供更有条理的视图，还可以让您在其他视图中重复使用同一编辑器。

POST表单数组没有成功

5 个答案: