c# - 有什么方法可以将迭代的 id 传递给 jquery？

Question

我想将 id 和数量(编辑后)传递给我的 ActionResult，但我只能更新第一行。它不适用于其他行。

这是一种数据表(但我用的是div而不是表格)，其中唯一可以更改特定行的数量。

//cshtml part

@foreach (var item in Model.FlatInvoiceItemModels)    
{
    <input asp-for="@item.FlatInvoiceItemRid" type="hidden" id="FlatInvoiceItemRid" />
    <input asp-for="@item.FlatInvoiceRid" type="hidden" id="FlatInvoiceRid" />

    <div class="row">
        <div class="offset-md-3 col-6">
            <label class="position-absolute col-form-label m-2 text-black-50"> @item.Particular  </label> 
            <input class="form-control text-right m-1 p-1" asp-for="@item.Amount" id="Amount" />
        </div>
    </div>  
}

<div class="row">
    <div class="offset-md-3 col-6 text-right border-top border-dark">
        <h6> <label>Total Amount - </label> @Model.FlatInvoiceItemModels.Sum(x => x.Amount).ToString("0")</h6>
    </div>
</div>

// End cshtml part

//JS Part
<script type="text/javascript">
    $('document').ready(function () {
        function UpdateInvoice() {
            var FlatInvoiceItemRid = $('#FlatInvoiceItemRid').val();
            var Amount = $('#Amount').val();
            var FlatInvoiceRid = $('#FlatInvoiceRid').val();
            $.ajax(
                {
                    url: '/AmendInvoice/UpdateInvoice?flatInvoiceItemRid=' + FlatInvoiceItemRid + '&flatInvoiceRid=' + FlatInvoiceRid + '&amount=' + Amount,
                    type: 'POST',
                    contentType: 'html',
                    success: function (UpdateInvoice) {
                        alert('Amount Successfully Updated'),
                            location.reload();    
                    },

                });
        }
        $('#Amount').on("change", function () {
            UpdateInvoice();
        });
    });
</script>



//End JS part

它仅适用于第一行，不适用于其他行。

Answer 1

下面是一个工作演示:

1.型号:

public class FlatInvoiceItemModel
{
    [Key]
    public int FlatInvoiceItemRid { get; set; }
    public int FlatInvoiceRid { get; set; }
    public string Particular { get; set; }
    public int Amount { get; set; }
    public int Id { get; set; }
    public AmendInvoice AmendInvoice { get; set; }
}
public class AmendInvoice
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public List<FlatInvoiceItemModel> FlatInvoiceItemModels { get; set; }
}

2.View(AmendInvoices/Edit.cshtml):

@model AmendInvoice
<div class="row">
    <div class="col-md-4">
        <form id="form">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Id" />
            @for (var i = 0; i < Model.FlatInvoiceItemModels.Count(); i++)
            {
                <input asp-for="@Model.FlatInvoiceItemModels[i].FlatInvoiceItemRid" type="hidden" id="FlatInvoiceItemRid[@i]" name="FlatInvoiceItemRid[@i]" />
                <input asp-for="@Model.FlatInvoiceItemModels[i].FlatInvoiceRid" type="hidden" id="FlatInvoiceRid[@i]" name="FlatInvoiceRid[@i]" />

                <div class="row">
                    <div class="offset-md-3 col-6">
                        <label class="position-absolute col-form-label m-2 text-black-50" name="Particular[@i]"> @Model.FlatInvoiceItemModels[i].Particular </label>
                        <input class="form-control text-right m-1 p-1" asp-for="@Model.FlatInvoiceItemModels[i].Amount" id="Amount[@i]" name="Amount[@i]" />
                    </div>
                </div>

            }
            <div class="row">
                <div class="offset-md-3 col-6 text-right border-top border-dark">
                    <h6> <label>Total Amount - </label> @Model.FlatInvoiceItemModels.Sum(x => x.Amount).ToString("0")</h6>
                </div>
            </div>
        </form>
        <div class="form-group">
            <input type="button" class="btn btn-primary" onclick="UpdateInvoice()" />
        </div>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script type="text/javascript">
        function UpdateInvoice() {
            var ID = $('#Id').val();
            var array = {};
            var data = $('#form').serializeArray();
            for (var i = 0; i < data.length; i++){
             array[data[i]['name']] = data[i]['value'];
          }
            var FlatInvoiceItemRid = new Array();
            $('input[name^="FlatInvoiceItemRid"]').each(function () {
                var Rid = $(this).val();
                FlatInvoiceItemRid.push(Rid);
            }); 
            var Amount = new Array();
            $('input[name^="Amount"]').each(function () {
                var amount = $(this).val();
                Amount.push(amount);
            });
            var FlatInvoiceRid = new Array();
            $('input[name^="FlatInvoiceRid"]').each(function () {
                var id = $(this).val();
                FlatInvoiceRid.push(id);
            });
            var Particular=new Array();
            $('label[name^="Particular"]').each(function () {
                var particular = $(this).text();
                Particular.push(particular);
            });
            $.ajax(
                {
                    url: '/AmendInvoices/Edit',
                    method: 'POST',
                    data: { ID,Particular,FlatInvoiceItemRid, Amount, FlatInvoiceRid }
                });
        }
    </script>
}

3.Controller(AmendInvoicesController):

public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }
        var amendInvoice = await _context.AmendInvoice.Include(a => a.FlatInvoiceItemModels).Where(a => a.Id == id).FirstOrDefaultAsync();
        if (amendInvoice == null)
        {
            return NotFound();
        }
        return View(amendInvoice);
    }

    [HttpPost]
    public async Task<IActionResult> Edit(int id,List<string> Particular,List<int> flatInvoiceItemRid,List<int> flatInvoiceRid,List<int> amount)
    {
        for(var i=0;i<flatInvoiceItemRid.Count();i++)
        {
            var amendInvoice = new FlatInvoiceItemModel(){
                    FlatInvoiceItemRid =flatInvoiceItemRid[i],
                    FlatInvoiceRid=flatInvoiceRid[i],
                    Amount = amount[i],
                    Particular=Particular[i],
                    Id=id
                };
            _context.Update(amendInvoice);
            await _context.SaveChangesAsync();
        }                                   
        return RedirectToAction(nameof(Index));
        //more logic...
    }