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

Question

问题背景：

我有一个MVC项目，我试图在其中创建部分视图modal内容，然后将其连接到其各自的modal标记的其余部分，然后最后附加到“主” 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 <错误Uncaught SyntaxError: Unexpected token < ，这是由部分视图的HTML标记引起的，如下所示：

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

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

Answer 1

与其使用Html.Partial()并将其存储在JavaScript字符串中， Html.Partial()考虑使用这种技术： 在ASP.NET MVC中使用jQuery渲染部分视图

基本上，在您的AddModal()方法中，触发一个GET请求，该请求命中一个将部分视图作为HTML返回的操作。 然后，只需将#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");
});