title: jQuery - dynamically loading ASP.NET partial view into modal
body: <p><strong>Question background:</strong></p>
  
  <p>I have an MVC project where I am attempting to create a partial view <code>modal</code> content that is then concatenated to the rest of its respective <code>modal</code> markup and then finally appending to a 'main' <code>modal</code> div.</p>
  
  <p><strong>The code</strong>:</p>
  
  <p>Main modal div:</p>
  
  <pre><code>&lt;div class="modal fade" 
       id="basicModal" 
       tabindex="-1" 
       role="dialog" 
       aria-labelledby="basicModal" 
       aria-hidden="true"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery to trigger the modal popup along with the <code>AddModal</code> method to build the modal content:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      $(".btn").click(function () {
  
          AddModal();
  
          $("#basicModal").modal("show");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><code>AddModal</code> method to build the modal:</p>
  
  <pre><code>AddModal = function() {
  
  var partialHtml = $(@Html.Partial("../Modal/Index", new { id = 1 }))
  
      $html = $('&lt;div class="modal-dialog"&gt;' +
      '&lt;div class="modal-content"&gt;' +
          '&lt;div class="modal-header"&gt;' +
              '&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;X&lt;/button&gt;' +
              '&lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;' +
          '&lt;/div&gt;' +
          '&lt;div class="modal-body"&gt;'+partialHtml+'&lt;/div&gt;' +
          '&lt;div class="modal-footer"&gt;' +
              '&lt;button type="button" class="btn btn-default" 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;');
  
      $("#basicModal").append($html);
  };
  </code></pre>
  
  <p></p>
  
  <p>Partial View:</p>
  
  <pre><code>&lt;h4&gt;Test Partial view&lt;/h4&gt;
  </code></pre>
  
  <p><strong>The issue:</strong></p>
  
  <p>I am running into an error of <code>Uncaught SyntaxError: Unexpected token &lt;</code> which is being caused by the HTML Markup of the partial view as shown:</p>
  
  <pre><code>var partialHtml = $(&lt;h4&gt;Test Partial view&lt;/h4&gt;)
  </code></pre>
  
  <p>How can I successfully escape this forward slash so that the HTML from my partial view is correctly added to the rest of the dynamically added markup?</p>