AJAX только обновляет последний идентификатор элемента

Question

Я хочу обновить элемент на основе нажатия кнопки и отправить данные в базу данных с помощью кнопок ajax и javascript, когда я нажимаю на кнопки других строк, обновляется только последняя строка, а не нужная строка.

вот моя разметка ивызов ajax:

@foreach (var item in Model)
    {
        <tr>
            <td>
                <div id="modelquantiy-@item.Id">
                    @Html.DisplayFor(modelItem => item.Quantity)

                    <script>
                        var value = 0;
                        function add() {
                            if (value >= 5) {
                                alert("No More Than Five Items");    
                            } else {
                                postData = { 'number': 1, 'id': @item.Id };
                                $.ajax({
                                    url: '@Url.Action("Quantity", "Home")',
                                    contentType: "application/json;charset=utf-8",
                                    type: 'POST',
                                    dataType: 'json',
                                    data: JSON.stringify(postData),
                                    success: function (data) {
                                        $("#modelquantiy-@item.Id").html(data.result);
                                    },
                                    //if it breaks, you want to be able to press F12 to see why
                                    error: function (data) {
                                        window.console.log(data);
                                    }
                                });
                            }
                        }
                    </script>
                </div>
            </td>
            <td>
                <input type="button" id="Add" name="Add" value="+" onclick="add();" />
                <input type="button" id="Subtract" name="Subtract" value="-" onclick="subtract();" />
            </td>
        </tr>
    }

и вот мой код бэкенда, который я написал на C #

public ActionResult Quantity(int number, int id)
        {
            Qty Quantity = db.Qties.FirstOrDefault(q => q.Id == id);

            if (Quantity != null)
            {
                Quantity.Quantity = Quantity.Quantity + number;
                db.SaveChanges();
            }
            return Json(new { result = Quantity.Quantity }, JsonRequestBehavior.AllowGet);
        }

Answer 1

Вы должны добавить скрипт вне пределов foreach и использовать onclick для передачи параметров.

@foreach (var item in Model)
    {
        <tr>
            <td>
                <div id="modelquantiy-@item.Id">
                    @Html.DisplayFor(modelItem => item.Quantity)


                </div>
            </td>
            <td>
                <input type="button" id="Add" name="Add" value="+" onclick="add(@item.Id);" />
                <input type="button" id="Subtract" name="Subtract" value="-" onclick="subtract();" />
            </td>
        </tr>
    }
  <script>
                    var value = 0;
                    function add(val) {
                        if (value >= 5) {
                            alert("No More Than Five Items");    
                        } else {
                            postData = { 'number': 1, 'id': val };
                            $.ajax({
                                url: '@Url.Action("Quantity", "Home")',
                                contentType: "application/json;charset=utf-8",
                                type: 'POST',
                                dataType: 'json',
                                data: JSON.stringify(postData),
                                success: function (data) {
                                    $("#modelquantiy-"+val).html(data.result);
                                },
                                //if it breaks, you want to be able to press F12 to see why
                                error: function (data) {
                                    window.console.log(data);
                                }
                            });
                        }
                    }
                </script>

Answer 2

Проблема в том, что add функция повторно объявляется в каждом цикле, поэтому при нажатии каждой кнопки будет работать только последняя объявленная add функция, у этой последней объявленной функции add будет оператор $("#modelquantiy-@item.Id").html(data.result);который изменит HTML только последней строки (div), javascript может иметь только одну функцию с тем же именем add, если вы снова объявите функцию с тем же именем, она заменит старую.Решение состоит в том, чтобы объявить функцию add только один раз, то есть поместить скрипт снаружи и добавить и дополнительный параметр, который указывает, к какой строке следует добавить результат ajax.

@foreach (var item in Model)
{
    <tr>
        <td>
            <div id="modelquantiy-@item.Id">
                @Html.DisplayFor(modelItem => item.Quantity)                        
            </div>
        </td>
        <td>
            <input type="button" id="Add" name="Add" value="+" onclick="add(@item.id);" />
            <input type="button" id="Subtract" name="Subtract" value="-" onclick="subtract();" />
        </td>
    </tr>
}
<script>
    var value = 0;
    function add(itemID) {
        if (value >= 5) {
            alert("No More Than Five Items");    
        } else {
            postData = { 'number': 1, 'id': itemID };
            $.ajax({
                url: '@Url.Action("Quantity", "Home")',
                contentType: "application/json;charset=utf-8",
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(postData),
                success: function (data) {
                    $("#modelquantiy-"+itemID).html(data.result);
                },
                //if it breaks, you want to be able to press F12 to see why
                error: function (data) {
                    window.console.log(data);
                }
            });
        }
    }
</script>