Question

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

这是剃须刀页面

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

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

如何更改此行为？

Answer 1

您需要使用action来呼叫ajax。因此，在响应中，您将获得视图的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
        }

    });

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

1 个答案: