title: Ajax Login from MVC
body: <p>I have an MVC project that uses the inbuilt forms authentication (which talks to the MDF database stored in App_data).  I want to change the login form to be the Ajax login form so that I can take advantage of the &quot;onSuccess&quot; and &quot;onFailure&quot; options.</p>
  <p>Does anyone have a working example of how I would achive this as I've tried previuosly but I can't get the form to authenticate it just does nothing.  I think I may have missed a step so any help is appreciated.</p>
  <p>Example code would also be benificial.  Please find my current code below.</p>
  <h1>The login view</h1>
  <pre><code>@model MyProject.Models.LoginViewModel
  
  @using (Ajax.BeginForm(&quot;Login&quot;, &quot;Account&quot;, null, new AjaxOptions
      {
          OnSuccess = &quot;OnSuccess&quot;,
          OnBegin = &quot;OnBegin&quot;,
          OnFailure = &quot;OnFailure&quot;,
          OnComplete = &quot;OnComplete&quot;,
          HttpMethod = &quot;POST&quot;,
          UpdateTargetId = &quot;target&quot;   
      }))
      {
          @Html.AntiForgeryToken()
          @Html.ValidationSummary(true)
          &lt;fieldset&gt;
            &lt;legend&gt;Login Form&lt;/legend&gt;
              &lt;ol&gt;
                &lt;li&gt;
                  @Html.LabelFor(m =&gt; m.UserName)
                  @Html.TextBoxFor(m =&gt; m.UserName)
                  @Html.ValidationMessageFor(m =&gt; m.UserName)
                &lt;/li&gt;
                &lt;li&gt;
                  @Html.LabelFor(m =&gt; m.Password)
                  @Html.PasswordFor(m =&gt; m.Password)
                  @Html.ValidationMessageFor(m =&gt; m.Password)
                &lt;/li&gt;
                &lt;li&gt;
                  @Html.CheckBoxFor(m =&gt; m.RememberMe)
                  @Html.LabelFor(m =&gt; m.RememberMe, new { @class = &quot;checkbox&quot; })
                &lt;/li&gt;
              &lt;/ol&gt;
              &lt;input type=&quot;submit&quot; value=&quot;Login&quot; /&gt;
            &lt;/fieldset&gt;
  }
  </code></pre>
  <p>Here is the login controller</p>
  <pre><code> [HttpPost]
      [AllowAnonymous]
      [ValidateAntiForgeryToken]
      public JsonResult ValidateUser(string userid, string password,
                                     bool rememberme)
      {
          LoginStatus status = new LoginStatus();
          if (Membership.ValidateUser(userid, password))
          {
              FormsAuthentication.SetAuthCookie(userid, rememberme);
              status.Success = true;
              status.TargetURL = FormsAuthentication.
                                 GetRedirectUrl(userid, rememberme);
              if (string.IsNullOrEmpty(status.TargetURL))
              {
                  status.TargetURL = FormsAuthentication.DefaultUrl;
              }
              status.Message = &quot;Login attempt successful!&quot;;
          }
          else
          {
              status.Success = false;
              status.Message = &quot;Invalid UserID or Password!&quot;;
              status.TargetURL = FormsAuthentication.LoginUrl;
          }
          return Json(status);
      }
  </code></pre>
  <p>Here is the login view model</p>
  <pre><code>    public class LoginStatus
  {
      public bool Success { get; set; }
      public string Message { get; set; }
      public string TargetURL { get; set; }
  }
  </code></pre>
  <p>Script on the page for handling the form</p>
  <pre><code>$(document).ready(function () {
      $(&quot;#login&quot;).click(function () {
  
          $(&quot;#message&quot;).html(&quot;Logging in...&quot;);
  
          var data = {
              &quot;UserName&quot;: $(&quot;#userid&quot;).val(),
              &quot;Password&quot;: $(&quot;#password&quot;).val(), 
              &quot;RememberMe&quot;: $(&quot;#rememberme&quot;).prop(&quot;checked&quot;)
              };
          $.ajax({
              url: &quot;/Home/Index&quot;,
              type: &quot;POST&quot;,
              data: JSON.stringify(data),
              dataType: &quot;json&quot;,
              contentType: &quot;application/json&quot;,
              success: function (status) {
                  $(&quot;#message&quot;).html(status.Message);
                  if (status.Success)
                  {
                      window.location.href = status.TargetURL;
                  }
              },
              error: function () {
                  $(&quot;#message&quot;).html(&quot;Error while authenticating user credentials!&quot;);
              }
          });
      });
  });
  </code></pre>