Question

我正在尝试制作一个ppl可以在手表上进行维修的应用程序。每个订单都可以在手表上进行多次维修（电池，带......等）。

在订单的详细信息视图中，我通过foreach循环生成所有修复，每个修复旁边都出现一个复选框，将修复标记为已完成，然后状态更新，我通过jquery隐藏复选框。

问题在于，当我单击任何复选框时，只有从foreach生成的第一个修复在数据库中标记为已完成，但所有复选框都被隐藏。

以下是视图..

h2>Details</h2>
<div>
<span>@Model.Customer.GetName()</span><br/>
<span>@Model.Customer.Landine</span><br/>
<span>Ticket Id: @Model.Id</span>
</div>
<div>
@foreach (var repair in Model.Repairs)
{ 
    <div style="border-bottom: black">
        <span>@repair.RepairType.Name</span><br />
     <span> Repair Status: <span class="status">@(repair.IsDone ? "Done" : "Processing")</span></span>
        @if (!repair.IsDone)
        {
            <span><input type="checkbox" class="status-checkbox" data-repair-
            id="@repair.Id" />Mark as done</span><br />
        }

        <span>Location: @Model.Location.Name</span>
    </div>

}
</div>

这是我的jQuery ..

@section Scripts{
<script>
    $(document).ready(function() {
        $('span .status-checkbox').on("click",
            function () {

                var checkBox = $("span .status-checkbox");
                var status = checkBox.is(":checked");
                var data = {
                    id: checkBox.attr("data-repair-id"),
                    isChecked: status

                };
                $.ajax({
                    url: '/Repairs/UpdateStatus',
                    type: 'POST',
                    data: data,
                    dataType: 'html',
                    success: function (data) {
                        $("span .status").html(data);
                        checkBox.hide();
                    },
                    error: function() {
                        alert("Problem updating repair status");
                    }
                });

            });
    });
</script>
}

这是控制器代码..

  [HttpPost]
    public async Task<ActionResult> UpdateStatus(int id, bool isChecked)
     {
        var repair = await _context.Repairs.FindAsync(id);
        if (repair != null)
        {
            repair.IsDone = isChecked;
        }
        await _context.SaveChangesAsync();

        return Content("Done");

     }

Answer 1

更改您的视图以添加ID道具，如下所示：

@foreach (var repair in Model.Repairs)
{ 
    <div style="border-bottom: black">
    <span>@repair.RepairType.Name</span><br />
   <span> Repair Status: <span id="sp_@repair.Id" class="status">@(repair.IsDone ? "Done" : "Processing")</span></span>
    @if (!repair.IsDone)
    {
        <span><input type="checkbox" class="status-checkbox" data-repair-
        id="@repair.Id" />Mark as done</span><br />
    }

    <span>Location: @Model.Location.Name</span>
  </div>

}

然后在你的剧本中：

<script>
$(document).ready(function() {
    $('span .status-checkbox').on("click",
        function () {

            var checkBox = $(this);
            var status = checkBox.is(":checked");
            var repairId = checkbox.data('repair-id');
            var data = {
                id: checkBox.attr("data-repair-id"),
                isChecked: status

            };
            $.ajax({
                url: '/Repairs/UpdateStatus',
                type: 'POST',
                data: data,
                dataType: 'html',
                success: function (data) {
                    $("#sp_"+repairId).html(data);
                    checkBox.hide();
                },
                error: function() {
                    alert("Problem updating repair status");
                }
            });

        });
});
</script>
}

我没有测试过，因此您可能需要根据需要进行一些更改。

在foreach循环上生成的元素上分离onclick asp.net mvc

1 个答案: