从MVC登录Ajax

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 "onSuccess" and "onFailure" options.

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.

Example code would also be benificial. Please find my current code below.

The login view

@model MyProject.Models.LoginViewModel

@using (Ajax.BeginForm("Login", "Account", null, new AjaxOptions
    {
        OnSuccess = "OnSuccess",
        OnBegin = "OnBegin",
        OnFailure = "OnFailure",
        OnComplete = "OnComplete",
        HttpMethod = "POST",
        UpdateTargetId = "target"   
    }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <fieldset>
          <legend>Login Form</legend>
            <ol>
              <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
              </li>
              <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
              </li>
              <li>
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
              </li>
            </ol>
            <input type="submit" value="Login" />
          </fieldset>
}

Here is the login controller

 [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 = "Login attempt successful!";
        }
        else
        {
            status.Success = false;
            status.Message = "Invalid UserID or Password!";
            status.TargetURL = FormsAuthentication.LoginUrl;
        }
        return Json(status);
    }

Here is the login view model

    public class LoginStatus
{
    public bool Success { get; set; }
    public string Message { get; set; }
    public string TargetURL { get; set; }
}

Script on the page for handling the form

$(document).ready(function () {
    $("#login").click(function () {

        $("#message").html("Logging in...");

        var data = {
            "UserName": $("#userid").val(),
            "Password": $("#password").val(), 
            "RememberMe": $("#rememberme").prop("checked")
            };
        $.ajax({
            url: "/Home/Index",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            success: function (status) {
                $("#message").html(status.Message);
                if (status.Success)
                {
                    window.location.href = status.TargetURL;
                }
            },
            error: function () {
                $("#message").html("Error while authenticating user credentials!");
            }
        });
    });
});
查看全部
csdnceshi70
笑故挽风
2015/09/07 15:16
  • login
  • ajax
  • 点赞
  • 收藏
  • 回答
    私信

1个回复