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连接数据库。