title: Partial View inside Bootstrap Modal popup
body: <p>I want to display partial view inside modal popup. I have one main page where I am calling partial view based on Id on button Click. </p>
  
  <p>My Main View:</p>
  
  <pre><code>&lt;table id="tblSearch" class="table table-hover"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(m =&gt;m.Name)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(m =&gt; m.Description)
          &lt;/th&gt;
      &lt;/tr&gt;
      @foreach (var item in Model)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Name)&lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Description)
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input class="search btn-default" type="button" value="Search"
                      data-assigned-id="@item.Id" data-toggle="modal" data-target="#exampleModalLong" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  </code></pre>
  
  <p>My JavaScript to load Partial View:</p>
  
  <pre><code>$('.search').click(function () {
      var id = $(this).data('assigned-id');
      var route = '@Url.Action("DisplaySearchResults", "Home")?id=' + id;
      $('#partial').load(route);
  </code></pre>
  
  <p>My Modal is:</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;    
                  &lt;div id="partial"&gt;&lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone please guide me how to write JavaScript code to do this? Any help is highly appreciated.</p>