如何使用 Ajax 在循环中单独发送记录

Question

我想用 Ajax 将循环内的记录一一发送和保存。每条记录都有一个发送信息的按钮。 但是当我想将记录发送到action方法时，只发送第一条记录的信息。 我还想设置一个条件，如果用户从下拉列表中选择一个项目，则可以发送记录，否则将显示一条消息。

@model ModiranVira.ViewModels.GhrardadViewModel
@using ModiranVira.PublicClass
@{
    Layout = null;
    string numSpace = "#,##0.###";
}

<div class="container-fluid mt-5">

    <table class="table table-bordered table-striped text-sm">



        <thead class="text-center">

            <tr style="background-color:#416992; color: white">
                <th>نوع قرارداد</th>
                <th>مبلغ</th>
                <th>تاریخ شروع</th>
                <th>تاریخ پایان</th>
                <th>تعین کارشناس</th>
                <th>عملیات</th>

            </tr>

        </thead>


        @foreach (var item in Model.ghrardads)
        {
            <tr>

                @switch (@item.NoeaKhadmat)
                {
                    case 1:
                        <td>حسابرسی</td>


                        break;

                    case 2:
                        <td>مالیاتی</td>

                        break;

                    case 3:

                        <td>منابع انسانی</td>
                        break;

                }

                <td>@item.MablghGhrardad</td>

                <td>
                    @item.ShoroeeProjectDate
                </td>

                <td>
                    @item.PayanProjectDate
                </td>

                <input class="d-none" value="@item.id" id="GhradadID" />

                <td>

                    <select class="form-control" id="TaeenKarShnas" required autocomplete="off">
                        <option value="" default="" selected="">انتخاب کنید</option>
                        @foreach (var item1 in Model.Users)
                        {
                            <option value="@item1.Id">@item1.FirstName @item1.Family</option>

                        }
                    </select>

                </td>

                <td class="text-center">

                    <button id="btnstap39" type="button" class="btn btn-sm btn-outline-success"> <i class="fa fa-save"> </i>ذخیره </button>

                </td>

            </tr>

        }

    </table>

 <div id="ohsnap" class="col-md-4 col-xs-12 alert d-none" style="text-align:center;"></div>

</div>


<script>
        $("#btnstap39").on('click', function () {

        $.ajax({
            type: "Post",
            url: '@Url.Action("SubmitGhrardadStap39", "Project")',
            data: {

                'GhradadID': $("#GhradadID").val(),
                'TaeenKarShnas': $("#TaeenKarShnas").val(),

            }
        }).done(function (res) {
            if (res.status == 'ok') {

            $("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
        setTimeout(function () {
            $('#ohsnap').fadeOut('fast');
        }, 2000)
        }
        });

        });

</script>

---

[HttpPost]
public IActionResult SubmitGhrardadStap39(int GhradadID, String TaeenKarShnas)
{
    var ghrar = _context.Ghrardad.Find(GhradadID);

    ghrar.UserID = TaeenKarShnas;

    _context.SaveChanges();

    return Json(new { status = "ok" });

}

Answer 1

根据您的描述，您无法发送第二个数据的原因是您使用jquery ID选择器选择了ID。但是您的所有表 GhradadID 和 TaeenKarShnas 都是相同的 ID，因此您将始终获得相同的（第一）行。为了解决这个问题，我建议您可以将项目 ID 放在输入中并选择 ID，然后单击按钮会找到每个不同的 ID。

我还想做一个条件，如果用户从下拉列表中选择一个项目，可以发送记录，否则将显示一条消息。

我建议您可以尝试在 ajax 之前创建一个条件，如果值为 null 则更改一些内容。

更多细节，您可以参考以下代码：

<div class="container-fluid mt-5">

    <table class="table table-bordered table-striped text-sm">



        <thead class="text-center">

            <tr style="background-color:#416992; color: white">
                <th>نوع قرارداد</th>
                <th>مبلغ</th>
                <th>تاریخ شروع</th>
                <th>تاریخ پایان</th>
                <th>تعین کارشناس</th>
                <th>عملیات</th>

            </tr>

        </thead>


        @foreach (var item in Model.ghrardads)
        {
            <tr>

                @switch (@item.NoeaKhadmat)
                {
                    case 1:
                        <td>حسابرسی</td>


                        break;

                    case 2:
                        <td>مالیاتی</td>

                        break;

                    case 3:

                        <td>منابع انسانی</td>
                        break;

                }

                <td>@item.MablghGhrardad</td>

                <td>
                    @item.ShoroeeProjectDate
                </td>

                <td>
                    @item.PayanProjectDate
                </td>

                <input class="d-none" value="@item.id" id="@string.Format("GhradadID{0}",item.id)" />

                <td>

                    <select class="form-control" id="@string.Format("TaeenKarShnas{0}",item.id)" required autocomplete="off">
                        <option value="" default="" selected="">انتخاب کنید</option>
                        @foreach (var item1 in Model.Users)
                        {
                            <option value="@item1.Id">@item1.FirstName @item1.Family</option>

                        }
                    </select>

                </td>

                <td class="text-center">

                    <button id="@item.id" type="button" class="btn btn-sm btn-outline-success ClicktPost"> <i class="fa fa-save"> </i>ذخیره </button>

                </td>

            </tr>

        }

    </table>



</div>

@section Scripts{ 

    <script>
        $(".ClicktPost").on('click', function (event) {
            var id = event.target.id;
          
            //Get the value according to Button's ID
            var GhradadID = $("#GhradadID" + id).val();
            var TaeenKarShnas = $("#TaeenKarShnas" + id).val();

            //If the TaeenKarShnas is null alert something
            if (TaeenKarShnas == '') {
                alert("please select dropdownlistvalue");
            } else {
                $.ajax({
            type: "Post",
            url: '@Url.Action("SubmitGhrardadStap39", "Home")',
            data: {

                'GhradadID': GhradadID,
                'TaeenKarShnas': TaeenKarShnas,

            }
        }).done(function (res) {
            if (res.status == 'ok') {

                $("#ohsnap").removeClass('hidden').removeClass('alert-danger').addClass('alert-success').html('گام دوم با موفقیت ثبت شد');
            }
        });

        }
        });


    </script>

}

结果：

如果不选择值，可以参考下图

如果你不选择值，你可以参考下图