@ 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形式で作成しました。 このエディタでは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> 

は私が（スクリーンショットを参照）自分のアプリケーションのための次の行動を作りたい：秒押すと、「 - 」ボタン、それは代わりに、リストの2番目の要素を削除する必要があり、それは常にICollectionの最初の要素を削除します私の選択にもかかわらずリスト。

このため、私はDiscriptionParametersスクリプトを使用しています。このように見えます。 RemoveDescriptionParameterアクションメソッドにデータを送信し

$('.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) 
     } 
    }) 
}) 

。 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'）。valを（）

あなたのjQueryのセレクタは、CSSクラスです。あなたのひげ剃りコードは、あなたのDescriptionParametersに複数の項目が含まれている場合、このcssクラスを持つ複数の入力フィールドになります（あなたのページの閲覧元を確認してください。と表示されます）。

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

    }); 

});