将剃刀页面显示为模式弹出窗口答案

【问题标题】：Show razor page as modal popup将剃刀页面显示为模式弹出窗口
【发布时间】：2020-03-11 13:56:57
【问题描述】：

我正在尝试将剃须刀页面呈现为模式对话框的内容：

这是剃须刀页面

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

稍后在另一个剃须刀页面中，我创建了一个指向该页面的链接：

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

点击后会显示剃刀页面，但由于它是操作链接，它会直接重定向到该页面，而不是在当前页面上呈现它。

如何改变这种行为？

【问题讨论】：

您需要使用ajax 获取剃刀视图的 html 并将其附加到页面的 html 中。
@Vishalmodi 我不太确定该怎么做，你能写一个答案并详细说明吗？

标签： javascript c# asp.net-mvc asp.net-core razor

【解决方案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
        }

    });

【讨论】：