Question

我正在尝试并尝试学习如何使用更多模态对话框而不是更多＆＃34;查看跳跃＆＃34;。我尝试做的是在Home / Index中将_join.cshtml局部视图显示为模态弹出窗口。相反，我得到的是

浏览器重定向到用户/加入并显示弹出窗口（如果我从用户控制器返回完整视图）
部分视图显示为自己的页面，而_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的部分视图

这位于＆＃34; join＆＃34;观看文件夹

@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

您尝试这样做的方式不正确。

这样做的步骤是......

加载您的索引页
对onload等事件发出ajax发布请求，onClick使用javascript到页面User / Join
在ajax请求中，您将获得弹出模型的html字符串
然后使用html字符串触发弹出式show事件。

这样做的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不显示为模态对话框，而是显示为自己的页面

1 个答案: