jQuery - 将 ASP.NET 部分视图动态加载到模式中
jQuery - dynamically loading ASP.NET partial view into modal
问题背景:
我有一个 MVC 项目,我试图在其中创建部分视图 modal
内容,然后将其连接到其各自 modal
标记的其余部分,最后附加到 'main' modal
div.
代码:
主模态 div:
<div class="modal fade"
id="basicModal"
tabindex="-1"
role="dialog"
aria-labelledby="basicModal"
aria-hidden="true">
</div>
JQuery 触发模态弹出窗口以及 AddModal
构建模态内容的方法:
<script>
$(document).ready(function () {
$(".btn").click(function () {
AddModal();
$("#basicModal").modal("show");
});
});
</script>
AddModal
构建模态的方法:
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);
};
局部视图:
<h4>Test Partial view</h4>
问题:
我 运行 出现 Uncaught SyntaxError: Unexpected token <
错误,这是由部分视图的 HTML 标记引起的,如图所示:
var partialHtml = $(<h4>Test Partial view</h4>)
我怎样才能成功转义这个正斜杠,以便我的部分视图中的 HTML 正确添加到动态添加的标记的其余部分?
与其使用 Html.Partial()
并将其存储在 JavaScript 字符串中,不如考虑使用以下技术:Render Partial View Using jQuery in ASP.NET MVC
基本上,在您的 AddModal()
方法中,触发一个 GET 请求,该请求命中 return 部分视图作为 HTML 的操作。然后,只需将 #basicModal
的内容替换为 returned HTML:
AddModal = function() {
var partialHtml;
var url = '../Modal/Index?id=1';
$.get(url, function(data) {
$("#basicModal").html(data);
});
};
我以前用过这种技术来加载模态,效果很好。然而,这样做的一个问题是 $.get()
是一个 async 调用,因此 .modal("show")
可能会在数据被获取之前触发。我们可以通过 AddModal
return $.get()
:
生成的承诺来解决这个问题
AddModal = function() {
var partialHtml;
var url = '../Modal/Index?id=1';
return $.get(url, function(data) {
$("#basicModal").html(data);
});
};
那么您可以将呼叫线路更改为:
AddModal().done(function() {
$("#basicModal").modal("show");
});
问题背景:
我有一个 MVC 项目,我试图在其中创建部分视图 modal
内容,然后将其连接到其各自 modal
标记的其余部分,最后附加到 'main' modal
div.
代码:
主模态 div:
<div class="modal fade"
id="basicModal"
tabindex="-1"
role="dialog"
aria-labelledby="basicModal"
aria-hidden="true">
</div>
JQuery 触发模态弹出窗口以及 AddModal
构建模态内容的方法:
<script>
$(document).ready(function () {
$(".btn").click(function () {
AddModal();
$("#basicModal").modal("show");
});
});
</script>
AddModal
构建模态的方法:
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);
};
局部视图:
<h4>Test Partial view</h4>
问题:
我 运行 出现 Uncaught SyntaxError: Unexpected token <
错误,这是由部分视图的 HTML 标记引起的,如图所示:
var partialHtml = $(<h4>Test Partial view</h4>)
我怎样才能成功转义这个正斜杠,以便我的部分视图中的 HTML 正确添加到动态添加的标记的其余部分?
与其使用 Html.Partial()
并将其存储在 JavaScript 字符串中,不如考虑使用以下技术:Render Partial View Using jQuery in ASP.NET MVC
基本上,在您的 AddModal()
方法中,触发一个 GET 请求,该请求命中 return 部分视图作为 HTML 的操作。然后,只需将 #basicModal
的内容替换为 returned HTML:
AddModal = function() {
var partialHtml;
var url = '../Modal/Index?id=1';
$.get(url, function(data) {
$("#basicModal").html(data);
});
};
我以前用过这种技术来加载模态,效果很好。然而,这样做的一个问题是 $.get()
是一个 async 调用,因此 .modal("show")
可能会在数据被获取之前触发。我们可以通过 AddModal
return $.get()
:
AddModal = function() {
var partialHtml;
var url = '../Modal/Index?id=1';
return $.get(url, function(data) {
$("#basicModal").html(data);
});
};
那么您可以将呼叫线路更改为:
AddModal().done(function() {
$("#basicModal").modal("show");
});