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);仅更改最后一行（div）的HTML，则javascript只能具有一个具有相同名称add的函数，如果再次声明具有相同名称的函数，它将替换旧的。解决方案是只声明一次函数add，即将脚本放在外部并添加add和extra参数，该参数指示应将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>

AJAX仅更新最后一个项目ID

2 个答案: