Question

我想从Controller显示一个bootstrap模式对话框。我该怎么办？

从我的_layout我将调用模态登录is_loginPartial：

<div class="top-bar-links">
    <a href="#" class="launchLoginModal">Login</a>
</div>

@Html.Partial("~/Views/User/_LoginPartial.cshtml");

在我的_loginPartial视图中，我有一个部分视图嵌套了谷歌帐户登录的按钮。

@Html.Partial("~/Views/User/_ExternalLoginsListPartial.cshtml", new HoiCode.Web.Models.Users.ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })

my _ExternalLoginsListPartial view：

@using (Html.BeginForm("ExternalLogin", "User", new { ReturnUrl = Model.ReturnUrl }))
    {
        @Html.AntiForgeryToken()
        <div id="socialLoginList">
                @foreach (AuthenticationDescription p in loginProviders)
                {
                    <button type="submit" class="btn btn-sm btn-google-plus" id="@p.AuthenticationType" name="provider" value="@p.AuthenticationType"><i class="fa fa-google"></i> | login by @p.AuthenticationType</button>
                }
        </div>
    }

从上面的观点来看，如果用户通过Google帐户登录，我会致电确认电子邮件模式。确认电子邮件模式将从ActionResult调用，即ExternalLoginCallback

public async Task<ActionResult> ExternalLoginCallback(string returnUrl)
    {
      return PartialView("_ExternalLoginConfirmation", new ExternalLoginConfirmationViewModel { Email = loginInfo.Email });
    }

Answer 1

三个简单的步骤。

1.在html中添加一个按钮，其中包含attr id和data-target

<a class="btn btn-default" href="@Url.Action("externalLoginCallback", "account")" id="register" data-target="#exampleModal">modal</a>

2.添加bootstrap模态骨架

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

添加javascript以从服务器加载内容并打开模态

$(document).on('click','#register', function (e) {
    e.preventDefault();
    var btn = $(this);
    var target = $(btn.data('target'));
    target.find('.modal-content').load(
        $(this).attr('href'), function() {
            target.modal('show');
        }
    );
});

如何从Controller调用bootstrap模式？

1 个答案: