Question

我正在使用MVC 5脚手架代码生成_LoginPartial.cshtml，该代码随登录按钮一起重定向到默认登录页面。但是，我正在尝试更改此设置，以便当我单击按钮时，会弹出登录modal而不是重定向到另一个页面。我修改了代码，但似乎没有按照以下方式工作：

当模态弹出时，整个屏幕都是灰色的，根本无法点击任何内容。

以下是代码：

_LoginPartial.cshtml

@using Microsoft.AspNet.Identity
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@if (Request.IsAuthenticated)
{
   using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
   {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        @if (ViewContext.HttpContext.User.IsInRole("Admin"))
        {
            <li>
                @Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })
            </li>
        }
        <li>
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        </li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#" data-toggle="modal" data-target="#loginModal">
            Log In
        </a>
    </li>
</ul>
}

<!-- Modal -->
div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="loginModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <section id="loginForm">
                <div id="status" class="text-danger">
                    <p></p>
                </div>
                @using (Ajax.BeginForm("Login", "Account", new AjaxOptions { UpdateTargetId = "status" }))
                {
                    @Html.AntiForgeryToken()
                    <h4>Use a local account to log in.</h4>
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.Label("E-mail", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.TextBox("email", "", new { @class = "form-control", @placeholder = "Email" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Password", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.Password("Password", "", new { @class = "form-control", @placeholder = "Password" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Log in" class="btn btn-default" />
                        </div>
                    </div>
                }
            </section>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

出于某种原因，我认为这可能是因为我将modal代码放在partial view中，这使得模态弹出窗口处于禁用状态。不知道弹出窗口是什么样的？

Answer 1

尝试使用以下

https://telenorcsms.com.pk:27677/corporate_sms2/api/sendsms.jsp?session_id=xxxx&to=923xxxxxxxxx&text=xxxx&mask=xxxx

Answer 2

和你完全一样的问题。我的解决方案是在jQuery Ajax调用成功后使用以下代码：$(".modal-backdrop").remove();。这将删除您的叠加层，导致bootstrap动态添加此叠加层，因此最简单的方法是删除它。

MVC模态弹出窗口无法在局部视图中工作

2 个答案: