Ajax.Net--AutoCompleteExtender & CascadingDropDownList & ListSearchExtender

Ajax.Net--AutoCompleteExtender & CascadingDropDownList & ListSearchExtender

一、自动输入完成扩展器(AutoCompleteExtender)     为了提高用户的输入效率，我们可以在用户输入文本框的同时，在文本框的下方给用户显示类似项目的提示功能，用户可以从提示中选择要输入的内容，以简化输入操作。          语法：         <ajax:AutoCompleteExtender ID="acCar" runat="server"            TargetControlID=""   --扩展器要施加作用的TextBox控件的ID             ServiceMethod=""   --WebService的方法名称             ServicePath=""     --WebService的路径名称             MinimumPrefixLength=""   --至少输入多少个字符后才给出提示内容。默认3个字符             EnableCaching=""    --是否要启用客户端缓存。默认为true             CompletionSetCount=""     --要显示多少个提示项             CompletionInterval="" >     --输入最少字符后多少毫秒即给出提示项         </ajax:AutoCompleteExtender>             举例：实现汽车查询的输入提示             HTML页面代码：         <asp:ScriptManager ID="ScriptManager1" runat="server">         </asp:ScriptManager>         <ajax:AutoCompleteExtender ID="acCar" runat="server"            TargetControlID="txtCar"             ServiceMethod="select"             ServicePath="WS.asmx"             MinimumPrefixLength="2"             EnableCaching="true"             CompletionSetCount="35"             CompletionInterval="1000" >         </ajax:AutoCompleteExtender>         <asp:TextBox ID="txtCar" runat="server" AutoComplete="false" Width="305px"></asp:TextBox>&nbsp;</div>         <asp:Button ID="Button1" runat="server" Text="查询" />                WebService的代码：             [WebMethod]             public string[] select(string prefixText,int count)             {                 List<string> al = new List<string>();                 string s = WebConfigurationManager.ConnectionStrings["mydbConnectionString"].ToString();                 SqlConnection conn = new SqlConnection(s);                 SqlCommand cmd = conn.CreateCommand();                 cmd.CommandText = "select name from car where name like '" + prefixText + "%'";                 conn.Open();                 SqlDataReader dr = cmd.ExecuteReader();                 while (dr.Read())                 {                     al.Add(dr["name"].ToString());                 }                 conn.Close();                 return al.ToArray();             }                注意：         1、这里需要调用后台方法（ServiceMethod）来进行数据检索，这个ServiceMethod是WebService的WebMethod。虽然有人说ServiceMethod也可以是页面的方法，但我却未找到实现的方法。         2、WebService类的声明前要加上[ScriptService()]属性 。             [ScriptService()]             public class WS : System.Web.Services.WebService             {                 ......             }         3、WebService类的方法声明应如下：             [WebMethod]             public string[] select(string prefixText,int count)             {                 ......             }            二、列表框联动(CascadingDropDownList)                将两个下拉列表框的数据与数据库中的表绑定，并且实现二者级联，当第一级下拉列表发生改变时，第二级下拉列表的内容也随之改变。              语法：         <ajax:CascadingDropDown ID="CascadingDropDown2" runat="server"             TargetControlID="" --当前要产生选项的DropDownList控件的ID             Category="" --DropDownList控件代表的类别名称，将来在WebService中用以为下以级DropDownList筛选数据             ParentControlID="" --当前控件的父DropDownList控件的ID，如果是第一级DropDownList的话，该属性不用设置             LoadingText=""    --当正在调用WebMethod加载列表框时所显示的提示信息。             PromptText=""     --显示在DropDownList控件中的提示信息。             ServicePath=""     --要调用的WebService的文件路径             ServiceMethod="">     --要调用的WebService的方法         </ajax:CascadingDropDown>            举例：         实现汽车的生产厂商和汽车品牌之间的联动         页面布局                     HTML代码：            <asp:ScriptManager ID="ScriptManager1" runat="server">             </asp:ScriptManager>             <asp:DropDownList ID="DropDownList1" runat="server">             </asp:DropDownList>             <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">             </asp:DropDownList>             <ajax:CascadingDropDown ID="CascadingDropDown1" runat="server"                 TargetControlID="DropDownList1"                 Category="prod"                 PromptText="请选择厂商"                 LoadingText="正在加载厂商列表"                 ServicePath="WS.asmx"                 ServiceMethod="GetProd"              >             </ajax:CascadingDropDown>             <ajax:CascadingDropDown ID="CascadingDropDown2" runat="server"             TargetControlID="DropDownList2"             Category="brand"             ParentControlID="DropDownList1"             LoadingText="正在加载品牌列表"             PromptText="请选择品牌"             ServicePath="WS.asmx"             ServiceMethod="GetBrand"             >             </ajax:CascadingDropDown>             <asp:UpdatePanel ID="UpdatePanel1" runat="server">                 <ContentTemplate>             <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="code"                 DataSourceID="SqlDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None">                ......             </asp:GridView>                 </ContentTemplate>                 <Triggers>                      ......                 </Triggers>             </asp:UpdatePanel>             <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>"                 SelectCommand="SELECT * FROM [car] WHERE ([brand] = @brand)">              ......                             </asp:SqlDataSource>                                WebService代码：                   [WebMethod]             public CascadingDropDownNameValue[] GetProd(string knownCategoryValues, string category)             {                 List<CascadingDropDownNameValue> al = new List<CascadingDropDownNameValue>();                 SqlConnection conn ...;                 SqlCommand cmd ...;                 ...                 SqlDataReader dr...;                 ...                 return al.ToArray();             }             [WebMethod]             public CascadingDropDownNameValue[] GetBrand(string knownCategoryValues, string category)             {                 List<CascadingDropDownNameValue> al = new List<CascadingDropDownNameValue>();                 StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);                 if (!sd.ContainsKey("prod")) return null;                 SqlConnection conn ...;                 SqlCommand cmd ...;                 ...                 return al.ToArray();             }               注意：         1、WebService类的声明前要加上[ScriptService()]属性 。             [ScriptService()]             public class WS : System.Web.Services.WebService             {                 ......             }         2、WebService类的方法声明应如下：             [WebMethod]             public CascadingDropDownNameValue[] GetBrand(string knownCategoryValues, string category)             {                 ......             }         3、GetBrand方法的形参的名称不能写错，否则会出现WebMethod500错误。         4、GetBrand方法的形参knowCategoryValues不是简单的一个值，而是个组合字符串。它的格式一般是"Category:Value"，其中的Category就是CascadingDropDown中的Category属性，而其中的Value是上一级DropDownList的先中的值。所以在GetBrand方法中我们要用                 StringDictionary sd = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);             来解析knownCategoryValues 三、列表检索(ListSearchExtender)     如果列表中已绑定了成百上千条数据，让用户从中选择某一项的话，会给用户增加很多的难度。     列表检索用是可以让用户在列表中输入数据，根据输入的数据，在下拉列出以此开头的诸项。     列表检索只对数字和字母效果较好，对中文汉字的支持不好。     语法：         <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"          TargetControlID=""    --要作用的控件的ID          PromptText=""        --提示信息          PromptPosition=top   --提示信息和输入信息的显示位置          ></ajaxToolkit:ListSearchExtender>             举例：对邮编进行查询         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>         <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"             DataTextField="name" DataValueField="code">         </asp:DropDownList>         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="..." SelectCommand="..."></asp:SqlDataSource>         <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"          TargetControlID="DropDownList1"          PromptText="可直接输入地区名称"          PromptPosition=top >         </ajaxToolkit:ListSearchExtender> 运行效果： (车延禄)