使用 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 等）。问题是当点击按钮时，模态对话框打开，但局部视图没有加载。

任何帮助将不胜感激。谢谢。

Answer 1

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

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