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>

post your $.ajax function code please, the jquery/javascrip code — R K Sharma
– R K Sharma, Commented Jul 28, 2016 at 12:29

Shyju · Accepted Answer · 2016-07-28 12:33:03Z

7

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.

answered Jul 28, 2016 at 12:33

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R K Sharma Over a year ago

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

Voila Daniel Over a year ago

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

Collectives™ on Stack Overflow

Refresh table using AJAX in ASP.NET MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related