0

このようなリストを作成@Html.EditorForしました。ICollection

 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.EditorFor(x => x.DescriptionParameters,new {Id="DescriptEditor" }) Html form 内に作成 しました。このエディターでは、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 番目の「-」ボタンを押すと、リストの 2 番目の要素を削除するのではなくICollection、選択にかかわらず常にリストの最初の要素を削除する必要があります。 ビュー内の EditorFor

このため、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 アクション メソッドに送信します。

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

パラメータのRemoveDescriptionParameterメソッドでdescription、 descriptionParameter選択したリスト要素ではなく、リストの最初の要素の値を取得します。

4

1 に答える 1

1

コードのこの行を見てください。

"&description=" + $('.EnterDescriptionInfoField').val()

jQuery セレクターは css クラスです。複数のアイテムが含まれている場合、カミソリコードはこの css クラスで複数の入力フィールドになります (ページのビューソースを確認するだけで表示されます)。DescriptionParameters

jQueryval()メソッドは、一致した要素のセットの最初の要素の値を返します。つまり、DescriptionParametersプロパティに 3 つのアイテムがある場合、かみそりのコードは 3 つのテーブルを作成し、css クラス名を持つ 3 つの入力を持つことになりますEnterDescriptionInfoField。$('.EnterDescriptionInfoField')jQueryセレクターに一致する3つの入力の配列を提供し、配列val()の最初のアイテムの値を返します!

相対 jQuery セレクターを使用する必要があります。jQueryclosestメソッドを使用して現在のテーブル行を取得し、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
             }
     });

  });

});
于 2016-08-08T15:53:35.983 に答える