javascript - partial update on an mvc model in razor using js -

i have table showing data name mail , id.

<table id="da-ex-datatable-numberpaging" class="da-table">     <thead>         <tr>              <th>name</th>             <th>mail</th>             <th>operations</th>         </tr>     </thead>     <tbody>     @foreach(var c in model.models)     {         <form method="post" action="editcustomer" >                                       <tr>               <td>@c.name</td>              <td>@c.mail</td>              <td>                   <input type="button" value="edit" onclick="edit()" />                  <input type="submit" value="save"/>              </td>          </tr>      </form>      }       </tbody> </table> 

what want edit names , mail on fly 1 row. on right column of table have 2 buttons edit , save. when click on edit transform

<td>john doe</td>  

to

<td><input type="text" name="namee" id="3namee" value="john doe" /></td> 

by using javascript method

function edit(tag) {      var id = tag.getattribute("id");     var name = document.getelementbyid(id + "name").innerhtml;     var mail = document.getelementbyid(id + "mail").innerhtml;      document.getelementbyid(id + "name").innerhtml = '<input type="text" name="namee" id="' + id + 'namee" value="' + name + '" />';     document.getelementbyid(id + "mail").innerhtml = '<input type="text" name="maile" id="' + id + 'maile" value="' + mail + '" />'; } 

and user edits element on textboxes.

my question put form , how post values on controller? see model has customer list in it. want update them individually. know when submit form model passed client, values changed not put in model since i've created inputs in javascript. i'm lost here please me out here. might have mixed things up, dont hesitate suggest change overall approach.

you have <input> on page, tied model, , hide/show javascript.

instead of:

@foreach(var c in model.models) {     ...     <td>@c.name</td>     ... } 

try:

@for (var = 0; < model.models.count; i++) {     ...     <td>         <span>@model.models[i].name</span>         @html.textboxfor(x => x.models[i].name, new { @style = "display:none" });     </td>     ... } 

use jquery .show() , .hide() on input , span objects when clicks edit.

the generated input names may strange, bind model correctly assuming have 1 form (not 1 each row) , controller method looks this:

[httppost] public actionresult editcustomers(myviewmodel model) {     // model.models works here     ... } 

this post might helpful well.