與jQuery的asp.net的MVC AJAX登錄表單

Question

我有我的MVC應用程序一個簡單的登錄表單（注意我沒有使用內置的一個），它看起來是這樣的：

@using (Html.BeginForm()) 
{ 
    <label for="UserName" class="placeholder">Email address or username</label> 
    @Html.TextBoxFor(m => m.UserName) 

    <label for="Password" class="placeholder">Password</label> 
    @Html.PasswordFor(m => m.Password) 

    <button type="submit" title="Log in">Log in &#9658;</button> 
} 

我有一些jQuery的應該使用ajax發佈數據。如果用戶正確，則將其發送到正確的頁面，否則會顯示錯誤。不過我很掙扎。任何人都可以指出我正確的方向，因爲目前我也可以獲得成功，即使帳戶詳細信息不正確，並且由於防止默認成功登錄，我也失去了重定向功能。

$('form').live('submit', function (event) { 

        // Stop the form from doing a native postback 
        event.preventDefault(); 

        $.ajax({ 
         type: 'POST', 
         timeout: 5000, 
         url: $(this).attr('action'), 
         data: $('form').serialize(), 
         success: function (responseHtml) { 
          // what goes here... as the form is always successful even if the account details are incorrect 
         }, 
         error: function (jqXHR, textStatus, errorThrown) { 

          alert('error'); 
         } 
        }); 
       }); 

C＃

[HttpGet] 
public ActionResult Login() 
{ 
    if (Session["UserID"] != null) 
    { 
     return RedirectToAction("Index", "Home", new { area = "Dashboard" }); 
    } 

    return View(); 
} 

[HttpPost] 
public ActionResult Login(User user, string returnUrl) 
{ 
    // Validate the email and password 
    if (users.Login(user.UserName, user.Password, Request.UserHostAddress)) 
    { 
     FormsAuthentication.SetAuthCookie(user.UserName, true); 

     if (Url.IsLocalUrl(returnUrl) && returnUrl.Length > 1 && returnUrl.StartsWith("/") 
      && !returnUrl.StartsWith("//") && !returnUrl.StartsWith("/\\")) 
     { 
      return Redirect(returnUrl); 
     } 
     else 
     { 
      return RedirectToAction("Index", "Home", new { area = "Dashboard" }); 
     } 
    } 
    else 
    { 
     return View(); 
    } 
} 

Answer 1

的成功和失敗的Ajax調用的事件是指Ajax調用自身的狀態。如果呼叫完成，但用戶無效，就ajax呼叫而言，這是成功的。

在控制器中，這個ajax發佈給你需要返回一個你喜歡的格式（text，xml，json）的標誌來說明登錄是否成功。

然後，您可以在您的成功函數中訪問此值，因爲它將作爲responseHtml變量傳入。如果此標誌顯示登錄是正確的，則可以使用location.assign("page.aspx")重定向到正確的位置。

Answer 2

你的行動必須返回數據而不是HTML，因爲你要使用的結果在你的JavaScript回調，

例如，你可以用uservalidated屬性這樣返回一個JSON對象：

[HttpPost] 
public JsonResult Login(User user, string returnUrl) 
{ 
    // Validate the email and password 
    if (users.Login(user.UserName, user.Password, Request.UserHostAddress)) 
    { 
     FormsAuthentication.SetAuthCookie(user.UserName, true); 

     // build redirectUrl ... 
     var redirUrl = ... 
     return Json(new { uservalidated = true, url = redirUrl }); 
    } 
    else 
    { 
     return Json (new { uservalidated = false, url = null }); 
    } 
} 

你的ajax調用有兩個回調。錯誤回調僅僅是出於某種原因ajax調用出錯的情況。

無論用戶是否提供了正確的憑證，您將始終返回到您的成功回調，因爲ajax調用本身不應該失敗。

編輯：

好吧，我從內插，你希望你的操作方法與和未啓用JavaScript工作的意見。

你有兩種可能性：

• 使用2個action方法 - 一個返回JsonResult其他收益的ActionResult
• ，能夠自動檢測度過了一個Ajax請求或notand返回完整視圖/重定向使用一個操作方法或通過ajax調用時的JSON數據。

這是後者的一個例子：

[HttpPost] 
public ActionResult Login(User user, string returnUrl) 
{ 
    // do login logic like shown above. 
    bool userAuthenticated = ... 
    string redirectUrl = ... 

    if (Request.IsAjaxRequest()) { 
     return Json(new { userAuthenticated = userAuthenticated, url = redirectUrl }); 
    } 
    else { 
     return Redirect(redirectUrl); 
    }   
} 

最後一部分是如何在你的JavaScript代碼使用返回的JSON數據。你可以像這樣在成功回調中訪問它：

$.ajax({ 
    ... 
    success: function (data) { 
       if (data.userAuthenticated) { 
        window.location.href = data.url; 
       } else { 
        // show some fancy invalid credentials message... 
       } 
      }, 
    ...