@ Html.EditorFor가 컨트롤러에 잘못된 값을 보냅니다.

Question

ICollection 목록에 대해 @Html.EditorFor을 생성했습니다.

public virtual ICollection<DescriptionParameters> DescriptionParameters { get; set; } 

클래스 설명 아래에 표시된 매개 변수입니다.

public partial class DescriptionParameters 
    { 
     public int Id { get; set; } 
     [Required (ErrorMessage = "Please enter description")] 
     public string Description { get; set; } 
     [Required(ErrorMessage = "Please enter description parameter")] 
     public string DescriptionParameter { get; set; } 
     public int Product_Id { get; set; } 

     public virtual Product ProductSet { get; set; } 
    } 

나는 Html 양식 내에 @Html.EditorFor(x => x.DescriptionParameters,new {Id="DescriptEditor" })을 만들었습니다. 이 Editor에서는 EditorForTemplate을 만들었습니다.

@model OnlineShop.Models.DescriptionParameters 
<script src="~/Scripts/DiscriptionParameters.js" type="text/javascript"></script> 
<table> 
    <tr> 
     <td> 
      @Html.TextBoxFor(x => x.Description, new { Id="DescriptionField",Class = "EnterDescriptionInfoField" }) 

     </td> 
     <td> 
      @Html.TextBoxFor(x => x.DescriptionParameter, new { Id = "DescriptionParamField", Class = "EnterDescriptionParameterInfoField" }) 

     </td> 
     <td> 
      <input class="AddDescription" type="button" value="+" 
        style="width:20px;height:20px" /> 
     </td> 
     <td> 
      <input class="RemoveDescription" type="button" value="-" 
        style="width:20px;height:20px;text-align:center" /> 
     </td> 
    </tr> 

</table> 
<table> 
    <tr> 
     <td> 
      @Html.ValidationMessageFor(x => x.Description) 
     </td> 
     <td style="padding-left:10px"> 
      @Html.ValidationMessageFor(x => x.DescriptionParameter) 
     </td> 
    </tr> 
</table> 

내가 (스크린 샷 참조) 내 응용 프로그램에 대한 다음 동작을 만들고 싶어 : 두 번째 누르면 "-"버튼을, 대신의 목록에서 두 번째 요소를 삭제한다, 항상 ICollection에서 첫 번째 요소를 삭제합니다 내 선택에도 불구하고 목록.

이러한 이유로 나는 DiscriptionParameters 스크립트를 사용합니다.이 모양은 다음과 같습니다.

$('.RemoveDescription').click(function() { 

    $.ajax({ 
     url: '/AddProductsDialog/RemoveDescriptionParameter', 
     context: this, 
     type: 'GET', 
     data: $('#AddProdForm').serialize() + "&description=" 
      + $('.EnterDescriptionInfoField').val() + "&descriptionParametr=" 
      + $('.EnterDescriptionParameterInfoField').val(), 
     success: function (product) { 
      $('#ProgressShow').empty() 
      $('#AddProdForm').replaceWith(product) 
     } 
    }) 
}) 

이는 데이터를 RemoveDescriptionParameter 작업 메소드로 보냅니다. description 및 descriptionParameter 파라미터 RemoveDescriptionParameter 방법에서는

 [HttpGet] 
     public ActionResult RemoveDescriptionParameter(Product product,string description, 
      string descriptionParameter) 
     { 
      if(description=="") 
      { 
       description = null; 
      } 
      if (descriptionParametr == "") 
      { 
       description = null; 
      } 
      if (product.DescriptionParameters.Count > 1) 
      { 
       product.DescriptionParameters.Remove(
        product.DescriptionParameters.FirstOrDefault(x=>x.Description==description 
        && x.DescriptionParameter==descriptionParametr)); 
      } 
      GoodsContainer1 goods = new GoodsContainer1(); 
      ViewData["Categories"] = goods.CategorySet; 
      ViewData["SubCategories"] = goods.SubCategorySet; 
      return PartialView("~/Views/AddProductsDialog/AddProducts.cshtml", product); 
     } 

, 내가 아닌 chosed리스트 요소의 목록에서 첫 번째 요소의 값을 얻는다.

Answer 1

코드에서이 줄을보십시오.

"& 설명 ="+ $ ('. EnterDescriptionInfoField'). 발은()

귀하의 jQuery 셀렉터는 CSS 클래스입니다. 면도기 코드는이 CSS 클래스가있는 입력 필드가 두 개 이상 있습니다 () DescriptionParameters에 두 개 이상의 항목이 포함되어있는 경우 페이지의보기 소스를 확인하면으로 표시됩니다.

jQuery val() 메서드는 일치하는 요소 집합의 첫 번째 요소 값 을 반환합니다. 즉, DescriptionParameters 속성에 3 개의 항목이있는 경우 면도기 코드가 3 개의 표를 만들고 css 클래스 이름이 EnterDescriptionInfoField 인 3 개의 입력을 갖게됩니다. $('.EnterDescriptionInfoField')은 jQuery 선택기와 일치하는 3 개의 입력 배열을 제공하고 val()은 배열의 첫 번째 항목 값을 반환합니다!

상대 jQuery 선택기를 사용해야합니다. jQuery closest 메서드를 사용하여 현재 테이블 행을 가져오고 find 메서드를 사용하여 특정 css 클래스로 입력을 가져올 수 있습니다.

이렇게하면됩니다.

$(function(){ 

    $('.RemoveDescription').click(function() { 

    $.ajax({ 
      url: '/AddProductsDialog/RemoveDescriptionParameter', 
      context: this, 
      type: 'GET', 
      data: $('#AddProdForm').serialize() + 
      "&description=" + 
          $(this).closest("tr").find('.EnterDescriptionInfoField').val() + 
      "&descriptionParametr=" + 
        $(this).closest("tr").find('.EnterDescriptionParameterInfoField').val(), 
      success: function(product) { 
       //do something with the response 
      } 
    }); 

    }); 

});