Ajax扩展控件

 

18.MutuallyExclusiveCheckBox(复选框相互排斥控件)

该控件可以使复选框实现类似单选框一样的相互排斥的效果

 

<asp:CheckBox ID="CheckBox1" runat="server" Text="黑" />
        <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox1_MutuallyExclusiveCheckBoxExtender" 
            runat="server" Enabled="True" Key="颜色" TargetControlID="CheckBox1">
        </ajax:MutuallyExclusiveCheckBoxExtender>
        <asp:CheckBox ID="CheckBox2" runat="server" Text="白" />
        <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox2_MutuallyExclusiveCheckBoxExtender" 
            runat="server" Enabled="True" Key="颜色" TargetControlID="CheckBox2">
        </ajax:MutuallyExclusiveCheckBoxExtender>
        <asp:CheckBox ID="CheckBox3" runat="server" Text="大" />
        <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox3_MutuallyExclusiveCheckBoxExtender" 
            runat="server" Enabled="True" Key="大小" TargetControlID="CheckBox3">
        </ajax:MutuallyExclusiveCheckBoxExtender>
        <asp:CheckBox ID="CheckBox4" runat="server" Text="小"/>
        <ajax:MutuallyExclusiveCheckBoxExtender ID="CheckBox4_MutuallyExclusiveCheckBoxExtender" 
            runat="server" Enabled="True" Key="大小" TargetControlID="CheckBox4">
        </ajax:MutuallyExclusiveCheckBoxExtender>

 

只有一个值得一提的属性:Key(key属性相同的复选框相互排斥)

 

19.Nobot(拒绝机器人控件)

客户端的验证为了提高用户体验，服务器端的验证才是为了安全性。

http://www.cnblogs.com/abcdwxc/archive/2007/11/06/950816.html

http://www.cnblogs.com/dflying/archive/2007/03/16/676886.html

 

20.Rating(等级评定控件)

http://www.cnblogs.com/jaxu/archive/2009/05/16/1458264.html|推荐

HTML:

<ajax:Rating ID="Rating1" runat="server" StarCssClass="ratingStar"  

WaitingStarCssClass="savedRatingStar"

FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" CurrentRating="1" 

MaxRating="10"  OnChanged="Stopawhile">

 </ajax:Rating>

CS:

using AjaxControlToolkit;    //RatingEventArgs

protected void Stopawhile(object sender, RatingEventArgs e)

{

   //Thread.Sleep(400);

    str = e.Value;  //e.Value得到的值就是客户选的等级,可在此将其写入数据库

   Resoponse.Write("客户端看不见此句,但此句执行了");

//由于Rating本身就支持Ajax的无刷新效果,所以上一句Response是执行了,但由于没有回发,所以客户端看不见

}

CSS:

.ratingStar {

    font-size: 0pt;

    width: 13px;

    height: 12px;

    margin: 0px;

    padding: 0px;

    cursor: pointer;

    display: block;

    background-repeat: no-repeat;

}

.filledRatingStar {

    background-image: url(../images/FilledStar.jpg);

}

.emptyRatingStar {

    background-image: url(../images/EmptyStar.jpg);

}

.savedRatingStar {

    background-image: url(../images/SavedStar.jpg);

}

 

 

21.TabContainer(多选项卡容器控件)

如果要在其内的某个TabPanel内添加服务端控件,需给该TabPanel加runat="server"

HTML:

  <ajax:TabContainer ID="TabContainer1" runat="server" Height="100px" Width="400px" 

  OnClientActiveTabChanged="ClientMethod" OnActiveTabChanged="TabPostBack" 

   AutoPostBack="True">

    <ajax:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server" ForeColor="Highlight">

    <ContentTemplate>

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

    </ContentTemplate>

    </ajax:TabPanel>

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

    <ContentTemplate>

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

    </ContentTemplate>

    </ajax:TabPanel>

    </ajax:TabContainer>

主要属性:

OnClientActiveTabChanged(Tab改变时激发的客户端方法,只能写方法名,不支持像Button控件那样OnClientClick中可加return)

