Link a Modal to Other Modal in ASP.NET

Question

I have a modal for Login in my header menu. In that form I have "register " option and want if user click on login form can access to register form too. But when I want to link it to register form it dos not open , more over I want to open it in the index page and if he click on register , login modal became hide

this is part of login form:

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

and this is part of my register page that I link it :

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

and this is my Js code:

$(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');

        });
    });
});

My register page is partial and I get it on Get method as a partial:

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

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

Answer 1

more over I want to open it in the index page and if he click on register , login modal became hide

Below is an another option : replace the login form to register form if he click on register

1. Add the button in the header menu

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

2.Index view like:

<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 view anad form like:

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

result: