Asp.Net Ajax控件示例

 

 1.SliderExtender 实现滑动轴控件

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

    </asp:ScriptManager>        <div>

            <br />

            <asp:TextBox ID="TextBox1" runat="server" Width="67px"></asp:TextBox><br />

            <br />

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />

            <br />

            <cc1:SliderExtender ID="SliderExtender1" runat="server" BoundControlID="TextBox1"

                Steps="10" TargetControlID="TextBox2">

            </cc1:SliderExtender>

          </div>

 

2. TabContainer控件和TabPanel控件的使用方法

 

<div>

            <br />

            <cc1:TabContainer ID="TabContainer1" runat="server" Width="260px" Height="150px">

                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab1">

                  <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                        <ContentTemplate>

                            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />

                            <br />

                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="确定" />

                        </ContentTemplate>

                    </asp:UpdatePanel>

                  </ContentTemplate>

                </cc1:TabPanel>

               

                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab2">

                  <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                        <ContentTemplate>

                            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />

                            <br />

                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="确定" />

                        </ContentTemplate>

                    </asp:UpdatePanel>

                  </ContentTemplate>

                </cc1:TabPanel>

               

                <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab3">

                    <ContentTemplate>

                        <br /><br />视频在线<br /><br />

                        http://www.cnblogs.com/hubcarl

                    </ContentTemplate>                   

                </cc1:TabPanel>

            </cc1:TabContainer>&nbsp;<br />

 

        </div>

 

3. NumericUpDownExtender控件

<asp:ScriptManager ID="ScriptManager1" runat="server" />

        <div style="text-align: center">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                <ContentTemplate>

                    <table style="width: 291px; height: 151px">

                        <tr>

                            <td style="width: 316px">

                                数字一：</td>

                            <td style="width: 271px">

                                <asp:TextBox ID="TextBox1" runat="server" Width="100px">5</asp:TextBox></td>

                            <td style="width: 184px">

                            </td>

                            <td style="width: 100px">

                            </td>

                        </tr>

                        <tr>

                            <td style="width: 316px">

                                数字二：</td>

                            <td style="width: 271px">

                                <asp:TextBox ID="TextBox2" runat="server" Width="100px">10</asp:TextBox></td>

                            <td style="width: 184px">

                                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/down.gif" /></td>

                            <td style="width: 100px">

                                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/up.gif" /></td>

                        </tr>

                        <tr>

                            <td style="width: 316px">

                                自定义：</td>

                            <td style="width: 271px">

                                <asp:TextBox ID="TextBox3" runat="server" Width="100px">周一</asp:TextBox></td>

                            <td style="width: 184px">

                            </td>

                            <td style="width: 100px">

                            </td>

                        </tr>

                    </table>

                    <cc1:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server" RefValues="周一;周二;周三;周四;周五;周六;周日"

                        TargetControlID="TextBox3" Width="70">

                    </cc1:NumericUpDownExtender>

                    <cc1:NumericUpDownExtender ID="NumericUpDownExtender2" runat="server" TargetButtonDownID="Image1"

                        TargetButtonUpID="Image2" TargetControlID="TextBox2" Width="100">

                    </cc1:NumericUpDownExtender>

                    <cc1:NumericUpDownExtender ID="NumericUpDownExtender3" runat="server" TargetControlID="TextBox1"

                        Width="100">

                    </cc1:NumericUpDownExtender>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

           <!--爱好者博墅

---

yW t[‑]{9V Uz
a W
                    TargetControlID：该扩展器目标TextBox控件的ID，即将要被“升级”模拟为NumericUpDown的TextBox的ID爱好者博墅&pu

---

n)SyK5UB
                    Width：扩展后的目标TextBox控件加上默认的上下箭头的总宽度。即模拟出的NumericUpDown控件的宽度，单位为像素(px)
[1]jO&`­YX'B0                     RefValues：由分号(;)作为分隔符的一个列表，将被NumericUpDown控件枚举并依次显示到其中爱好者博墅z-u3KB­jx|^
                    TargetButtonDownID：自定义的向上(即增加)按钮的ID
Gl[1]f8K-s#?6M%b0                     TargetButtonUpID：自定义的向下(即减少)按钮的ID
M{2U'}K

---

zz Y0                     ServiceDownPath：用来取得该NumericUpDown的下一个值的Web Service的URL
Xy‑`9zEc s0                     ServiceDownMethod：ServiceDownPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，
:l v@7z6s lX_

---

m0                                        用来取得NumericUpDown的下一个值爱好者博墅4R'KmW%Nf

---

R9a
                    ServiceUpPath：用来取得该NumericUpDown的上一个值的Web Service的URL爱好者博墅@ fZHA

---

\8l0ND:K8a
                    ServiceUpMethod：ServiceUpPath所指定的Web Service中某个Web Method名称，或页面中某个Page Method的名称，
} xy#K-P"d0                                      用来取得NumericUpDown的上一个值
Z[1]M:yA$W+NC"vz0                     Tag：传递给ServiceDownMethod或ServiceUpMethod所指定的Web Method的参数，可用于传递给服务器当前的上下文信息
v(hw­\

---

BMxh0                 -->

NumericUpDownExtender以及相关的textbox和其它控件都放在UpdatePanel控件的ContentTemplate模板里，否则得到的总是textbox的初始值。
)L;[9k VX04 使用AutoCompleteExtender自动扩展

本章介绍AutoCompleteExtender的使用方法。用过Google的朋友都会发现，当我们在搜索框输入关键字的时候，Google会自动列出相关关键字提示。那么用Ajax.net也能做到么？答案是：Of course!

第一步：建立AJAX Control Toolkit Website

本例子只需要一个TextBox控件和一个AutoCompleteExtender组件。拖进设计界面后代码如下所示：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server">

</ajaxToolkit:AutoCompleteExtender>

第二步：建立WebService

要使用AutoCompleteExtender，我们要通过WebService传递数据。在解决方案资源管理器单击项目-〉添加新项-〉Web服务。我在这里使用了默认的名称，大家有需要自己改吧。

WebService.asmx的代码如下：

using System;

using System.Web.Services;

using System.Collections.Generic;

 

 

///<summary>

/// WebService 的摘要说明

///</summary>

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService {

 

    public WebService () {

 

        //如果使用设计的组件，请取消注释以下行

        //InitializeComponent();

    }

 

    [WebMethod]

    public string[] GetCompleteList(string prefixText, int count) {

        char c1, c2, c3;

        if (count == 0)

            count = 10;

        List<String> list = new List<string>(count);

        Random rnd = new Random();

        for (int i = 1; i <= count; i++)

        {

            c1 = (char)rnd.Next(65, 90);

            c2 = (char)rnd.Next(97, 122);

            c3 = (char)rnd.Next(97, 122);

            list.Add(prefixText + c1 + c2 + c3);

        }

        return list.ToArray();

    }

}

注意：加亮部分大家要自行添加。[System.Web.Script.Services.ScriptService]一定要加，它告诉.net runtime这个WebService被允许从客户端调用。另外System.Collections.Generic是List的命名空间，List可以理解成物件或类别的集合，我们可以根据特殊条件在List里找到我们所需要的值，是.net 2.0新增加的类。该函数的意思是产生三个随机字母，自动添加在输入字符串的后面。另外prefixText和count这两个参数名称要严格遵守拼写格式，原因以前已经介绍过了。

第三步：设置AutoCompleteExtender

具体设置代码如下： 

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

        TargetControlID="TextBox1"

        CompletionSetCount="12"

        EnableCaching="true"

        MinimumPrefixLength="3"

        ServicePath="WebService.asmx"

        ServiceMethod="GetCompleteList">

</ajaxToolkit:AutoCompleteExtender>

TargetControlID是目标控件ID，这里是TextBox1。CompletionSetCount是指列表列出输入提示的数量。EnableCaching指是否启用缓存，建议启动。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表。ServicePath是指Web服务的文件名，这里是WebService.asmx。ServiceMethod是指调用Web服务的函数名，这里是GetCompleteList。

5. AlwaysVisibleControlExtender控件

使用它你能快速做出自己的浮动面板，而且还可以通过后台代码控制它的相关属性。

<asp:Panel BackColor="#666666" ForeColor="#ffffff" ID="Panel1" runat="server" Height="120px" Width="210px">

这个Panel用了AlwaysVisibleControlExtender，因此它总会漂浮在一个地方……</asp:Panel>

<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"

TargetControlID="Panel1" VerticalSide="top" HorizontalSide="right" VerticalOffset="50" HorizontalOffset="50"

ScrollEffectDuration="1">

</ajaxToolkit:AlwaysVisibleControlExtender>

首先设置TargetControlID，当然是Panel1了。VerticalSide指垂直停靠位置，大家可以选择Top、Middel或Bottom。HorizontalSide指水平停靠位置，可以选择Left、Center或Right。VerticalOffset是指垂直边距，该属性根据VerticalSide的选择而不同。例如当VerticalSide=Top时，VerticalOffset=50即离浏览器上部边缘50像素；当VerticalSide=Bottom时，VerticalOffset=50即离浏览器底部边缘50像素，大家自己试验一下。HorizontalOffset和VerticalOffset类似，这里不再重复解释了。ScrollEffectDuration指滑动的延迟时间，数值越大滑动得越慢但越平滑，单位是秒。

 

6. ConfirmButtonExtender弹出确认框

该控件是用于在用户在客户端浏览器中点击一下按钮后，跳出一个对话框提醒用户是否真的要执行该操作，如果点"是"，那么就执行该按钮的事件处理函数；如果点"否"，那么就取消该操作。本控件使用很简单，但关于ConfirmButtonExtender的使用需要注意：
1)ConfirmButtonExtender和它关联的Button控件必须一起放到UpdatePanel中
或者
2)ConfirmButtonExtender和它关联的Button控件一起放到UpdatePanel外面，并在UpdatePanel的Triggers的AsyncPostBackTrigger中设定ControlID为该Button按钮。

<div>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                <ContentTemplate>

                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />

                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br />

                    <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="请记住我们的域名"

                        TargetControlID="Button1">

                    </cc1:ConfirmButtonExtender>

                </ContentTemplate>

            </asp:UpdatePanel>

        </div>

 

7 MutuallyExclusiveCheckBox控件

MutuallyExclusiveCheckBox 是一个可以使得 CheckBox 具有类似 RadioButton 一样，在一系列的选项中只能选择一个的功能。
但是和 RadioButton 不同，MutuallyExclusiveCheckBox 除了在一系列选项中选择一个的功能外，MutuallyExclusiveCheckBox 还可以呈现“不选任何一个”的状态。

  <div style="text-align: center">

          <br />

         <asp:CheckBox ID="CheckBox1" runat="server" Text="A" /><br/>

         <asp:CheckBox ID="CheckBox2" runat="server" Text="B" /><br />

          <br />

        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender1" runat="server"

                Key="QQ" TargetControlID="CheckBox1">

            </cc1:MutuallyExclusiveCheckBoxExtender>

            &nbsp;</div>

        <cc1:MutuallyExclusiveCheckBoxExtender ID="MutuallyExclusiveCheckBoxExtender2" runat="server"

            Key="QQ" TargetControlID="CheckBox2">

        </cc1:MutuallyExclusiveCheckBoxExtender>

8. DropShadowExtender控件

1.Shadow就是陰影，這是一個讓panal有陰影的控制項，單純美觀用而已。

2.Rounded設定陰影是否要圓角

3.TrackPosition，要設成true，否則陰影不會跟著panal跑，底下範例結合拖拉panal，大家可以試試，若TrackPosition沒有設成true，在拖拉panal時，陰影是不會跟著動的。

<div style="height:350px;width:600px;">  

            <asp:Panel ID="Panel1" runat="server" BackColor="Yellow" Height="96px" Width="288px">  

                測試用</asp:Panel>  

        </div>  

        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" Rounded="True" TargetControlID="Panel1">  

        </cc1:DropShadowExtender>  

        <cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1">  

        </cc1:DragPanelExtender>  

9.       TextBoxWatermarkExtender用于对TextBox添加水印效果。当焦点置于textbox中时文字消失 焦点离开时又出现(效果如下)

