我们在Web开发中经常会接触到Ajax技术，同时Ajax技术也有很多种实现方式，那么，我们今天从第一种方式说起：ASP.NET原生控件实现Ajax。

　　ASP.NET原生控件用于Ajax技术的主要是UpdatePanel和ScriptManager，前者顾名思义，是一个可以用于盛放内容的容器，用于实现页面的局部更新，在使用的时候直接将需要更新的内容放入即可。后者用于调用一些服务和脚本：例如我们本次Demo中使用JavaScript调用WebService服务。

　　本次Demo主要包含一个页面，一个Web服务（WebService）和一个数据通用操作类（userHelper）来实现页面无刷新检测注册时昵称是否存在的功能。

　　首先，我们需要建立一个Web页面（此处选用WebForm），大致代码如下：

　　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>注册</title>

    <script type="text/javascript">

        function check() {

            var Name = document.getElementById("txtName").value;

            if (Name == "") {

                alert("昵称不能为空！");

            }

            else {

                WebApplication1.WebService1.CheckName(Name, callbackCheck);

                function callbackCheck(result) {

                    if (result == false) {

                        document.getElementById("checkFont").innerHTML = "<span>该昵称已存在！请重新输入！</span>";

                    }

                    else {

                        document.getElementById("checkFont").innerHTML = "<span>恭喜！该昵称可以使用！</span>";

                    }

                }

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager runat="server" ID="scriptManager">

        <Services>

            <asp:ServiceReference Path="~/WebService1.asmx" />

        </Services>

    </asp:ScriptManager>

    <asp:UpdatePanel ID="Upnl" runat="server" UpdateMode="Always">

        <ContentTemplate>

            <div>

                昵称：<asp:TextBox ID="txtName" runat="server"></asp:TextBox><div id="checkFont">

                </div>

            </div>

        </ContentTemplate>

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="btnCheck" />

            <asp:PostBackTrigger ControlID="btnReFresh" />

        </Triggers>

    </asp:UpdatePanel>

    <asp:Button ID="btnCheck" runat="server" OnClientClick="check();" Text="检测昵称" />

    <asp:Button ID="btnReFresh" runat="server" Text="刷新页面" />

    </form>

</body>

</html>

　　我在这个页面中放入了一个ScriptManager，同时引用了一个WebService，然后将需要更新的部分放入了UpdatePanel。此外还有两个Button，第一个用于检测昵称，第二个用于刷新页面。大家看过代码之后会发现我在UpdatePanel设置时加入了一个Triggers，那么这个是干什么的呢？获取或设置触发对 UpdatePanel 控件进行更新的回发控件事件。可以看到，我将检测昵称的Button设置为AsyncPostBackTrigger模式，此为点击按钮时不刷新整个页面，只刷新UpdatePanel中的内容，而第二个按钮设为PostBackTrigger模式，则会刷新整个页面。

　　在第一个检测昵称的按钮点击时会调用一个js方法：check()，在check()函数中，我们首先去获取TextBox中用户输入的名称，然后将名称传入js调用的WebService方法中进行操作，得到结果后再根据结果去设置div要显示的内容，如果存在则返回值为false。这里有一个js回调函数的概念：回调函数用于在异步操作中扩展第一个函数的功能，我们此处是为了在返回结果之后设置div的innerHTML的值。如果不使用回调函数而直接使用同步的话，可能会不执行函数的内容。

接下来是WebService，在建立WebService时，需要注意将[System.Web.Script.Services.ScriptService]这行代码的注释取消掉，VS2010中建立后会提示使用ASP.NET

Ajax从脚本中调用此Web服务时就需要这样，否则会调用不到该方法。WebService中代码如下：

　　

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

namespace WebApplication1

{

    /// <summary>

    /// WebService1 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    [System.ComponentModel.ToolboxItem(false)]

    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

    [System.Web.Script.Services.ScriptService]

    public class WebService1 : System.Web.Services.WebService

    {

        [WebMethod]

        public string HelloWorld()

        {

            return "Hello World";

        }

        [WebMethod]

        public bool CheckName(string Name)

        {

            return userHelper.CheckName(Name);

        }

    }

}

　　我们此处调用的CheckName方法，源自于数据通用类中的CheckName方法，userHelper中实现方法代码如下：

　　

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

namespace WebApplication1

{

    public class userHelper

    {

        public static bool CheckName(string Name)

        {

            string Con = @"Data Source=205ZHANGXK\SQLEXPRESS;Initial Catalog=MyQQ;Connect Timeout=30;Trusted_Connection=true";

            using (SqlConnection sqlCon = new SqlConnection(Con))

            {

                string Sql = "select count(*) from users where NickName='" + Name + "'";

                sqlCon.Open();

                SqlCommand cmd = sqlCon.CreateCommand();

                cmd.CommandText = Sql;

                int res = int.Parse(cmd.ExecuteScalar().ToString());

                if (res == )

                {

                    return false;

                }

                else

                {

                    return true;

                }

            }

        }

    }

}

　　我在操作时连接了本地的数据库MyQQ，该方法实现即为查找名称，然后返回受影响的行数并返回结果。下面我们开始调试代码：

　　

　　我们可以看到数据库中已经存在如下11条昵称，在运行时我们输入“豆豆”并点击检测昵称按钮，会发现代码进入到WebSerivce中：

　　

　　此时说明js脚本调用WebService方法已经成功，接下来会执行通用操作类中的方法：

　　

　　和我们意料之中相同，“豆豆”这个昵称已经在数据库存在，接下来我们看看最终的结果：

　　

　　在页面上已经出现了我们预期的结果，我们再来试试输入另外一个不存在的昵称：

　　

　　也已经达到了我们预期的效果。由于局部刷新的图不太容易截到，这里就无法为大家呈现了。我们大家都知道服务器端Button在点击时都会出现响应回发，因此点击另外一个刷新页面的按钮，页面会有明显的闪烁（整个页面全部刷新），这也体现了Ajax技术带来的优势，提升了用户的体验度。

　　我们通过一个简单的Demo重现了ASP.NET 原生控件实现Ajax的功能，这也体现了ASP.NET本身封装的强大之处，同时使用起来也很方便。但是由于ScriptManager和UpdatePanel控件本身为服务器端控件，在一定程度上会生成一些垃圾代码，而且在请求时会生成整个页面的控件树，因此在批量使用的情况下会导致资源的占用率很高，这也是它本身的缺点。下次我会为大家带来Ajax的另一种实现方式：JQuery自带的ajax()方法结合ashx一般处理程序实现，这是一种轻量级的实现方式。

ASP.NET之Ajax系列（一）的更多相关文章

  1. ASP.NET之Ajax系列（三）

    我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...

  2. ASP.NET之Ajax系列（二）

    在上一次的Ajax操作中,我们使用了ASP.NET原生控件实现,但是弊端很多,效率低下,而且有个文件上传的BUG:http://blog.csdn.net/zhaoqiliang527/article ...

  3. ABP(现代ASP.NET样板开发框架)系列之1、ABP总体介绍

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  4. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  5. ABP(现代ASP.NET样板开发框架)系列之3、ABP分层架构

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  6. ABP(现代ASP.NET样板开发框架)系列之20、ABP展现层——动态生成WebApi

    点这里进入ABP系列文章总目录 ABP(现代ASP.NET样板开发框架)系列之20.ABP展现层——动态生成WebApi ABP是“ASP.NET Boilerplate Project (ASP.N ...

  7. ABP(现代ASP.NET样板开发框架)系列之21、ABP展现层——Javascript函数库

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project ...

  8. ABP(现代ASP.NET样板开发框架)系列之23、ABP展现层——异常处理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之23.ABP展现层——异常处理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  9. 解读ASP.NET 5 & MVC6系列（13）：TagHelper

    在新版的MVC6中,微软提供了强大的TagHelper功能,以便让我们摆脱如下的臃肿代码: @Html.LabelFor(model => model.FullName) @Html.EditF ...

随机推荐

  1. java的HashMap与ConcurrentHashMap

    好像今天没有什么源码读,那么就来看看java的这两种HashMap有啥不一样的地方吧,在这之前先普及一下HashMap的一些基本知识: (1)放入HashMap的元素是key-value对. (2)底 ...

  2. Windows安装Python图像处理库：PIL模块

    平常一般都在Linux下用Python,今天女票突然说让帮忙把一些图片全部弄成一个分辨率的,作为程序员,这种重复的工作还是交给计算机吧. 废话不多说,打开Cmd看下Windows的python下面是否 ...

  3. nyoj-----284坦克大战（带权值的图搜索）

    坦克大战 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 Many of us had played the game "Battle city" ...

  4. java.lang.IllegalArgumentException: addChild: Child name '/SSHE' is not unique

    错误信息: Caused by: java.lang.IllegalArgumentException: addChild:  Child name '/SSHE' is not unique     ...

  5. sql server中局部变量与全局变量的 申明与赋值（转）

    来源:http://www.111cn.net/database/mssqlserver/36734.htm 例子:http://www.cnblogs.com/sunxi/p/4497493.htm ...

  6. spring之初识Ioc&Aop

    Spring框架的作用 spring是一个轻量级的企业级框架,提供了ioc容器.Aop实现.dao/orm支持.web集成等功能,目标是使现有的java EE技术更易用,并促进良好的编程习惯. Spr ...

  7. C++统计一段文字中各单词出现的频率

    #include <iostream> using namespace std; /* run this program using the console pauser or add y ...

  8. 个人收集的一些网页上一键云DDOS攻击的网站、IP地址测试，服务器压力测试

    http://bbs.itzmx.com/thread-9018-1-1.html #1 - Network Stresser - http://networkstresser.com#2 - Lif ...

  9. POJ 1979 Red and Black dfs 难度:0

    http://poj.org/problem?id=1979 #include <cstdio> #include <cstring> using namespace std; ...

  10. POJ 1011 Sticks dfs,剪枝 难度:2

    http://poj.org/problem?id=1011 要把所给的集合分成几个集合,每个集合相加之和ans相等,且ans最小,因为这个和ans只在[1,64*50]内,所以可以用dfs一试 首先 ...