c# - Send data from loop created input fields in view to mvc controller -

i have view different fields in loop. depending on model should create fields counts loop. here example page:

 _________     ___________     _________ |connector|   |searchinput|   |selection| |_________|   |___________|   |_________|  ________________      ________________ |add search field|    |sub search field| |_b_u_t_t_o_n____|    |_b_u_t_t_o_n____| 

the view class looks like:

@model modelle.models.searchmodel <table>     @for (int = 0; < (int)model.searchcount; i++)     {  <tr>         <th>@if (i > 0)             {<select name="connectorlist" id="connectorlist">             <option value="and" @(model.connectorlist.elementat(i - 1).equals("and") ? "selected" : "")>and</option>             <option value="or" @(model.connectorlist.elementat(i - 1).equals("or") ? "selected" : "") >or</option>             <option value="nand" @(model.connectorlist.elementat(i - 1).equals("nand") ? "selected" : "") >nand</option>             <option value="nor" @(model.connectorlist.elementat(i - 1).equals("nor") ? "selected" : "") >nor</option>         </select>}         </th>         <th>             <input name="searchinput" id="searchinput" type="text" value="@(model.searchlist.elementat(i) string)" /></th>         <th>             <select name="selectionlist" id="selectionlist">                 @for (int j = 0; j < model.selectedlist.count(); j++)                 {<option value="@j" @(model.selection.elementat(i).equals(j) ? "selected" : "")>@(model.selectedlist.elementat(j).name string)</option>                  }             </select>         </th>     </tr>}  </table> <p>     <button name="button" type="button" onclick="addsearchfield()">add 1 more search field</button>     <button name="button" type="button" onclick="subsearchfield()">remove 1 search field</button> 

here jquery code buttons:

function addsearchfield() {     var value1 = $('#searchinput').val();     var value2 = $('#selectionlist').val();     var value3 = $('#connectorlist').val();     $.ajax({         url: "@url.action("addsearchfield", "search")",         type: 'post',         chache:false,         data: 'searchinput=' + value1 + '&selectionlist=' + value2 + '&connectorlist=' + value3,             success: function (response) {                 $('#opensearchinput').html(response);             },    });     }     function subsearchfield() {         var value1 = $('#searchinput').val();         var value2 = $('#selectionlist').val();         var value3 = $('#connectorlist').val();         $.ajax({             url: "@url.action("subsearchfield", "search")",             type: 'post',             chache: false,             data: 'searchinput=' + value1 + '&selectionlist=' + value2 + '&connectorlist=' + value3,             success: function (response) {                 $('#opensearchinput').html(response);             },         }); } 

and controller code:

public partialviewresult addsearchfield(list<string> searchinput, list<int> selectionlist, list<string> connectorlist)         {             searchmodel searchmodel = new searchmodel();             if (connectorlist == null)             {                 connectorlist = new list<string>();             }             searchmodel.connectorlist = connectorlist;             searchmodel.selection = selectionlist.tolist();                       searchmodel.selectedlist = setsearchfields();             list<string> searchlist = new list<string>();             int row = searchinput.count();             searchmodel.searchlist = searchinput.tolist();             searchmodel.searchlist.add("search");             searchmodel.searchcount = row + 1;             searchmodel.connectorlist.add("and");             searchmodel.selection.add(0);             return partialview("searchinput", searchmodel);         }         public partialviewresult subsearchfield(list<string> searchinput, list<int> selectionlist, list<string> connectorlist)         {             searchmodel searchmodel = new searchmodel();             if (connectorlist == null)             {                 connectorlist = new list<string>();             }             searchmodel.connectorlist = connectorlist;             searchmodel.selection = selectionlist.tolist();                       searchmodel.selectedlist = setsearchfields();             list<string> searchlist = new list<string>();         int row = searchinput.count();         searchmodel.searchlist = searchinput.tolist();         if (searchinput.count() > 1)         {             searchmodel.searchlist.removeat(searchinput.count() - 1);             searchmodel.searchcount = row - 1;             searchmodel.connectorlist.removeat(connectorlist.count() - 1);             searchmodel.selection.removeat(selectionlist.count() - 1);         }         else         {             searchmodel.searchcount = row;         }         return partialview("searchinput", searchmodel);     } 

if load page has 1 search line. if press button "add 1 more search field" added 1 line. if click second time nothing happens. if click "remove 1 search field button (anytime) second fields disappear. in debug mode, can see in controller everytime lists count 1.

did know i´m mistaken? know easier way add lines? have send inputs later controler search in database different rules depending on inputs.

you using

<input name="searchinput" id="searchinput" type="text" value="@(model.searchlist.elementat(i) string)" /> 

and other form elements in loop.

therefore in dom, rendering multiple fields same ids('searchinput','connectorlist','selectionlist')

var value1 = $('#searchinput').val(); assigns 1 string value value1,

data: 'searchinput=' + value1 here value1 have 1 stirng.

remove ids form elements change ajax call as

$.ajax({         url: "@url.action("subsearchfield", "search")",         type: 'post',         cache: false,         data: $('#the form tag id').serialize(),         success: function (response) {             $('#opensearchinput').html(response);         },     });