asp.net的MVC的jQuery的Ajax部分頁面更新問題

Question

我有在Asp.net MVC 3剃鬚刀的部分頁面更新的問題，我無法通過

讓我有有2個文本框這個_LogOn局部視圖電子郵件和密碼，用於登錄目的的按鈕聯接：

@using (Html.BeginForm()) 
{ 

    @Html.ValidationSummary(true) 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Email) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Email) 
     @Html.ValidationMessageFor(model => model.Email) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Password) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Password) 
     @Html.ValidationMessageFor(model => model.Password) 
    </div> 

    <p> 
     <input id="submitConnexion" type="submit" value="Connexion" /> 
     <a id="lnForgetPwd"> Mot de passe oublié</a> 
    </p> 
} 

這裏是控制器：該GET控制器不無非就是抓住_Logon partialV視圖，並把它交給jQuery來更新一個div更叫DIV-2 。

// GET: Account/Logon 
    public ActionResult LogOn() 
    { 
     return PartialView("_LogOn"); 
    } 

的POST控制器應該檢查密碼是否正確，如果是，則返回到真實的Json值，如果登錄/密碼就可以了，otherwhise刷新DIV-2有錯誤。

// POST: Account/Logon 
    [HttpPost] 
    public ActionResult LogOn(UserLogon model) 
    { 
     bool result = false; 

     if (ModelState.IsValid) 
     { 
      UserManager userManager = new UserManager(); 
      string password = userManager.GetUserPassword(model.Email); 

      if (string.IsNullOrEmpty(password)) 
      { 

       ModelState.AddModelError("", "Mot de passe ou email incorrect."); 
       result = false; 
      } 

      if (model.Password == password) 
      { 
       FormsAuthentication.SetAuthCookie(model.Email, false); 
       result = true; 
      } 
     } 

     //return Json(new { JsResult = result }); 

     return PartialView("_Logon", model); 

    } 

這裏是最後的Ajax jQuery代碼

// Ajax call POST for login form button submitConnexion 
    $("#submitConnexion").live('click', function() { 

     var email = $("#div-2 #Email").val(); 
     var password = $("#div-2 #Password").val(); 

     var data = { Email: "hello", Password: password }; 

     alert(email + password); 

     $.ajax({ 

       url: "/Account/LogOn", 
       type: "POST", 
       //data: JSON.stringify(data), 
       //contentType: 'application/json; charset=utf-8', 

       success: function (result) { 

        alert("Hello"); 
        $("#div-2").empty(); 
        $("#div-2").html(result).hide().fadeIn(300); 
       } 
     }); 

    }); 
    // Ajax call POST for login form button 

這是行不通的2個問題

1. 每次我點擊「聯接」按鈕，郵政控制器發射（我假設從@ html.Beginform的_Logon部分視圖）而不是從Ajax Jquery

其結果是，在partialView顯示，而不是在DIV-2

1. 內顯示我想更新DIV-2返回局部視圖在登錄/密碼檢查的情況下，一個新的互聯網頁面上失敗，但我怎麼能告訴動作控制器發送回JSON的結果爲AJAX JQuery的如果登錄/密碼確定，而不是部分視圖？

謝謝

Answer 1

好了一個問題，在一個時間

1. 使用'@Url.Action("ActionMethodName", "ControllerName")'在網址：字段，一個是你做是不準確的。
2. 來的第二個問題，多數民衆贊成簡單隻需使用dataType: "json"數據後，你的Ajax代碼塊：即確保您可以返回JSON作爲結果，而不是局部視圖

Answer 2

的有，爲什麼你不使用任何理由Ajax.BeginForm而不是Html.BeginForm？你應該可以這樣做：

@using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { UpdateTargetId = "div-2", OnBegin = "hideMessage", OnSuccess = "fadeInMessage" })) 

其中hideMessage和fadeMessage是JS函數來隱藏和淡入你的div。

Answer 3

你應該掛鉤的形式提交事件，而不是點擊按鈕的事件，並在提交處理你必須告訴瀏覽器不要簡單地返回false或使用preventDefault()像

$('form').live('submit',function(ev){ 
    ev.preventDefault();//to stop normal form post 
    var email = $("#div-2 #Email").val(); 
      var password = $("#div-2 #Password").val(); 

      var data = { Email: "hello", Password: password }; 

      alert(email + password); 

      $.ajax({ 

        url: "/Account/LogOn", 
        type: "POST", 
        data: JSON.stringify(data), 
        contentType: 'application/json; charset=utf-8', 
        dataType:'json', 

        success: function (result) { 

         alert("Hello"); 
         $("#div-2").empty(); 
         $("#div-2").html(result).hide().fadeIn(300); 
        } 
      }); 
//return false; you can simply uncomment this line and remove ev.preventDefault() to get same result 

    }); 

去正常後回