모델 데이터와 다른 AJAX 포스트 백 반응

Question

텍스트 필드가있는 부분 뷰가 있고 목록 설정에 바인딩되어 있으므로 기본적으로 사용자가 다른 행을 추가하거나 삭제할 수있는 텍스트 필드 행이 있습니다. . 나는이 같은 목록을 반복하여보기를 구축 :

[HttpPost] 
    public ActionResult AddShippingLocation(PricingRequestModel model) 
    { 
     model.ShippingLocationsModel.Add(new ShippingLocationsModel());  

     return PartialView("shiplocationsPartial", model); 
    } 

    [HttpPost] 
    public ActionResult RemoveShippingLocation(PricingRequestModel model) 
    { 
     model.ShippingLocationsModel.RemoveAt(StaticItems.id); 

     return PartialView("shiplocationsPartial", model); 
    } 

그리고 게시물 데이터와 뷰 반환 내 JQuery와 기능 :

@model PricingRequestWebApp.Web.Models.PricingRequestModel 

<div id="shiplocation-wrapper"> 
    <table class="shipinfoprtable"> 
     <thead> 
      <tr> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].Address)<span class="formRed">*</span></th> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].City)<span class="formRed">*</span></th> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].State)<span class="formRed">*</span></th> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].Zip)<span class="formRed">*</span></th> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].PFreight)<span class="formRed">*</span></th> 
       <th>@Html.LabelFor(m => m.ShippingLocationsModel[0].FreightType)<span class="formRed">*</span></th> 
       <td><span class="link" id="addlocation" onclick="AddShippingLocation()">Add</span></td> 
      </tr> 
     </thead> 
     <tbody> 
      @for (int i = 0; i < Model.ShippingLocationsModel.Count; i++) 
      { 
       <tr> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].Address, new { @style = "width: 200px" })</td> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].City, new { @style = "width: 150px" })</td> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].State, new { @size = 3 })</td> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].Zip, new { @style = "width: 80px" })</td> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].PFreight, new { @style = "width: 80px" })</td> 
        <td>@Html.TextBoxFor(m => m.ShippingLocationsModel[i].FreightType, new { @style = "width: 200px" })</td> 
        @if (Model.ShippingLocationsModel.Count > 1) 
        { 
         <td><span class="link" id="removelocation" onclick="RemoveShippingLocation(@i);">Remove</span></td> 
        } 
       </tr> 
      } 
     </tbody> 
    </table> 
</div> 

내 컨트롤러 방법은 그래서 같이

function AddShippingLocation() { 
    $.ajax({ 
     data: $('#shippinginfoform').serialize(), 
     type: "POST", 
     url: "/PricingRequest/AddShippingLocation", 
     success: function (response) { 
      $('#shiplocation-wrapper').html(response); 
     } 
    }) 
} 

function RemoveShippingLocation(id) { 
    $.ajax({ 
     data: { id: id }, 
     type: "POST", 
     url: "/PricingRequest/SaveID", 
     complete: function() { 
      $.ajax({ 
       data: $('#shippinginfoform').serialize(), 
       cache: false, 
       type: "POST", 
       url: "/PricingRequest/RemoveShippingLocation", 
       success: function (response) { 
        $('#shiplocation-wrapper').html(response); 
       } 
      }) 
     } 
    }) 
} 

을

이제 사용자보기에서 4 개의 항목을 만들었습니다. 나는 항목 2를 클릭하여 제거하고 ID로 전달합니다. 그런 다음 모델 목록에서 해당 모델을 제거하고 업데이트 된 모델로 뷰를 전달합니다. 지금 적어도 50 번 이상 디버깅했으며 컨트롤러 메소드는 뷰와 데이터를 정확하게 보여줍니다. 알 수 없지만 아약스의 응답은 디버깅하는 동안 내가 보는 것과 다르게 표시됩니다. 항목 2 제거를 클릭하면 항목 4가 제거됩니다. 항목이 5 개인 경우 제거 할 항목이 무엇이든 항목 5가 제거됩니다. 항상 삭제되는 항목입니다. 나는 여기서 뭔가를 놓치고 있어야한다는 것을 알고 있지만 나는 무엇을 볼 수 없다. 어떤 아이디어? 감사.

Answer 1

코드 문제는 모델 바인더가 올바르게 작동하지 못하게하는 간격을두고 요소를 추가/제거 할 때 컬렉션에 순차 인덱스를 사용하고 해당 인덱스를 다시 계산하지 않는다는 것입니다. 대안으로 following blog post에서 설명한 비 순차 인덱스를 사용할 수 있습니다.