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?

try use quotes like $('@Html.Partial("../Modal/Index", new { id = 1 })') — Grundy
– Grundy, Commented Jan 22, 2015 at 14:37

Community · Accepted Answer · 2017-05-23 10:28:39Z

4

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");
});

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 22, 2015 at 14:39

Nate Barbettini

54.1k28 gold badges136 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Touy Over a year ago

Fantastic example thank you. The only issue I had was I needed to replace .replaceWith with append. Failing to do this was causing my modal popup to appear behind the backdrop. Many thanks!

Nate Barbettini Over a year ago

Cheers. It was early and my brain wasn't working fully. .html() should be the call, since this will replace any existing content with the new content you grabbed.

Collectives™ on Stack Overflow

jQuery - dynamically loading ASP.NET partial view into modal

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related