title: partial update on an mvc model in razor using js
body: <p>I have a table showing some data as name mail and id. </p>
  
  <pre><code>&lt;table id="da-ex-datatable-numberpaging" class="da-table"&gt;
      &lt;thead&gt;
          &lt;tr&gt; 
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Mail&lt;/th&gt;
              &lt;th&gt;Operations&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      @foreach(var c in Model.models)
      {    
      &lt;form method="post" action="EditCustomer" &gt;                             
           &lt;tr&gt; 
               &lt;td&gt;@c.name&lt;/td&gt;
               &lt;td&gt;@c.mail&lt;/td&gt;
               &lt;td&gt; 
                   &lt;input type="button" value="Edit" onclick="edit()" /&gt;
                   &lt;input type="submit" value="Save"/&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
       &lt;/form&gt;
       } 
       &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>what I want to do is edit names and mail on the fly for just one row. On right most column of the table I have two buttons as edit and save. when I click on edit I transform the </p>
  
  <pre><code>&lt;td&gt;john doe&lt;/td&gt; 
  </code></pre>
  
  <p>to </p>
  
  <pre><code>&lt;td&gt;&lt;input type="text" name="nameE" id="3nameE" value="john doe" /&gt;&lt;/td&gt;
  </code></pre>
  
  <p>by using this javascript method</p>
  
  <pre><code>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 = '&lt;input type="text" name="nameE" id="' + id + 'nameE" value="' + name + '" /&gt;';
      document.getElementById(id + "mail").innerHTML = '&lt;input type="text" name="mailE" id="' + id + 'mailE" value="' + mail + '" /&gt;';
  }
  </code></pre>
  
  <p>and user edits the element on that textboxes.</p>
  
  <p>my question is where to put the form and how to get the post values on controller? as you see my model has a customer list in it. but I want to update them individually. I know when I submit the form the model will be passed to the client, but the values that I just changed are not put in model since I've created those inputs in javascript. I'm lost here please help me out here. I might have mixed things up, dont hesitate to suggest to change the overall approach.</p>