asp.net mvc jquery Ajax部分頁面更新問題

Question

我在無法通過的Asp.net MVC 3剃須刀上進行部分頁面更新時遇到問題

我有這個_LogOn局部視圖，其中有2個文本框，分別是Email和Password和一個用於登錄目的的按鈕連接：

@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部分視圖並將其交給jquery來更新名為Div-2的div而已。

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

POST控制器應該檢查密碼是否正確，如果這樣，如果登錄名/密碼確定，它將返回Json值為true，否則將刷新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. 每次我單擊“ Connexion”按鈕時，都會觸發發布控制器（我應該從_Logon Partial View的@ html.Beginform獲取），而不是Ajax Jquery

結果，partialView會顯示在新的互聯網頁面上，而不是顯示在Div-2中

1. 在登錄/密碼檢查失敗的情況下，我想用返回的局部視圖更新Div-2，但是如果登錄/密碼確定而不是a，我該如何告訴動作控制器在Json for ajax Jquery中向我發送結果部分觀點？

謝謝

Answer 1

一次確定一個問題

1. 在url：字段中使用'@Url.Action("ActionMethodName", "ControllerName")' ，由您完成的操作不准確。
2. 來到第二個簡單的問題，只需在dataType: "json"之后的ajax代碼塊中使用dataType: "json" ，以確保您可以返回json作為結果而不是部分視圖

Answer 2

有什么理由為什么不使用Ajax.BeginForm而不是Html.BeginForm？ 您應該能夠執行以下操作：

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

其中hideMessage和fadeMessage是用於在div中隱藏和淡入淡出的JS函數。

Answer 3

您應該鈎住表單的Submit事件而不是button的click事件，並且在Submit handler中，您必須通過簡單地返回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

    });