javascript - jQuery - 将 ASP.NET 部分 View 动态加载到模式中

Question

问题背景:

我有一个 MVC 项目，我正在尝试创建部分 View modal然后将其内容连接到其各自 modal 的其余部分标记，然后最后附加到“主”modal分区。

代码:

主模态 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);
};

部分 View :

<h4>Test Partial view</h4>

问题:

我遇到错误 Uncaught SyntaxError: Unexpected token <这是由部分 View 的 HTML 标记引起的，如下所示:

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

如何成功转义此正斜杠，以便将部分 View 中的 HTML 正确添加到动态添加的标记的其余部分？

Answer 1

不要使用 Html.Partial() 并将其存储在 JavaScript 字符串中，而是考虑使用此技术:Render Partial View Using jQuery in ASP.NET MVC

基本上，在您的 AddModal() 方法中，触发一个 GET 请求，该请求会命中以 HTML 形式返回部分 View 的操作。然后，只需将 #basicModal 的内容替换为返回的 HTML:

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

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

我之前使用过这种技术来加载模态框，效果很好。但是，这样做的一个问题是 $.get() 是一个 异步 调用，因此 .modal("show")可能会在获取数据之前触发。我们可以通过让 AddModal 返回由 $.get() 生成的 Promise 来解决这个问题:

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

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

然后您将调用线路更改为:

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