Question posted in
You can find the official documentation here.

Jquery ajax – ASP.NET MVC – Using Ajax with Jquery to Log in

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>
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search