在 ASP.NET 中将模态链接到其他模态

Question

我的标题菜单中有一个登录模式。在该表单中，我有“注册”选项，并且希望如果用户单击登录表单也可以访问注册表单。 但是当我想将它链接到注册表时它不会打开，而且我想在索引页面中打开它，如果他单击注册，登录模式就会隐藏

这是登录表单的一部分：

         <div class="text-center mt-4 font-weight-light">
             Don't have an account?
   
             
             <button class="text-primary mt-4 " data-toggle="ajax-register" data-target="#register"
                     data-url="@Url.Action("Register", "Account")"   > Create</button>
         </div>
         

这是我的注册页面的一部分，我链接了它：

 <div class=" " id="register" tabindex="-1" aria-labelledby="RegisterModalLabel" aria-hidden="true" ">


    <div class=" modal-dialog modal-dialog-centered   ">
        <div class="modal-content  ">
            <div class="modal-header bg-light">.....

这是我的 Js 代码：

$(function () {

    var RegisterHeader = $('#registerHeader');
    $('button[data-toggle="ajax-register"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            RegisterHeader.html(data);
            RegisterHeader.find('.modal').modal('show');

        });
    });
});

我的注册页面是部分的，我通过 Get 方法将其作为部分获取：

       [HttpGet("Register")]
   public IActionResult Register()
   {

       RegisterPersonViewModel registerViewModel = new RegisterPersonViewModel();
       return PartialView("RegisterModalPartial", registerViewModel);
      
   }

Answer 1

更重要的是，我想在索引页中打开它，如果他点击 注册，登录模式变成隐藏

下面是另一个选项：如果他点击注册，则将登录表单替换为注册表单

1. 在标题菜单中添加按钮

    <button id="btnShowModal" type="button"> Login </button>

2.索引视图如下：

<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnHideModal" type="button" class="btn btn-secondary" data-dismiss="modal">  ×</button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowModal").click(function () {
            $.get("@Url.Action("Login","Account")",
                function (data) { $('.modal-body').html(data); })
            $("#Modal").modal('show');
        });
        $("#btnHideModal").click(function () {
            $("#Modal").modal('hide');            
        });
    });

</script>

3.LoginModalPartial 视图和表单如下：

@model Login
<h1 class="bg-info text-white">Login</h1>
<div class="text-danger" asp-validation-summary="All"></div>
<form asp-action="Login" method="post">
    <input type="hidden" asp-for="ReturnUrl" />
    <div class="form-group">
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Password"></label>
        <input asp-for="Password" class="form-control" />
    </div>
    <div class="form-group">
        <a asp-action="ForgotPassword">Forgot Password</a>
    </div>
    <button class="btn btn-primary" type="submit">Log In</button>
    

    <div class="text-center mt-4 font-weight-light">
        Don't have an account?
        <button id="btnShowModal2" type="button">  Create </button>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnShowModal2").click(function () {
            $.get("@Url.Action("Register", "Account")",
                function (data) { $('.modal-body').html(data); })          
        });  
    });    
</script>

结果：