c# - @Html.EditorFor sends wrong value to the controller -

i created @html.editorfor icollection list looks 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 . editor 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 make next behavior application(see screenshot):when pressed second "-" button,it should deletes second element in list,instead of ,it deletes first element in icollection list in spite of choice.

for reason use discriptionparameters script.which looks 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 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 description , descriptionparameter parameters,i values of first element in list,instead of chosed list element.

look @ line in code.

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

your jquery selector css class. razor code more 1 input fields css class (just check view source of page , see it) when descriptionparameters contains more 1 item.

jquery val() method returns the value of first element in set of matched elements. means, if had 3 items in descriptionparameters property, razor code create 3 table , have 3 inputs css class name enterdescriptioninfofield. $('.enterdescriptioninfofield') give array of 3 inputs matching jquery selector , val() return value of first item in array !

you should using relative jquery selector(s). may use jquery closest method current table row , use find method input 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 response              }      });    });  });