有什么方法可以将迭代ID传递给jquery吗?

时间:2019-08-07 10:29:47

标签: c# ajax asp.net-mvc asp.net-core datatable

我想将ID和金额(编辑后)传递给我的ActionResult,但是我只能更新第一行。它不适用于其他行。

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

# A tibble: 2 x 4
    A_1   A_2   B_1   B_2
  <dbl> <int> <int> <int>
1     1     1     2     1
2    NA     1     1     1

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

2 个答案:

答案 0 :(得分:2)

这是一个工作示例,如下所示:

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...
    }

答案 1 :(得分:1)

将剃须刀更改为使用for循环:

@for (int i = 0; i < Model.FlatInvoiceItemModels.Length; i++) 
{ 
    @Html.HiddenFor(m => Model.FlatInvoiceItemModels[i].FlatInvoiceItemRid)
    @Html.HiddenFor(m => Model.FlatInvoiceItemModels[i].FlatInvoiceRid)       
    <div class="row">
        <div class="offset-md-3 col-6">
            @Html.LabelFor(m => Model.FlatInvoiceItemModels[i].Particular)
            @Html.TextBoxFor(m => Model.FlatInvoiceItemModels[i].Amount)
        </div>
    </div>
}

这将导致以下标记:

<input id="FlatInvoiceItemModels_0__FlatInvoiceItemRid" name="FlatInvoiceItemModels[0].FlatInvoiceItemRid" style="display:none;" type="text" value="Id123">
<input id="FlatInvoiceItemModels_0__FlatInvoiceRid" name="FlatInvoiceItemModels[0].FlatInvoiceRid" style="display:none;" type="text" value="Id123">     
<div class="row">
    <div class="offset-md-3 col-6">
        <label>Particular</label>
        <input id="FlatInvoiceItemModels_0__Amount" name="FlatInvoiceItemModels[0].Amount" type="text" value="111"> 
    </div>
</div>

然后您可以序列化此数据并通过ajax发布

function objectifyForm(formArray) {//serialize data function
    var returnArray = {};
    for (var i = 0; i < formArray.length; i++){
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

var data = objectifyForm($('form').serializeArray());
$.ajax({
    data: data,
    dataType: "text/json",
    type: "POST",
    url: "/AmendInvoice/UpdateInvoice",
    success: success,
    error: error
});