foreachループで生成された要素のonclickを分離するasp.net mvc

Question

私は、pplが修復のための時計を与えることができるアプリケーションを作成しようとしています。各注文には、時計（バッテリー、バンドなど）で複数の修理を行う必要があります。

詳細のビューでは、foreachループですべての修復を生成し、各修復の横に表示されるチェックボックスを使用して修復をマークし、ステータスが更新され、jqueryでチェックボックスを非表示にします。

問題は、チェックボックスをクリックすると、foreachから生成された最初の修復だけがデータベースで行われたようにマークされますが、すべてのチェックボックスは非表示になります。ここで

は

[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

変更あなたが見..

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

、ここでコントローラのコードがあります次のように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> 
} 

私はそれをテストしていません。