@Html.EditorFor sends wrong value to the controller

Question

I created @Html.EditorFor for ICollection list which looks like this.

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

Class DescriptionParameters shown below.

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

I created @Html.EditorFor(x => x.DescriptionParameters,new {Id="DescriptEditor" }) inside Html form . For this Editor i created 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>

I want to make next behavior for my application(see screenshot):When it is pressed second "-" button,it should deletes second element in the list,instead of ,it always deletes first element in ICollection list in spite of my choice.

For this reason i use DiscriptionParameters script.Which looks like this.

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

Which sends data to the RemoveDescriptionParameter action method.

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

In RemoveDescriptionParameter method for description and descriptionParameter parameters,i get values of first element in list,instead of chosed list element.

Answer 1

Look at this line in your code.

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

Your jQuery selector is the css class. Your razor code will more than one input fields with this css class (Just check the view source of your page and you will see it) when your DescriptionParameters contains more than one item.

jQuery val() method returns you the value of the first element in the set of matched elements. That means, If you had 3 items in your DescriptionParameters property, your razor code create 3 table and you will have three inputs with css class name EnterDescriptionInfoField. $('.EnterDescriptionInfoField') will give you an array of 3 inputs matching the jQuery selector and val() will return the value of first item in the array !

You should be using relative jQuery selector(s). You may use the jQuery closest method to get the current table row and use find method to get the input with the specific css class.

This should work.

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

  });

});