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，验证失败返回false
3、运行，输入网址http://localhost:6187/Home/LoginPage name为123，password为123，点击登录即可。如图所示，登录成功
 

ajax与后台方法的交互大致如此。
下一节讲解ASP.NET MVC3使用ADO.NET连接数据库。