OnActiveTabChanged(Tab改变时执行的服务器端方法,由于TabContainer本身支持回调,所以其跟Rating等级评

定控件一样,是"默默执行了服务端方法",要看到效果可加AutoPostBack="True"来增加回发)

  protected void TabPostBack(object sender, EventArgs e)

        { //TabContainer的ActiveTab属性可获得当前Tab

           Label1.Text = TabContainer1.ActiveTab.HeaderText;

        }

TabPanel有OnClientClick属性

TabContainer的高与宽设置的是所有TabPanel的高与宽(默认宽是整个网页的宽,高是根据其内部的控件多少来确定),貌似不能单独设置TabPanel的高与宽。

TabContainer的样式已经集成在其控件本身里面了,可以查看当时下载AjaxControlTookkit时的AjaxControlToolkit文件夹里的Tabs里的样式文件,然后按照其默认样式模板自定义在自己的项目中,这样就会取代其默认的样式

http://www.cnblogs.com/skywind/archive/2007/12/29/1019989.html

http://hejianlong.123.blog.163.com/blog/static/2671583920101943732476/

主要是要修改TabContainer的CssClass,查看网页源码可知,默认是ajax__tab_xp

http://tianmoboping.blog.163.com/blog/static/15739532200831234459235/

http://www.cnblogs.com/htht66/archive/2008/03/14/1104765.html

http://blog.csdn.net/High_Mount/archive/2009/12/17/5027043.aspx

 

 

22.ResizableControl(改变大小控件)

可以让页面中的任何控件具备大小缩放的功能,目前发现被缩放的控件只有被放到Panel控件才够完美,且该控件要设置style="width:100%;height:100%;",ResizableControl的TargetControlID=Panel的ID,这样就相当于通过调整Panel的大小间接调整该控件的大小,可以通过设置Panel的Width和Height来预先设置一个合适的大小。

HTML:

  <asp:Panel ID="Panel1" runat="server" Width="70" Height="35">

 <asp:Image ID="Image1" runat="server" ImageUrl="images/fan.jpg" style="width:100%; height:100%;"/>

    </asp:Panel>

    <ajax:ResizableControlExtender ID="ResizableControlExtender3" runat="server"

     TargetControlID="Panel1" HandleCssClass="handleImage" MinimumHeight="20" MinimumWidth="20"

      MaximumHeight="200" MaximumWidth="200" ResizableCssClass="resizingImage" OnClientResize="Getime">

    </ajax:ResizableControlExtender>

主要属性:

TargetControlID:最好像前面说的那么设置

HandleCssClass:要套用到把柄的样式表

ResizableCssClass:改变大小的时候目标控件的样式表

MinimumWidth:可调整大小的控件的最小宽度，默认值是0。

MinimumHeight:可调整大小的控件的最小高度，默认值是0。

MaximumWidth:可调整大小的控件的最大宽度，默认值是0。

MaximumHeight:可调整大小的控件的最大高度，默认值是0。

HandleOffsetX:把柄位置水平方向要偏离多少像素。

OnClientResize:当控件已经被调整大小之后,所要执行的JavaScript函数名称。

OnClientResizeBegin:当控件开始调整大小时,所要执行的JavaScript函数名称。

OnClientResizing:当控件正在被调整大小之后,所要执行的JavaScript函数名称。

CSS:

.handleImage

{ width:15px;

  height:16px;

  background-image:url(../images/HandleHand.jpg);

  overflow:hidden;

  cursor:se-resize;

}

.resizingImage

{ padding:0px;

  border-style:solid;

  border-width:3px;

  border-color:#B4D35D;

}

怎么通过javascript或后台代码(System.Drawing.Size)来得到或设置缩放大小在以下链接中有讲:

http://www.cnblogs.com/xlovey/archive/2007/11/22/967988.html

http://www.cnblogs.com/abcdwxc/archive/2007/11/09/954206.html

 

23.RoundedCornersExtender(添加圆角控件)

一定要通过Panel的属性设置高度或宽度(而不是在css里)否则将没有背景颜色的效果,但可以看到边框。

只设置宽度的话,Panel会根据其内容的高度来自动或高或低。

http://www.cnblogs.com/terrylee/archive/2006/08/09/atlas_roundedcorners_extender.html

http://www.cnblogs.com/abcdwxc/archive/2007/11/12/956939.html

http://www.cnblogs.com/zm235/archive/2008/05/09/1189558.html