title: Rendering partial view on button click in ASP.NET MVC
body: <p>The problem I will be describing is very similar to ones I already found (e.g. <a href="https://stackoverflow.com/questions/28286139/rendering-a-partial-view-on-button-click-in-a-div-c-sharp-mvc-5">this post with nearly identical name</a>) but I hope that I can make it into something that is not a duplicate.</p>
  
  <p>I have created a new ASP.NET MVC 5 application in Visual Studio. Then, I defined two model classes:</p>
  
  <pre><code>public class SearchCriterionModel
  {
    public string Keyword { get; set; }
  }
  
  public class SearchResultModel
  {
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string Surname { get; set; }
  }
  </code></pre>
  
  <p>Then I created the <code>SearchController</code> as follows:</p>
  
  <pre><code>public class SearchController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }
  
    public ActionResult DisplaySearchResults()
    {
      var model = new List&lt;SearchResultModel&gt;
      {
        new SearchResultModel { Id=1, FirstName="Peter", Surname="Pan" },
        new SearchResultModel { Id=2, FirstName="Jane", Surname="Doe" }
      };
      return PartialView("SearchResults", model);
    }
  }
  </code></pre>
  
  <p>as well as views <code>Index.cshtml</code> (strongly typed with <code>SearchCriterionModel</code> as model and template <em>Edit</em>) and <code>SearchResults.cshtml</code> as a <em>partial</em> view with model of type <code>IEnumerable&lt;SearchResultModel&gt;</code> (template <em>List</em>).</p>
  
  <p>This is the Index view:</p>
  
  <pre><code>@model WebApplication1.Models.SearchCriterionModel
  
  @{
    ViewBag.Title = "Index";
  }
  
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
  
    &lt;div class="form-horizontal"&gt;
      &lt;h4&gt;SearchCriterionModel&lt;/h4&gt;
      &lt;hr /&gt;
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
      &lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Keyword, htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-10"&gt;
          @Html.EditorFor(model =&gt; model.Keyword, new { htmlAttributes = new { @class = "form-control" } })
          @Html.ValidationMessageFor(model =&gt; model.Keyword, "", new { @class = "text-danger" })
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;div class="col-md-offset-2 col-md-10"&gt;
          &lt;input type="button" id="btnDisplaySearchResults" value="Search" onclick="location.href='@Url.Action("DisplaySearchResults", "SearchController")'" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  }
  
  &lt;div&gt;
    @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  &lt;div id="searchResults"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I added a <code>div</code> with <code>id="searchResults"</code> below the standard template and edited the button. What I want is to display the partial view <code>SearchResults.cshtml</code> in the <code>div</code> on the bottom, but only after the button is clicked. I have succeeded in showing a partial view there by using <code>@Html.Partial("SearchResults", ViewBag.MyData)</code>, but it is rendered when the parent view is loaded for the first time and I set <code>ViewBag.MyData</code> in the <code>Index()</code> method already, which is not what I want.</p>
  
  <p>Summary: On clicking the button, I will obtain some <code>List</code> of <code>SearchResultModel</code> instances (via database access) and then the partial view should be rendered, using this newly obtained data as model. <strong>How can I accomplish this?</strong> I already seem fail at the first step, that is reacting to the button click with the above code. Right now, I navigate to the URL <code>~/Search/DisplaySearchResults</code>, but of course there's nothing there and no code-behind method is called.
  In traditional ASP.NET I'd just have added a server-side <code>OnClick</code> handler, set the <code>DataSource</code> for a grid and show the grid. But in MVC I already fail with this simple task...</p>
  
  <p><strong>Update:</strong> Changing the button to <code>@Html.ActionLink</code> I can finally enter the controller method. But naturally since it returns the partial view, it's displayed as the whole page content. So the question is: How do I tell the partial view to be rendered inside a specific <code>div</code> on the client side?</p>