MVC 4局部視圖不顯示為模式對話框，而是顯示為自己的頁面

Question

我正在嘗試並嘗試學習如何使用更多的模式對話框和更少的“視圖跳轉”。 我試圖做的是在主頁/指數顯示_join.cshtml局部視圖作為一個模式彈出。 相反，我得到的要么是

1. 瀏覽器重定向到用戶/加入並顯示彈出窗口（如果我從用戶控制器返回完整視圖）

2. _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”視圖文件夾中

@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>

Java腳本

這是為了在頁面加載並顯示正常時顯示模式彈出窗口。

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

Answer 1

您嘗試執行此操作的方法不正確。

要做的步驟是...

1. 加載索引頁
2. 對諸如onload，onClick之類的事件發出ajax發布請求，使用JavaScript到用戶/加入頁面
3. 在ajax請求中，您將獲得彈出模型的html字符串
4. 然后使用html字符串觸發彈出顯示事件。

引導程序代碼是這樣的。（因為我想您正在使用引導程序）

$(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');
});
});
});

也許這有幫助，或者我誤解了您的問題:)