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?
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");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.