將 razor 頁面顯示為模態彈出窗口

Question

我正在嘗試將 razor 頁面呈現為模式對話框的內容：

這是 razor 頁面

<div class="container">
    <div class="title modal " tabindex="-1" id="loginModal"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>@IdentityResources.ResendEmailConfirmation</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <form  method="post">
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="Email" id="inputUserName" />
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary col-md-2">@IdentityResources.Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#loginModal").modal('show');
    });

    $("#btnHideModal").click(function () {
        $("#loginModal").modal('hide');
    });
</script>

后來在另一個 razor 頁面中，我創建了一個指向該頁面的鏈接：

<a asp-page="/Identity/_ResendConfirmationEmail">@IdentityResources.ResendEmailConfirmation</a>

一旦點擊 razor 頁面就會顯示出來，但由於它是操作鏈接，它直接重定向到頁面，而不是在當前頁面上呈現它。

我怎樣才能改變這種行為？

Answer 1

您需要使用ajax調用您的action 。 因此，在響應中，您將獲得 html 的視圖。 但是您需要返回PartialView() ，因為如果您將視圖返回為View() ，那么您的視圖將帶有布局，因此您的頁面將在一個頁面中顯示兩次布局內容。

 // your controller

 public ActionResult _ResendConfirmationEmail()
 {
    return PartialView();
 }

現在使用ajax調用它，如下所示。

  $.ajax({
        url: '@Url.Action("_ResendConfirmationEmail","Identity")',
        success: function (data) {
            $('#yourdivid').html(data);
        },
        error : function (error)
        { 
          // handle error code
        }

    });