<div>

            <br />

            网址：<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarded"></asp:TextBox><br />

            <br />

            <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox1"

                WatermarkText="请输入网址" WatermarkCssClass="watermarked">

            </cc1:TextBoxWatermarkExtender>

        </div>

10. PopupControlExtender控件

例子1

PopupControlExtender是一个可以控制Popup载体的组件，它本身并不会产生Popup控件，它的作用是控制Popup载体，例如panel，div等的显示、消失并获得Popup载体中控件的返回值，返回到目标控件中去。下面我们一齐来学习一下PopupControlExtender的使用方法。

第一步：建立AJAX Control Toolkit Web Site

要使用PopupControlExtender我们要使用AJAX Control Toolkit Web Site模板。建立好网站后我们需要以下控件：一个UpdatePanel、一个Panel控件、一个TextBox控件、一个RadioButtonList控件和一个PopupControlExtender组件，如下图所示：

注意：UpdatePannel一定要放在Panel里面，否则运行一次之后会发生JS异常。另外一定要将RadioButtonList的AutoPostBack属性设为True，否则就没有响应了。如下所示：

<asp:Panel ID="Panel1" CssClass="popupbox" runat="server" Height="50px" Width="125px">

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                        <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">

                            <asp:ListItem Text="广州市"></asp:ListItem>

                            <asp:ListItem Text="佛山市"></asp:ListItem>

                            <asp:ListItem Text="深圳市"></asp:ListItem>

                            <asp:ListItem Text="东莞市"></asp:ListItem>

                        </asp:RadioButtonList>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </asp:Panel>

准备好所有代码之后我们还需要建立一个CSS样式，否则不能控制Popup载体的显示和消失了，样式文件如下：

.popupbox

{

    visibility:hidden;

    border-color:#000;

    background:#ff9900;

    font-size:12px;

}

注意：一定要加visibility:hidden，否则Popup就不能隐藏了，这也是CSS样式的关键作用。

第二步：配置PopupControlExtender

由于PopupControlExtender需要配置的属性太多，我们切换到源代码窗口进行设置，如下所示：

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" TargetControlID="TextBox1" PopupControlID="Panel1" CommitScript="e.value;" Position="Bottom" CommitProperty="value" runat="server">

</ajaxToolkit:PopupControlExtender>

TargetControlID是指PopupControlExtender的目标控件ID，即获取返回值的控件ID，这里应该是TextBox1，因为我们从RadioButtonList选择好的项需要在TextBox1中显示。PopupControlID是指Popup载体控件的ID，关于Popup载体的解析在文章的开始部分已有说明，这里应该是Panel1。CommitScript是指选择完成后调用的Js脚本，这里写e.value意思是返回选择项的value值。大家可以适当扩充一下，例如"'你已选择了' + e.value; "，注意：这里的语法一定要严格遵守Js的书写格式，别忘了最后要写分号。Position指Popup载体出现在目标控件的位置，大家根据喜好选择。CommitProperty是指Popup载体中控件的返回值属性，这里就是指RadioButtonList的值的属性名称，大家可以改成Text试试。

第三步：编写常规代码

到了这一步就离完成不远了，我们只需要在cs文件中指定一下RadioButtonList的返回值。双击RadioButtonList1切换到CS代码窗口，编写代码，如下所示：

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

{

     if(RadioButtonList1.SelectedValue != null)

    {

PopupControlExtender.GetProxyForCurrentPopup(this.Page).Commit(RadioButtonList1.SelectedValue);

     }

     RadioButtonList1.ClearSelection();

}

代码很简单，这里就不作解析了。注意：写这段代码之前一定要先using AjaxControlToolkit

OK！运行，效果如下所示：

结束：

本章主要介绍了PopupControlExtender的使用方法。从这个例子可以看出PopupControlExtender还有很多使用方法，而Popup载体也是多样的，大家可以根据这个例子的思路发散出去，发掘出PopupControlExtender更多的用法。

 例子2(日历)

