Ajax核心组件 和仿Google的小例子

快速回顾
 1.练习核心组件
   0.在最开头都要有ScriptManager（可以将其放在模板页重用）
   1.UpdatePanel里面的控件实现异步刷新
   2.UpdatePanel外面的控件实现异步刷新（通过设置Triggers）
   3.拖一个UpdateProgress，里面随便写几个提示，比如："正在加载，请稍后"
 2.模仿Google做搜索自动联想
   1.新建WebService服务
   2.拖一个txt_Product和AutoCompleteExtender（设置几个关键属性）
    CompletionInterval="300" //输入字符多久后进行提示
    CompletionSetCount="10" //列表显示多少行
    MinimumPrefixLength="1" //输入几个字符开始提示
    ServicePath="ws_AutoComplete.asmx"  //WebService的文件路径
    ServiceMethod="GetProductNames" //  WebService方法
    TargetControlID="txt_Product" //需要绑定的文本框Id

1.下载Ajax核心组件和额外的包 下载
2.安装
   1.先安装ASPAJAXExtSetup（安装的时候不要打开Visual Studio）
   2.解压AjaxControlToolkit，然后放在我的文档-->Visual Studio 2005-->Projects里
     还可以放一份在C/Inetpub下，装iis的都会有这个目录（这个是不成文的习惯！）
3.导入类库（AjaxControlToolkit.dll）
  1.打开Visual Studio并新建网站（选ASP.NET AJAX-Enabled Web Site）
    -->右键工具箱（添加选项卡名为（Ajax Extender））-->右键这选项卡（选 选择项）
    -->浏览（在左边点我的项目-->AjaxControlToolkit/SampleWebSite/Bin/AjaxControlToolkit.dll）确定
4.演示（Ajax Extensions核心组件）
  1.准备条件：
    1.新建一个模板页，在Ajax Extensions里拖一个ScriptManager，必须是from表单后的第一个控件（大脑）
      把默认Default.aspx删了，再新建一个继承模板页的Default.aspx
  2.练习UpdatePanel异步刷新
    1.UpdatePanel里面的控件实现异步刷新
      拖一个UpdatePanel到页面，里面放二个Label（lbl_ShowDate和lbl_OuterDate）
      和一个Timer(Timer_ShowDate)，右键Timer设置Interval(1000),然后点上面的闪电图标设置
      Tick事件(双击进入),写一句代码lbl_ShowDate.Text = DateTime.Now.ToString();，后保存运行
    2.UpdatePanel外面的控件实现异步刷新（通过设置Triggers）
      再拖一个UpdatePanel2进页面，里面放一个Button（btn_Outer），然后把整个UpdatePanel1拖进来
      并把UpdatePanel1的Triggers关联到这个按钮btn_Outer，在按钮的单击事件里代码
      lbl_OuterDate.Text = DateTime.Now.ToString(); 保存运行，点按钮就可以测试
  3.拖一个UpdateProgress，里面随便写几个提示，比如："正在加载，请稍后..."
    为了看到效果，在btn_Outer事件里加上一句Thread.Sleep(5000);（需要导入命名空间），点btn_Outer测试
5.模仿Google做搜索自动联想
   1.新建WebService服务,右键网站WebUI->添加新项(Web服务)->在App_Code下的Ws_AutoComplete里写代码
      注意：类名前要加：[System.Web.Script.Services.ScriptService]，方法名的返回类型和参数名都要和
      后面的代码一样public string[] GetProductNames(string prefixText, int count)

代码
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Configuration;
using System.Data;
using System.Collections.Generic;
using System.Data.SqlClient;

/// <summary>
/// Ws_AutoComplete 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Ws_AutoComplete : System.Web.Services.WebService
{

    public Ws_AutoComplete()
    {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }

    [WebMethod]
    public string[] GetProductNames(string prefixText, int count)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings

["NorthwindConnectionString"].ConnectionString);
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "sp_AutoComplete";
        SqlParameter[] paras = new SqlParameter[]
        {
            new SqlParameter("@ProductName",prefixText),
            new SqlParameter("@Count",count)
        };
        cmd.Parameters.AddRange(paras);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);

        List<string> productNames = new List<string>();
        foreach (DataRow row in ds.Tables[0].Rows)
        {
            productNames.Add(row["ProductName"].ToString());
        }
        return productNames.ToArray();
    }
}

   2.新建一个页面，拖一个AutoCompleteExtender（在工具箱里前面创建的选项卡Ajax Extender里）
     然后拖一个文本框txt_Product，然后右键AutoCompleteExtender设置属性TargetControlID="txt_Product"
     再进入源视图，把AutoCompleteExtender的几个关键属性加上（其中ctrl+J可以有提示）
    CompletionInterval="300" //输入字符多久后进行提示
    CompletionSetCount="10" //列表显示多少行
    MinimumPrefixLength="1" //输入几个字符开始提示
    ServicePath="ws_AutoComplete.asmx"  //WebService的文件路径
    ServiceMethod="GetProductNames" //  WebService方法
    TargetControlID="txt_Product" //需要绑定的文本框Id
6.代码 下载