使用 JQuery 使用 MVC4 局部视图填充模态弹出窗口

Question

这让我抓狂。我在让它工作时遇到问题。对话框打开，但未加载局部视图。我已经在 SO 上尝试了这里的许多示例，但无济于事。这是我目前所拥有的。

我的 _layout.cshtml 文件具有以下内容：

<div id="modal-content" name="modal-content"></div>

在我的 site.js 中，我有以下内容：

$('#modal-content').dialog({
    autoOpen: false,
    position: { my: 'center', at: 'top+350', of: window },
    width: 'auto',
    height: 'auto',
    fluid: true,
    modal: true,
    resizable: false,
    title: 'Create Guestbook Post',
    open: function(event, ui) {
        $(this).load('@Url.Action("_Create")');
    },
});

$('#buttonCreateGuestbookPost').click(function() {
    $('#modal-content').dialog('open');
});

在部分视图 (_Create.cshtml) 中，我有以下内容：

@model MPP.Database.Guestbook
@using (Html.BeginForm())
{
    <div class="row">
        <h2>Create Account</h2>
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <p>
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label float-left" })
            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger float-right" })
            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        </p>
        <p>
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label float-left" })
            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control float-right" } })
            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
        </p>
        <p>
            @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { @class = "control-label float-left" })
            @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control float-right" } })
            @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
        </p>
        <p>
            @Html.LabelFor(model => model.Body, htmlAttributes: new { @class = "control-label float-left" })
            @Html.EditorFor(model => model.Body, new { htmlAttributes = new { @class = "form-control float-right" } })
            @Html.ValidationMessageFor(model => model.Body, "", new { @class = "text-danger" })
        </p>
        <p>
            <input type="submit" id="buttonCreateGuestbook" name="buttonCreateGuestbook" class="btn btn-primary" value="Create" />
        </p>
        }
    </div>
}

在我希望弹出窗口显示的视图中，我有以下按钮：

<a href="javascript:void(0);" class="btn btn-xs btn-success" id="buttonCreateGuestbookPost" style="margin-bottom:3px;">Post to Guestbook</a>

加载留言簿页面时，所有组件都会正确加载（打开对话框的按钮、模态内容 DIV、javascript 到 open/load 对话框等).问题是单击按钮时，模态对话框打开但未加载部分视图。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

它说代码在 site.js 中，但您在其中使用 Razor 代码用于 url。

JS 文件是静态的，不会被 Razor 编译。硬编码 url 或将其作为变量传递到您的视图中，以便您的脚本可以访问该变量。

使用 JQuery 使用 MVC4 局部视图填充模态弹出窗口

Use JQuery to populate a modal popup with a MVC4 partialview

jquery

jquery-ui

modal-dialog

asp.net-mvc-4