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

24 浏览
0 Comments

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

问题背景：\n我有一个MVC项目，在其中我试图创建一个部分视图modal内容，然后将其与其相应的modal标记合并，最后附加到“main”modal div。\n代码：\n主modal div：\n

\n用于触发modal弹出窗口的JQuery以及AddModal方法来构建modal内容：\n

\n构建modal的AddModal方法：\n

AddModal = function() {
var partialHtml = $(@Html.Partial("../Modal/Index", new { id = 1 }))
    $html = $('' +
    '' +
        '' +
            '' +
            '' +
        '' +
        ''+partialHtml+'' +
        '' +
            '' +
            '' +
        '' +
    '' +
    '');
    $("#basicModal").append($html);
};

\n部分视图：\n

Test Partial view

\n问题：\n我遇到了一个错误，即“Uncaught SyntaxError: Unexpected token <”，这是由于部分视图的HTML标记引起的，如下所示：\n[apcode language="jscript"] 

var partialHtml = $(
Test Partial view
)

[/apcode]\n我应该如何成功地转义这个斜杠，以便将我的部分视图的HTML正确地添加到其他动态添加的标记中？

0

1 答案

0 Comments

问题的原因是使用Html.Partial()方法将部分视图存储在JavaScript字符串中，但这种方法存在一些问题。解决方法是使用jQuery动态加载ASP.NET部分视图到模态框中。

解决方法如下：

1. 在AddModal()方法中，发送一个GET请求，访问一个返回部分视图的动作，并将其作为HTML返回。

2. 将返回的HTML替换#basicModal的内容。

3. 由于$.get()是一个异步调用，所以在数据获取之前，.modal("show")可能会触发。可以通过让AddModal()方法返回$.get()生成的promise来解决这个问题。

4. 调用AddModal()方法后，使用.done()方法来在数据获取完成后显示模态框。

以下是完整的代码示例：

AddModal = function() {
    var partialHtml;
    var url = '../Modal/Index?id=1';
    return $.get(url, function(data) {
        $("#basicModal").html(data);
    });
};
AddModal().done(function() {
    $("#basicModal").modal("show");
});

这个例子非常棒，非常感谢。唯一的问题是我需要用append替换.replaceWith，否则我的模态框会出现在背景后面。非常感谢！

谢谢。当时早上，我的大脑还没完全清醒。应该使用.html()方法，因为这将替换掉任何现有内容，并用抓取到的新内容替换它。

0