title: jQuery ajax response bind into MVC Model table
body: <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>