Load login page in ASP.NET core as a modal popup using bootstrap tag helpers

Question

1.00/5 (1 vote)

See more:

I have created an ASP.NET Core application from Visual Studio, and I can log in to my database using the default login form.

I have been trying to load the login form which is a partial form as a modal popup using the Bootstrap tag helper. I need to show my login page at the centre of my screen and as a modal popup.

Currently, the login is loaded from a view (LoginModal.cshtml) with the following:

@Html.Partial("_LoginPartialForm")

LoginModal.cshtml is called from the Login link at the top bar with the following:

<li><a asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>

This is not working for me. What am I doing wrong?

My modal form is created with the following:

What I have tried:

<section id="loginForm" class="modal-dialog">
    <form asp-controller="Account"
          asp-action="Login"
          asp-route-returnurl="@ViewBag.ReturnUrl"
          method="post"
          class="form-horizontal"
          role="form"
          id="loginform">


        <div asp-validation-summary="All" class="text-danger"></div>

        <div class="modal-body">
            <div class="form-group" style="margin-bottom: 5px">
                <div id="div-login-msg">
                    <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right modal-title-icon"></div>
                    <span id="text-login-msg">Type your username and password.</span>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="UserName" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <input asp-for="UserName" class="form-control" />
                    <span asp-validation-for="UserName" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="Password" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <input asp-for="Password" class="form-control" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <input type="submit" value="Log In" class="btn btn-primary" />
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>


    </form>
</section>

Posted 9-Apr-18 11:53am

JoeManJoe

Updated 10-Apr-18 2:56am

Add a Solution

Comments

Sunasara Imdadhusen 10-Apr-18 2:47am

Where is the code to open/close the popup?

JoeManJoe 10-Apr-18 6:50am

That's one of my problems. I know the Login method in the Account controller will take care of the submit button in the login form.
Not sure how to hook up the code to load and hide the dialog.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

JoeManJoe · Accepted Answer · 2018-04-10T02:58:00

Ok. Finally got it. I had to remove the modal-dialog from the login form in the partial class.

Also, I updated the code for the top bar login link to:

<li>
            <a asp-action="ModalAction"
               asp-controller="Home"
               asp-route-id="1"
               data-target="#modal-container"
               data-toggle="modal">
                Log in
            </a>            
        </li>

and created the following method in my home controller:

C#

public ActionResult ModalAction(int Id)
        {
            ViewBag.Id = Id;
            return PartialView("_LoginPartialForm");
        }