jquery - Refresh table using AJAX in ASP.NET MVC -

i want update table in mvc using ajax. inserted data in database using ajax. want update table after insert new row.

ps. tried search nothing helped me, i`m still confused.

here code:  main page view:  <div id="thetable">     @html.partial("_iptable")  </div>     <script src="~/scripts/jquery-1.10.2.min.js"></script>     <script src="~/scripts/admin.js"></script>"`  partial page view:  <table id="table">`     <tr>         <th>id</th>         <th>line</th>         <th>supplier</th>     </tr>      @foreach (var item in viewbag.iptable)`     {        <tr>             <td>                 @item.id             </td>             <td>                 @item.line             </td>             <td>                 @item.supplier             </td>         </tr>      } </table>enter code here  controller view:  public actionresult admin()         {             // data database             return view();         } public actionresult _iptable()         {              return partialview();         } 

ajax code insert new record:

 <script> $(document).ready(function () { //function called on button click having id btnsave $("#btnsave").click(function () {     $.ajax(     {         type: "post", //http post method         url: "admininsert", // controller/view         data: { //passing data             //reading text box values using jquery             line: $("#txtline").val(),             supplier: $("#txtsupplier").val()         }     }); });  }); </script> 

you may create action method returns html markup needed render table. let's create view model using pass table data.

public class itemvm {   public string itemid {set;get;}   public string line {set;get;}   public string supplier {set;get;} } 

now in action method, data table, load list of our view model class , send view. since not sure table structure/ data access mecahnism. going hard code items. may replace real data.

public actionresult tabledata() {   var items = new list<itemvm>{       new itemvm { itemid="a1", line="l1", supplier="s1" },       new itemvm { itemid="a2", line="l2", supplier="s2" }       };   return partialview("tabledata",items); } 

now make sure partial view typed collection of our view model

@model list<itemvm> <table> @foreach(var item in model) {   <tr><td>@item.itemid</td><td>@item.line</td></td>@item.supplier</td></tr> } </table> 

now have is, call action method , update dom response coming back. can in success event handler of ajax call inserting new record. may use jquery load method update relevant element in dom.

$(document).ready(function () {    $("#btnsave").click(function () {      $.ajax(     {         type: "post", //http post method         url: "admininsert", // controller/view         data: { //passing data             //reading text box values using jquery             line: $("#txtline").val(),             supplier: $("#txtsupplier").val()         }     }).success(function() {            $("#thetable").load("/yourcontrollername/tabledata");        }); }); 

now initial view, may use our new partial view. since expecting list of itemvm, need explicitly pass instead of passing via viewbag.