jQuery ajax response bind into MVC Model table
<p>I'm trying to push an ajax response array into MVC table. This is how my script looks like:</p>

<pre><code>&lt;script type="text/javascript"&gt;

    $(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);
                }
            });
        });
    });



&lt;/script&gt;
</code></pre>

<p>This is how my partial view looks like:</p>

<pre><code>@model IEnumerable&lt;SampleApp.DepotDetail&gt;

&lt;table class="table table-condensed" id="Grid"&gt;
    &lt;tr&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.DepotID)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.ColumnName)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.Country)
        &lt;/th&gt;
        &lt;th&gt;
            @Html.DisplayNameFor(model =&gt; model.CountryCode)
        &lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;

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

&lt;/table&gt;
</code></pre>

<p>This is how the WebApi method looks like:</p>

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

<p>This is how the View looks like:</p>

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

            @Html.DropDownList("selectValue", new List&lt;SelectListItem&gt;
            {
                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" }*@





            &lt;input type="submit" value="submit" /&gt;
        &lt;/form&gt;
        &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;table id="records_table" style="width:100%;"&gt;&lt;/table&gt;

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


        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><strong>Question:</strong> 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 </p>

<blockquote>
  <p>$("#Grid").html($(data).children());</p>
</blockquote>

<p>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!</p>