ASP.NET MVC - Using Ajax with Jquery to Log in

Question

I need to modify my method and login view to receive AJAX requests.

How would I do to by clicking the submit button, calling the controller, doing the validations and then submitting this information?

The answers I found didn't help much for this solution.

I'm starting to work with Jquery now, but I've never used ajax requests

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
{

    ISecurityContext contextoCA = ISecurityContext.GetContext();
    contextoCA.UserAuthenticator.Logon(model.Email, model.Password);

    User ActualUser= ISecurityContext.GetContext().CurrentLoggedUser;

    IApplicationEnvironmentAuthorizer environmentAuthorizer= contextoCA.ApplicationEnvironmentAuthorizer;

    bool hasAuthorization= environmentAuthorizer.HasAnyAuthorization();


    if (Request.Browser.Browser == "InternetExplorer")
    {
        ModelState.AddModelError("", "IE is not Supported");
    }

    if (!ModelState.IsValid)
    {
        return View(model);
    }            
    if (ActualUser== null)
    {
        ModelState.AddModelError("", "User not Found.");

    }
    if (!hasAuthorization)
    {
        ModelState.AddModelError("", "No authorization profile configured for this user.");
    }
    else
    {                
            return RedirectToAction("Index", "Home");               
    }

        return View(model);
}

View

@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) { @Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group" style="padding-top: 10px;">
    <div class="input-group mb-4">
        <span class="input-group-text"><i class="fa fa-user"></i> </span> @Html.TextBoxFor(m => m.Email, new { placeholder = "Email", @class = "form-control col" })
        <div class="col-md-12">
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="input-group mb-4">
        <div class="input-group">
            <span class="input-group-text" style="padding-left:15px"><i class="fa fa-unlock-alt"></i> </span> @Html.PasswordFor(m => m.Password, new { placeholder = "Senha", @class = "form-control" })
            <div class="col-12">
                @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe)
    </div>
</div>
@*
<div class="form-group col-sm-7 " id="padding">
    <button type="submit" value="Entrar" class="btn btn-primary btn-sm btn-block">Entrar</button>
</div>*@
<div class="d-flex justify-content-center mt-3 login_container">
    <button type="submit" value="Entrar" name="button" id="test" class="btn login_btn">Entrar</button>
</div>
}

gdex · Accepted Answer · 2020-01-19 13:46:23Z

1

Have you looked into the Ajax Form extension in MVC?

 @using (Ajax.BeginForm(actionName: "Login", 
                        controllerName: "Account", 
                        routeValues: null,
                        ajaxOptions: new AjaxOptions
                        {
                            HttpMethod = "POST",
                            OnFailure = "some JavaScript function",
                            OnSuccess = "some JavaScript function"
                        },
                        htmlAttributes:  new { @class = "form-horizontal", role = "form" }
            ))
        {
                     {
            @Html.AntiForgeryToken()

            //HTML FORM goes here.
        }

You will also need to install the jQuery unobtrusive ajax plugin and reference it in your view for the above to work.

edited Jan 19, 2020 at 13:46

answered Jan 17, 2020 at 18:12

gdex

4671 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeeshan Eqbal · Accepted Answer · 2020-01-17 17:49:16Z

First of all, the solution is very easy.

Step 1:

Create the Login Form

Step 2:

Submit the form using ajax.

Step 3:

Validate the user and send a response.

Step 4:

Use that response at ajax to redirect user to the desired page.

This is a simple example, not the best practice to be used in production.

<script>
$('form').submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "path to controler method",
        data: "form data", //form.serialize() or custom data
        success: function(response){
            console.log(response);
            window.location.href = "desired page url";
        }
    });
}

</script>

Please let me know if you need more explanation on my answer.

Collectives™ on Stack Overflow

ASP.NET MVC - Using Ajax with Jquery to Log in

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related