POST 控制器 - 值绑定为 null

Question

net 和我的代码有不同的部分。首先是模型。 哪里的数据是这样的

public string skuItem { get; set; }

然后我在我正在使用的地方使用 chtml

<table id="submissionTable" class="table table-bordered">
    <thead>
        <tr>
            <td>Sample ID</td>
            <td>Additional Comments</td>
            <td>Acid-stable amino acids</td>
        </tr>
    </thead>

    <tr id="tablerow0">
        <td>
            <div class="form-group">
                <label asp-for="skuItem[0]" class="control-label"></label>
                <input type="text" asp-for="skuItem[0]" cols="20" rows="5" class="form-control" style="border-radius: 12px;" />
                <span asp-validation-for="skuItem[0]" class="text-danger"></span>
            </div>
        </td>
    </tr>
</table>
<p>
    <button id="add" type="button" class="btn btn-primary">Add</button>
</p>

添加其他行的脚本正在运行

<script>
    var counter = 1;

    $(function () {
        $('#add').click(function () {
            $('<tr id="tablerow' + counter + '"><td>' +
                '<input type="text" class="text-box single-line" name="skuItem[' + counter + ']" value="" required="required" />' +

                '<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
                '</td>' +
                '</tr>'
            ).appendTo('#submissionTable');
            
            counter++;
            return false;
        });
    });
    
    function removeTr(index) {
        if (counter > 1) {
            $('#tablerow' + index).remove();
            counter--;
        }
    
        return false;
    }


    Ladda.bind('.btn', { timeout: 1000 });
</script>

我的ajax函数是这样的

function SubmitAddEdit(form) {

if ($(form).valid()) {
    var data = $(form).serializeArray();

    data = JSON.stringify(data);

    alert(data);

    $.ajax({
        type: 'POST',
        url: apiurl,
        data: data ,
        contentType: 'application/json',
        dataType:'json',
        success: function (data) {
            if (data.success) {
                popup.modal('hide');
                toastr.success(data.message);
                dataTable.ajax.reload();
            } else {
                toastr.error(data.message)
            }
        }
    });
}

return false;

}

Till this point think is working check this picture

一旦 ajax 被执行，post 控制器将赋值为 null

please check this controller where there is 4 count but somehow skuItem is null

请指导我为什么我的代码有错误，特别是当 javascript 可以具有价值但在 ajax 发布时我在控制器中得到空值

  [HttpPost]
        public async Task<IActionResult> PostPurchaseItems([FromBody] List<PurchaseItems> purchase)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            try
            {

                if (purchase[0].purchaseItemsId == Guid.Empty)
                    {
                    for (int i = 0; i <= purchase.Count; i++)

                        {

                        ApplicationUser appUser = await _userManager.GetUserAsync(User);

                        purchase[0].purchaseId = Guid.NewGuid();
                        purchase[0].CreatedById = appUser.Id;
                        purchase[0].CreatedByName = appUser.FullName;
                        purchase[0].CreateBy = appUser.FullName;
                        purchase[0].CreateAt = DateTime.Now;
                        purchase[0].DeleteFlag = 0;


                  




                    _context.PurchaseItems.Add(purchase[0]);

                    await _context.SaveChangesAsync();

                        }

                    return Json(new { success = true, message = "Add new data success." });
                }
                else
                {

                    ApplicationUser appUser = await _userManager.GetUserAsync(User);
                    purchase[0].CreatedById = appUser.Id;
                    purchase[0].CreatedByName = appUser.FullName;
                    purchase[0].CreateBy = appUser.FullName;
                    purchase[0].CreateAt = DateTime.Now;
                    
                   

                    List<Contact> contact = _context.Contact.Where(x => x.customerId.Equals(purchase[0].customerId) && x.DeleteFlag != 1).ToList();

                    


                    _context.Update(purchase);
                    await _context.SaveChangesAsync();






                    return Json(new { success = true, message = "Edit data success." });
                }
            }
            catch (Exception ex)
            {

                return Json(new { success = false, message = ex.Message });
            }


        
               
            }

Answer 1

首先名称应采用以下格式：list[index].property

<div class="form-group">
    <label asp-for="skuItem" name="purchase[0].skuItem" class="control-label"></label>
    <input type="text" asp-for="skuItem" name="purchase[0].skuItem" cols="20" rows="5" class="form-control" style="border-radius: 12px;" />
    <span asp-validation-for="skuItem" name="purchase[0].skuItem" class="text-danger"></span>
</div>

其次，json字符串与List<PurchaseItems>结构不匹配。您可以使用默认的 contentType 发送它。

var data = $(form).serialize();
$.ajax({
    type: 'POST',
    url: apiurl,
    data: data ,
    dataType:'json',
    success: function (data) {
        if (data.success) {
            popup.modal('hide');
            toastr.success(data.message);
            dataTable.ajax.reload();
        } else {
            toastr.error(data.message)
        }
    }
});

同时修改控制器：

public async Task<IActionResult> PostPurchaseItems(List<PurchaseItems> purchase)