ASP.NET Core Model 使用jquery中继器绑定

Question

有很多类似的问题，但我找不到合适的答案。

我使用 Jquery 中继器，中继器工作正常，但我无法绑定我的 model，因为输入名称与我的 model 名称不匹配。

所以我按照这个答案answer并将输入名称 group-a[0][text-input] 更改为 group-a[0].text-input 这对于第一个输入来说工作得很好但是一旦我添加下一行输入名称变为 group-a[0].0

现在我又不能绑定我的 model。

我想请教如何解决这个问题，或者请给我一些更好的绑定model的方法。我已经搜索了几天，但仍然没有得到答案，我也是初学者。 谢谢

enter code here public class CreatePurchaseOrderModel
{
    [Required(ErrorMessage ="Vendor name is required")]
    public string VendorId { get; set; }

    public List<ProductDetails> ProductDetails { get; set; }

    [Required]
    public decimal TotalPrice { get; set; }
    public decimal VatAmount { get; set; }
    [Required]
    public decimal NetAmount { get; set; }
    public bool IsVatType { get; set; }
    public List<VendorModel>? Vendor { get; set; }
}

public class ProductDetails
{
    [Required(ErrorMessage = "Product name is required")]
    public string ProductId { get; set; }

    [Required(ErrorMessage = "Quantity  is required")]
    public int Quantity { get; set; }

    [Required(ErrorMessage = "Rate  is required")]
    public decimal Rate { get; set; }
}


enter code here public async Task<IActionResult> CreatePurchaseOrder(CreatePurchaseOrderModel model)
    {

        if (ModelState.IsValid)
        {
            var response = await _iPurchaseOrderService.CreatePurchaseOrder(model);
            if (response.IsSuccessStatusCode)
            {
                var responseMessage = await response.Content.ReadAsAsync<ResponseMessageModel>();
                if (responseMessage.ResponseMessage == ResponseMessage.PurchaseOrderCreatedSucessfully)
                {
                    TempData["Success"] = ResponseMessage.PurchaseOrderCreatedSucessfully;
                    return RedirectToAction("Index", "PurchaseOrder");
                }
            }
            TempData["Error"] = $"Something went wrong";
            return RedirectToAction("Index", "PurchaseOrder");
        }
        await InitializedViewBagAsync();
        var vendorListResponse = await _iPurchaseOrderService.GetAllVendorList();
        if (vendorListResponse.IsSuccessStatusCode)
        {
            var vendorList = await vendorListResponse.Content.ReadAsAsync<List<VendorModel>>();
            var vendorListmodel = new CreatePurchaseOrderModel()
            {
                Vendor = vendorList
            };
            return View(vendorListmodel);
        }
        return View(model);
    }

Answer 1

您的错误是由以下代码引起的：

var matches = $input.attr('name').match(/\[[^\]]+\]/g);

 var name = matches ?
  // strip "[" and "]" characters
 last(matches).replace(/\[|\]/g, '') :
 $input.attr('name');
                        

 var newName = groupName + '[' + index + '].' + name +($input.is(':checkbox') || $input.attr('multiple') ? '[]' : '');

 $input.attr('name', newName);

代码从[]中的最后一个值读取名称，我记录了 newName 的值，您可以看到它是如何工作的：

测试一：

测试2：

绑定你的model，我觉得提交表单的时候加上js代码修改输入名称比修改jQuery里面的逻辑更方便。

我尝试如下：

<script>
    var items = document.getElementsByClassName("product");
    $('#save').click(function () {
        for (var i = 0; i < items.length; i++)
        {
            items[i].setAttribute("name", "ProductDetails["+i+"].ProductId")
        }        
    });
</script>

……

<div data-repeater-list="">
        <div data-repeater-item="">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <input  class="product"name="ProductId" />               
            </div>
        </div>
    </div>
<input data-repeater-create type="button" value="Add" />
    <input id="save"type="submit" value="Save" />

结果：