MVC 4 partialview 不显示为模态对话框，而是显示为自己的页面

Question

我正在试验并尝试学习如何使用更多和更少的模态对话框 "view jumping"。我尝试做的是在 Home/Index 中将 _join.cshtml 部分视图显示为模式弹出窗口。相反，我得到的是

浏览器重定向到 User/Join 并显示弹出窗口（如果我 return 来自用户控制器的完整视图）
在 _Layout.cshtml 视图中没有 .js 和 .css 支持的局部视图显示为它自己的页面。

我已经提供了下面的代码，希望能解开我目前所拥有的一切。

控制器代码

public class UserController : Controller
{
    public ActionResult Join()
    {
        return PartialView("_join");
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Join(Userprofile userprofile)
    {
        return PartialView("_join", userprofile);
    }
}

名为_join.cshtml

的局部视图

这位于 "join" views 文件夹中

@model DPDP.Models.Userprofile
<div id="ModalUserJoin" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="ModalUserJoinLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="ModalUserJoinLabel">Create An Account</h3>
            </div>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    @using (Ajax.BeginForm("Join", "User", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        /* Form elements have been removed to save space */

                        }
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>

Javascript

这是为了在页面加载并正常工作时显示模态弹出窗口。

if ($('#ModalUserJoin').length > 0) {
    $('#ModalUserJoin').modal('show');
}

Answer 1

您尝试执行此操作的方式不正确。

步骤是...

加载您的索引页
使用 javascript 对页面 User/Join
在 ajax 请求中获取弹出模型的 html 字符串
然后使用 html 字符串触发弹出显示事件。

Bootstrap 这样做的代码是这样的。（我想你正在使用 bootstrap）

$(document).ready(function(){
var userModel = {name: "Donald Duck",city: "Duckburg"};
$("#userButton").click(function(){
    $.post("User/Join",userModel ,
function(data, status){
    $('body').append(data);
    $('#ModalUserJoin').modal('show');
});
});
});

也许这对您有帮助，或者我误解了您的问题:)

MVC 4 partialview 不显示为模态对话框，而是显示为自己的页面

MVC 4 partialview not displaying as modal dialog, instead displays as own page

c#

modal-dialog

asp.net-mvc-partialview

asp.net-mvc-4