2012-02-08 34 views
1

私はasp.net MVCのjQueryのAjaxの部分ページ更新問題

を介して取得することができないことを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ビューをつかん以外の何物でもないんや本部-2と呼ばれるのdivを更新するためにjqueryのに渡します。

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

はPOSTコントローラは、ログイン/パスワードがOKであればそれはエラーでディビジョン-2を更新otherwhise、真のJSON値に戻す場合は、パスワードが正しいかどうかを確認することになっています。

// 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); 

    } 

そして、ここではそれは2つの問題

  1. 私は 'Connexionの' ボタンをクリックするたびに動作していない最終的には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 
    

    で、ポストコントローラが発射されます(私は_logonの部分ビューの@ html.Beginformから推測しました)、Ajax Jqueryからではありません。

その結果、210

は、partialViewではなく、私は、ログイン/パスワードチェックの場合には、戻り部分図でディビジョン-2を更新したいディビジョン-2

  1. 以内に表示するので新しいインターネットのページに表示されます失敗しましたが、アクションコントローラに、JasonでJasonの結果を返信するように指示するにはどうしたらよいですか?

はあなたの時間で

答えて

1

[OK]を1問

  1. URLで使用'@Url.Action("ActionMethodName", "ControllerName")'ありがとう:フィールドを、あなたによってなさ1が正確ではありません。ただ、データの後に、あなたのAJAXコードブロックにdataType: "json"を簡単な使用thatsの2番目の質問に来る
  2. は:、それはあなたが使用していない理由はいかなる理由がありますが、部分図
0

するのではなく、結果として、JSONを返すことができますを確認しますHtml.BeginFormではなくAjax.BeginForm?

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

ここで、hideMessageとfadeMessageは、divを非表示にしてフェードインするJS関数です。

0

あなたは、フォームの提出イベントをフックするのではなく、ボタンのイベントをクリックして、中にあなたがいないだけで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 

    }); 
を使用して正常に戻っポストのために行くのブラウザに指示する必要がありハンドラを提出しなければなりません
関連する問題