jQuery - dynamically loading ASP.NET partial view into modal

Question

Question background:

I have an MVC project where I am attempting to create a partial view modal content that is then concatenated to the rest of its respective modal markup and then finally appending to a 'main' modal div.

The code:

Main modal div:

<div class="modal fade" 
     id="basicModal" 
     tabindex="-1" 
     role="dialog" 
     aria-labelledby="basicModal" 
     aria-hidden="true">
</div>

JQuery to trigger the modal popup along with the AddModal method to build the modal content:

<script>
$(document).ready(function () {
    $(".btn").click(function () {

        AddModal();

        $("#basicModal").modal("show");
    });
});
</script>

AddModal method to build the modal:

AddModal = function() {

var partialHtml = $(@Html.Partial("../Modal/Index", new { id = 1 }))

    $html = $('<div class="modal-dialog">' +
    '<div class="modal-content">' +
        '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>' +
            '<h4 class="modal-title" id="myModalLabel">Modal title</h4>' +
        '</div>' +
        '<div class="modal-body">'+partialHtml+'</div>' +
        '<div class="modal-footer">' +
            '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
            '<button type="button" class="btn btn-primary">Save changes</button>' +
        '</div>' +
    '</div>' +
    '</div>');

    $("#basicModal").append($html);
};

Partial View:

<h4>Test Partial view</h4>

The issue:

I am running into an error of Uncaught SyntaxError: Unexpected token < which is being caused by the HTML Markup of the partial view as shown:

var partialHtml = $(<h4>Test Partial view</h4>)

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?

Answer 1

Instead of using Html.Partial() and storing that in a JavaScript string, consider using this technique: Render Partial View Using jQuery in ASP.NET MVC

Basically, in your AddModal() method, fire off a GET request that hits an action that returns the partial view as HTML. Then, just replace the contents of #basicModal with the returned HTML:

AddModal = function() {
    var partialHtml;
    var url = '../Modal/Index?id=1';

    $.get(url, function(data) {
        $("#basicModal").html(data);
    });
};

I've used this technique to load modals before and it works well. However, one problem with doing it this way is that $.get() is an async call, so .modal("show") is probably going to fire before the data has been fetched. We can solve this by having AddModal return the promise generated by $.get():

AddModal = function() {
    var partialHtml;
    var url = '../Modal/Index?id=1';

    return $.get(url, function(data) {
        $("#basicModal").html(data);
    });
};

Then you would change your calling line to:

AddModal().done(function() {
    $("#basicModal").modal("show");
});