Refresh table using AJAX in ASP.NET MVC

Question

I want to update table in MVC using ajax. I already inserted data in database using ajax. I just want to update table after I insert a new row.

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

Here is my 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()
        {
            // get data from database
            return View();
        }
public ActionResult _IPTable()
        {

            return PartialView();
        }

Ajax code for insert new record:

 <script>
$(document).ready(function () {
//function will be 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>

Solution

You may create an action method which returns the HTML markup needed to render your table. Let's create a view model using which we will pass the table data.

public class ItemVm
{
  public string ItemId {set;get;}
  public string Line {set;get;}
  public string Supplier {set;get;}
}

Now in your action method, get your data from the table, load to a list of our view model class and send to the view. Since i am not sure about your table structure/ data access mecahnism. I am going to hard code the items. you may replace it with 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 that your partial view is strongly typed to a 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 all you have to do is, call this action method and update the DOM with the response coming back. You can do that in the success event handler of your ajax call where you are inserting a new record. You may use the jQuery load method to update the relevant element in the 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 for the initial view, you may use our new partial view. But since it is expecting a list of ItemVm, you need to explicitly pass it instead of passing it via ViewBag.

Comments

[R K Sharma]

awesome! Voila Daniel please ignore the use of ViewBag while using $.ajax stuff. you can use @model instead.

[Voila Daniel]

Thank You! PS It worked with TableData as a partial view.