asp.net MVC3入門教程之Ajax交互

本文轉載自：http://www.youarebug.com/forum.php?mod=viewthread&tid=100&extra=page%3D1

隨著web技術的不斷發展與進步，在web2.0時代，ajax技術作為新寵，越來越受到網頁設計人員、網頁開發人員的重視。使用ajax技術，可以構建動態、響應靈敏的web應用程序，這方法的關鍵在于瀏覽器的javascript、DHTML和服務器進行異步通信，它直接從瀏覽器與后端服務器進行通信，掐當地使用它，可以是網頁更加自然，提高網頁的靈敏度，提升用戶體驗。ajax技術，它使瀏覽器為用戶提供自然的瀏覽體驗，在ajax之前，web應用程序強制用戶進行提交、等待等操作。ajax提供與服務器異步通信的能力，從而使用戶從瀏覽器的請求-響應中得到解脫。使用ajax可以在用戶單擊按鈕是，使用Javascript和DHTML立即更新網頁UI，而不需要強制刷新網頁，并且在更新網頁的同時，向服務器發出異步請求，執行相關增刪改查操作。用戶甚至都覺察不到瀏覽器與Web服務器之間的通信。Ajax的核心工作原理是使用javascript的xmlHttPRequest對象，在此，我們就不詳細解釋ajax的原理了。下面講解ASP.NET MVC3與js完成ajax通信。還是在前面的基礎上進行。今天我們把上一節的登錄操作使用ajax完成。1、在LoginPage.cshtml中增加代碼，代碼如下

@{    ViewBag.Title = "LoginPage";}<h2>用戶登錄</h2><h3>Post方法舉例</h3><form action="/Home/LoginForPost" method="post">    <input type="text" name="name" />    <input type="passWord" name="password"  />    <input type="submit" value="登錄" /></form><h3>Get方法舉例</h3><form action="/Home/LoginForGet" method="get">    <input type="text" name="name" />    <input type="password" name="password"  />    <input type="submit" value="登錄" /></form><!--ajax登錄--><h3>ajax登錄舉例</h3><div>    <input type="text" name="name" id="name" />    <input type="password" name="password" id="password" />    <input type="button" value="登錄" id="loginbtn" /></div><script type="text/javascript">    $(function () {        $("#loginbtn").click(function () {            Login();        });    });    function Login() {        var name = $.trim($("#name").val());        var password = $.trim($("#password").val());        $.ajax({            url: "/Home/LoginForAjax",            data: 'name=' + escape(name) + '&password=' + escape(password),            type: "POST",            dataType: "text",            success: function (text) {                if (text == "true") {                    alert('登錄成功');                } else {                    alert('登錄失敗');                }            }        });    }</script>

上述代碼的javascript部分是使用jquery獲取輸入的name和password，然后通過ajax方法與Home控制器下的LoginForAjax進行通信。2、在Home控制器中添加接受Ajax響應的方法LoginForAjax

public string LoginForAjax(string name, string password)        {            if (name == "123" && password == "123")            {                return "true";            }            else            {                return "false";            }        }

我們假設name為123，password為123時表示驗證成功，驗證成功返回true，驗證失敗返回false3、運行，輸入網址http://localhost:6187/Home/LoginPagename為123，password為123，點擊登錄即可。如圖所示，登錄成功ajax與后臺方法的交互大致如此。下一節講解ASP.NET MVC3使用ADO.NET連接數據庫。