<div style="text-align: center">

            日历：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

            <asp:Panel ID="Panel1" runat="server" Height="184px" Width="171px">

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                        <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"

                            CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"

                            ForeColor="Black" Height="180px" OnSelectionChanged="Calendar1_SelectionChanged"

                            Width="200px">

                            <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />

                            <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />

                            <SelectorStyle BackColor="#CCCCCC" />

                            <WeekendDayStyle BackColor="#FFFFCC" />

                            <OtherMonthDayStyle ForeColor="#808080" />

                            <NextPrevStyle VerticalAlign="Bottom" />

                            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />

                            <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />

                        </asp:Calendar>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </asp:Panel>

            <br />

            <cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" PopupControlID="Panel1"

                Position="Bottom" TargetControlID="TextBox1">

            </cc1:PopupControlExtender> </div>

11. PasswordStrength的用法:密码强度显示

PasswordStrength控件是用来提示用户输入密码的情况,用户在密码框中输入密码时,在文本框的后面会有一个提示,显示密码的强度,这种提示有两种方式:文本和进度条,提示信息的位置也可以由我们来自己设置,样式可以写CSS来定义。当密码框失去焦点时提示信息会自动消失。此控件还有 preFixTexts属性（用来显示提示信息的前缀）和TextStrengthDescriptions（密码强度的提示信息的内容，如弱，强）属性，但是这两个控件的设置只有在StrengthIndicatorType属性设置成Text时才有效，设置成进度条样式时看不见前缀和强度提示消息    
 重要属性
TargetControlID:密码框的ID
DisplayPosition:提示信息显示的位置，一共有6个值分别是：RightSide AboveRight                   AboveLeft LeftSide BelowRight BelowLeft
StrengthIndicatorType:设置显示的方式,文本或是进度条
       Text:文本方式显示
       BarIndicator:以进度条方式显示

PreferredPasswordLength:最合适的密码长度
   TextCssClass:提示信息的样式
   MinimumNumericCharacters:密码中至少要包含的数字的个数
    MinimumSymbolCharacters:密码中至少要包含特殊字符的个数
    BarBorderCssClass:提示进度条的边框样式
    BarIndicatorCssClass:提示进度条的样式

<div>

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />

            <cc1:PasswordStrength ID="PasswordStrength1" runat="server" HelpStatusLabelID="Label1"

                PreferredPasswordLength="12" PrefixText="密码强度：" TargetControlID="TextBox1" TextCssClass="StyleTextBox1"

                TextStrengthDescriptions="弱;一般;中;强">

            </cc1:PasswordStrength>

            &nbsp;</div>

12. FilterTextBoxExtender控件
    FilterTextBoxExtender控件是用来对文本框进行过滤的，让文本框只能对设定的值进行输入。输入类型有Numbers，LowerCaseLetters，UpperCaseLetters和Customer。

13.  PagingBulletedListExtender控件

用于对BulletedList服务端控件进行扩展，使其具有排序的功能。

 

   

--------------------------------------------------------------------------------------

  BehaviorID：该控件在客户端的标识号。

 TargetControlID：该控件要关联的BulletedList控件。
      ClientSort：该控件是否允许BulletedList在客户端进行排序。
      IndexSize：在BulletedList中索引项的字符个数。
      MaxItemPerPage：BulletedList中显示的每页的最大项数。

<div>

              <div style="width: 288px; height: 150px; border-right: #99ff99 thin solid; border-top: #99ff99 thin solid; border-left: #99ff99 thin solid; border-bottom: #99ff99 thin solid;">

                <asp:BulletedList ID="BulletedList1" runat="server">

                    <asp:ListItem>阿杜</asp:ListItem>

                    <asp:ListItem>安七炫</asp:ListItem>

                    <asp:ListItem>安在旭</asp:ListItem>

                    <asp:ListItem>刘德华</asp:ListItem>

                    <asp:ListItem>刘嘉玲</asp:ListItem>

                    <asp:ListItem>罗嘉良</asp:ListItem>

                    <asp:ListItem>罗大佑</asp:ListItem>

                    <asp:ListItem>林忆莲</asp:ListItem>

                    <asp:ListItem>林志颖</asp:ListItem>

                </asp:BulletedList>

                <br />

                <cc1:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server" TargetControlID="BulletedList1">

                </cc1:PagingBulletedListExtender>

            </div>

 </div>