jQuery ajax response bind into MVC Model table

Question

I'm trying to push an ajax response array into MVC table. This is how my script looks like:

<script type="text/javascript">

    $(document).ready(function () {
        $('#form1').submit(function (event) {
            event.preventDefault();
            event.returnValue = false;
            var selectValue = $('#selectValue').val();

            $.ajax({
                url: "/api/Admin/GetDepotDetails/",
                type: "POST",
                data: { "selectValue": selectValue },
                dataType: "json",
                success: function (data) {
                    $("#Grid").html($(data).children());
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    debugger;
                    alert(textStatus, errorThrown, jqXHR);
                }
            });
        });
    });



</script>

This is how my partial view looks like:

@model IEnumerable<SampleApp.DepotDetail>

<table class="table table-condensed" id="Grid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DepotID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ColumnName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Country)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CountryCode)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="warning">
            <td>
                @Html.DisplayFor(modelItem => item.DepotID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ColumnName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CountryCode)
            </td>
        </tr>
    }

</table>

This is how the WebApi method looks like:

[HttpPost]
public IEnumerable<DepotDetail> GetDepotDetails(Selected selectValue)
{
    var model = depotsDetails.Where(x => x.ColumnName == selectValue.SelectValue) as IEnumerable<DepotDetail>;
    var viewModel = new SearchViewModel{ DepotDetailsList = model, ActionLists = new ActionList()} ;
    return model;
}

This is how the View looks like:

@model IEnumerable<SiemensSampleApp.DepotDetail>
<div class="row">
    <div class="col-md-4">
        <form id="form1">
            @*@Html.DropDownListFor(model => model.DepotListSelectValue, Model.DepotLists, new { @class = "form-control" })*@

            @Html.DropDownList("selectValue", new List<SelectListItem>
            {
                new SelectListItem() {Text = "Depot ID", Value="Depot ID"},
                new SelectListItem() {Text = "Depot Name", Value="Depot Name"},
                new SelectListItem() {Text = "Address", Value="Address"}
            }, new { @class = "selectValue", @id = "selectValue" })
            @*//, new { @class = "chzn-select", @id = "chzn-select" }*@





            <input type="submit" value="submit" />
        </form>
        <br /><br /><br />
        <table id="records_table" style="width:100%;"></table>

        <div id="tableHere">
            @{
                if (Model == null)
                {
                    Html.RenderPartial("_SearchResult", new List<DepotDetail>() { });
                }
            }


        </div>

    </div>

</div>

Question: Through WebApi i'm trying to get a List of details and bind it to a MVC table. What is the best way to do this? I have used

$("#Grid").html($(data).children());

To fill the Grid. But the table doesn't have any data. can someone please give me an idea how to fill the grid using above Partial view. Thank you in advance!

Answer 1

Your web api endpoint return data ( in json format), not the HTML markup from your partial view. You have 2 options.

1) Create an mvc action method which gets the data and pass it to your partial view and return the partial view response and use that to update your UI

[HttpPost]
public IEnumerable<DepotDetail> GetDepotDetails(Selected selectValue)
{
    var model = depotsDetails.Where(x => x.ColumnName == selectValue.SelectValue) 
                                                             as IEnumerable<DepotDetail>;

    return PartialView(model);
}

Now make sure you have a partial view called GetDepotDetails.cshtml in ~/Views/Shared or ~/View/YourControllerName/ . This view should be strongly typed to a collecction of DepotDetail.

@model IEnumerable<DepotDetail>

<p>Here loop through each item in Model and render the table</p>
<p> Same as your partial view in the question </p>

And in your success event,

success: function (data) {
               $("#Grid").html(data);
         },

2) Use your current web api endpoint and read the data in your ajax method's success event and dynamically build the html markup for the table rows and set that as the content of your Grid table.

success: function (data) {
             var tblHtml="";
             $.each(data.DepotDetailsList,function(a,b){

                       tblHtml+= "<tr><td>"+b.DepotID+"</td>";
                       tblHtml+= "<td>"+b.ColumnName+"</td>";
                       tblHtml+= "<td>"+b.Country+"</td>";
                       tblHtml+= "<td>"+b.CountryCode+"</td>M/tr>";

             });
             $("#Grid > tbody").html(tblHtml);
         },

Answer 2

Since you already have the partial view which build the table, you can do this.

In your ajax success method call a controller action by passing this data received from the API. The controller will just return the existing partial view by passing the same model.

        $.ajax({
                url: "/api/Admin/GetDepotDetails/",
                type: "POST",
                data: { "selectValue": selectValue },
                dataType: "json",
                success: function (data) {
                    //$("#Grid").html($(data).children());
                     $.get("controller/Action",data.DepotDetailsList ,function(response){
                       $('#tableHolder').html(response) //have a div in your main view which will hold the table. Now the partial view has to be replaced into this div.
                     });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    debugger;
                    alert(textStatus, errorThrown, jqXHR);
                }
            });

So as I said, Create a new MVC action method and return a the same partial view by passing the model sent from ajax.

OR you can user Jquery and build the table again - But this is a pain if the table HTML is large (with css, attributes, dynamic arributes etc). - I think the other answer already has the details on this