将 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
        }

    });