title: How to dynamically load partial view Via jquery ajax in Asp.Net MVC
body: <p>I have page where i need input data and submit form. Page should dynamically load partialView through ajax. What i have:</p>
  
  <p>SearchData Model:</p>
  
  <pre><code>public class SearchData
  {
      public SearchData()
      {
          documents = GetDocuments();
          data = new List&lt;DisplayData&gt;();
      }
      public bool isAdmin { get; set; }
      public string emc { get; set; }
      public string receiver { get; set; }
      public DateTime receiveDateFrom { get; set; }
      public DateTime receiveDateTo { get; set; }
      public int document { get; set; }
      public List&lt;SelectListItem&gt; documents { get; set; }
      public IEnumerable&lt;DisplayData&gt; data { get; set; }
  }
  </code></pre>
  
  <p>Above <code>DisplayData</code> is a model of my partial View <code>Show</code>.</p>
  
  <p>My main <code>Index</code> view is below:</p>
  
  <pre><code>   @model web_archive_monitoring.Models.SearchData
  
      @{
          ViewBag.Title = "View";
          Layout = "~/Views/Shared/_Layout.cshtml";
      }
  
      @using (Html.BeginForm())
      {
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(model =&gt; model.emc)
                          &lt;br /&gt;
                          &lt;div class="col-md-10"&gt;
                              @Html.TextBoxFor(model =&gt; model.emc, new { @class = "form-control" })@*, @placeholder = "Password"*@
                              @Html.ValidationMessageFor(model =&gt; model.emc, "", new { @class = "text-danger" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;            
                  &lt;td&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(model =&gt; model.receiveDateFrom)
                          &lt;br /&gt;
                          &lt;div class="col-md-10"&gt;
                              @if (Model.isAdmin)
                              {
                                  @Html.TextBoxFor(model =&gt; model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control" })
                                  @Html.ValidationMessageFor(model =&gt; model.receiveDateFrom, "", new { @class = "text-danger" })
                              }
                              else
                              {
                                  @Html.TextBoxFor(model =&gt; model.receiveDateFrom, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
                              }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(model =&gt; model.receiveDateTo)
                          &lt;br /&gt;
                          &lt;div class="col-md-10"&gt;
                              @if (Model.isAdmin)
                              {
                                  @Html.TextBoxFor(model =&gt; model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control" })
                                  @Html.ValidationMessageFor(model =&gt; model.receiveDateTo, "", new { @class = "text-danger" })
                              }
                              else
                              {
                                  @Html.TextBoxFor(model =&gt; model.receiveDateTo, "{0:dd/MM/yyyy}", new { @class = "form-control", disabled = "disabled" })
                              }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(model =&gt; model.receiver)
                          &lt;br /&gt;
                          &lt;div class="col-md-10"&gt;
                              @Html.DropDownListFor(model =&gt; model.receiver, Model.receivers, new { @class = "form-control" })
                              @Html.ValidationMessageFor(model =&gt; model.receiver, "", new { @class = "text-danger" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(model =&gt; model.document)
                          &lt;br /&gt;
                          &lt;div class="col-md-10"&gt;
                              @Html.DropDownListFor(m =&gt; m.document, Model.documents, new { @id = "reg", @class = "form-control" })
                              @Html.ValidationMessageFor(model =&gt; model.document, "", new { @class = "text-danger" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;            
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="submit" value="Search" class="btn btn-default"/&gt;
          &lt;/div&gt;
      }
  
      &lt;div id="search"&gt;
          @{
              Html.RenderPartial("DisplayData", Model.data);
          }
      &lt;/div&gt;
  </code></pre>
  
  <p>My partial View only display data that user queried.</p>
  
  <pre><code>@model IEnumerable&lt;web_archive_monitoring.Models.DisplayData&gt;
  
  
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.emc)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.sendDate)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.docCode)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.sendAmount)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.receiveAmount)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.productCode)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.financePeriod)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.deliveryStatus)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.receiveDate)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.emcStatus)
          &lt;/th&gt;
          @*&lt;th&gt;&lt;/th&gt;*@
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.emc)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.sendDate)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.docCode)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.sendAmount)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.receiveAmount)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.productCode)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.financePeriod)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.deliveryStatus)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.receiveDate)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.emcStatus)
          &lt;/td&gt;
          @*&lt;td&gt;
              @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
              @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
              @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
          &lt;/td&gt;*@
      &lt;/tr&gt;
  }
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my jquery call:</p>
  
  <pre><code>&lt;script&gt;
      var url = '@Url.Action("DisplayData", "Show")';
      $('form').submit(function () {        
          alert("debug1");
          var form = $(this).serialize();
          alert("data is: " + form);        
          $('#search').load(url, form);
          alert(url);
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>And in the <code>DisplayData</code> controller i do some manipulation. query DB and return the same model with not empty <code>public IEnumerable&lt;DisplayData&gt; data</code> that uses my partialView. </p>
  
  <pre><code>public ActionResult DisplayData(SearchData model)
  {
  //some manipulation
  model.data = data;
  return PartialView("DisplayData", model);
  }
  </code></pre>
  
  <p>But my partial View is not dynamically loaded. I will be glad for any help. </p>