Ajax扩展控件

 

11.DragPanelExtender(拖拽控件)

补:擅用vs的转到定义功能可以提高效率,不光方法变量可以通过转到定义找到'原味',标签,控件的class,cssClass也可以在CSS里快速找到'原味'。vs里文件夹可以通过右键在'windows资源管理器里打开'。png的图片可以直接改成jpeg格式在图片浏览器里查看。CSS文件里的路径是相对于CSS文件而言,并非引用CSS文件的网页。

 

DragPanelExtender控件可以很轻松地实现拖拽控件的效果

主要代码:

 <div style="height: 300px; width: 250px; float: left; padding: 5px;" >

            <asp:Panel ID="Panel6" runat="server" Width="250px" style="z-index: 20;">
                <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px"
                    BorderStyle="Solid" BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">Drag Me</div>
                </asp:Panel>
                <asp:Panel  ID="Panel8" runat="server" Width="100%" Height="250px"
                   BackColor="#0B3D73" ForeColor="whitesmoke"
                  BorderWidth="2px" BorderColor="black" BorderStyle="Solid" ScrollBars="Auto">
                        <div>
                   <p>This panel will reset its position on a postback or page refresh.</p>
                            <hr />
                            <p><%= GetContentFillerText() %></p>
                        </div>
                </asp:Panel>
            </asp:Panel>
        </div>    
    <ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel6" DragHandleID="Panel7">
    </ajax:DragPanelExtender>

 

主要属性:

TargetControlID:要被拖拽的控件的ID,可以是任何控件

DragHandleID:拖拽控件的'把手'的ID,貌似只能是Panel控件

CSS:

.dragMe {

width:100%;

height:21px;

background-color:#FFF;

background-image:url(../images/drogpanel.png);

text-align:center;

cursor:move;

font-weight:bold;

            }

 

12.DropDownExtender(下拉控件)

该控件能在目标控件周围"套上"一个下拉控件(当鼠标经过时),当右击或左击这个出现的下拉控件后会激发下拉目标控件。目标控件与下拉目标控件可以为任意控件。

主要代码:

   目标控件

 <asp:Label ID="TextLabel" runat="server" Text="选择你喜欢的食物"

 Style="display: block; width: 250px;padding:3px; padding-right: 50px;font-family: Tahoma; font-size: 11px;" />

   下拉目标控件

<asp:Panel ID="Panel1" runat="server" style="display:none;" CssClass="ContextMenuPanel">

<asp:LinkButton ID="LinkButton1" runat="server" Text="番茄炒蛋" CssClass="ContextMenuItem" OnClick="YourChioce"></asp:LinkButton>

<asp:LinkButton ID="LinkButton2" runat="server" Text="叉烧饭" CssClass="ContextMenuItem" OnClick="YourChioce"></asp:LinkButton>

<asp:LinkButton ID="LinkButton3" runat="server" Text="腐竹牛肉" CssClass="ContextMenuItem" OnClick="YourChioce"></asp:LinkButton>

</asp:Panel>

   下拉控件

<ajax:DropDownExtender ID="DropDownExtender1" runat="server" 

TargetControlID="TextLabel"      目标控件ID

DropDownControlID="Panel1"    下拉目标控件ID

DropArrowBackColor="Blue" DropArrowWidth="30px"   设置下拉控件下拉箭头的样式

HighlightBackColor="ButtonHighlight" HighlightBorderColor="Red">   设置下拉控件主体样式

</ajax:DropDownExtender>

   UpdatePanel 更多关于UpdatePanel

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

    <ContentTemplate>

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

    </ContentTemplate>

    <Triggers>

    <asp:AsyncPostBackTrigger  ControlID="LinkButton1" EventName="Click"/>

    <asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="Click" />

    <asp:AsyncPostBackTrigger ControlID="LinkButton3" EventName="Click" />

    </Triggers>

    </asp:UpdatePanel>

 

后置代码:

 protected void YourChioce(object sender, EventArgs e)

        {

            Label1.Text = "你选择了<b>" + ((LinkButton)sender).Text+"</b>";

当多个(种)控件触发同一个事件时,可通过sender(当前触发该事件的控件的实例)来得到该控件,不过要清楚当前控件的类型

        }

CSS代码:

.ContextMenuPanel 

{

border: 1px solid #868686;

z-index: 1000;

background: url(../images/menu-bg.gif) repeat-y 0 0 #FAFAFA;

cursor: default;

padding: 1px 1px 0px 1px;

font-size: 11px;

}

a.ContextMenuItem  a是因为LinkButton到了客户端就是一个带js脚本事件的超链接

{

margin: 1px 0 1px 0;

display: block;

color: #003399;

text-decoration: none;

cursor: pointer;

padding: 4px 19px 4px 33px;

white-space: nowrap;

}

a.ContextMenuItem:hover     :hover伪类(更多关于css伪类)不只能加给a标签,它们可以加给任何控件

{

background-color: #FFE6A0;

color: #003399;

border: 1px solid #D2B47A;

padding: 3px 18px 3px 32px;

}

 

13.DropShadowExtender(阴影效果控件)

理论上该控件可以给任何控件添加阴影的效果,但实际效果却不怎么样,其给Panel控件加阴影的效果最佳,并且其还可以给Panel控件加上圆角的效果,并且可以设置这些效果会不会因为Panel控件的变大变小而失去效果。

<asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel">

            <div style="padding:10px">  

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

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

            </div>

        </asp:Panel>

<ajax:DropShadowExtender ID="DropShadowExtender1" runat="server" 

            TargetControlID="Panel1" 

            Width="5"

            Rounded="true"

            Radius="6"

            Opacity=".75"

            TrackPosition="true">

    </ajax:DropShadowExtender>

主要属性:

TargetControlID(目标控件ID)

Width(所加阴影的宽度,单位是像素)

Opacity(所加阴影的透明度,0~1.0)

Rounded(是否添加圆角效果)

Radius(圆角的半径,单位是像素)

TrackPosition(目标控件大小等变化时阴影是否也跟着变)

CSS:

.dropShadowPanel 

{

width:300px;

background-color:#5377A9;

color:white;

font-weight:bold;

}

 

14.DynamicPopulateExtender(动态替换控件)

该控件能够调用返回值是字符串的WebService里的方法或页面方法,并且可以用这些字符串替换掉目标控件(只能是服务器控件)的里的内容(对于不同控件替换方式也不同,如Panel(直接替换Panel里的内容)Button(替换的是其客户端属性Value)Image(出错)),当然这些字符串如果是些特殊字符串如表示控件的字符串,效果就是以控件来替换,由于是用字符串替换,所以如果用表示服务器控件的字符串来替换不会得到想要的效果,因为客户端浏览器不认识这些服务器控件。

HTML代码:

  <label for="r0">

  <input type="radio" name="rbFormat" id="r0" value='G' onclick="updateDateKey(this.value);" checked="checked"/>

  Normal</label><br />   注意这里this.value的用法,如果像type="text"那样value值是可变的的话,这将非常方便

  <label for="r1"><input type="radio" name="rbFormat" id="r1" value='d' onclick="updateDateKey(this.value);" />

  Short Date</label><br />   关于label标签的for属性

  <label for="r2"><input type="radio" name="rbFormat" id="r2" value='D' onclick="updateDateKey(this.value);" />

  Long Date</label><br />

  <label for="r3"><input type="radio" name="rbFormat" id="r3" value='U' onclick="updateDateKey(this.value);" />

   UTC Date/Time</label><br />

<asp:Panel ID="Panel1" runat="server">当前时间</asp:Panel>

<input type="button" id="button1" value="替换" />      PopulateTriggerControlID控件,可以为客户端控件 

<ajax:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server"

     BehaviorID="DPE"

     TargetControlID="Panel1"     目标控件ID,只能是服务器控件

      PopulateTriggerControlID="button1"     用户单击该控件时就会调用指定的ServiceMethod

      ServicePath="DynamicPopulate.asmx"

      ClearContentsDuringUpdate="true"

      ServiceMethod="GetString"

       UpdatingCssClass="dynamicPopulate_Updating">    当处于替换时目标控件的样式

</ajax:DynamicPopulateExtender>

JavaScript代码:

<script type="text/javascript">

function updateDateKey(value)

{

  $find("DPE").populate(value);  DynamicPopulate的populate方法,类似于AutoComplete的set_contextKey方法,只不过那里是间接设置webservice服务方法的某个参数值,而这里是调用webservice服务方法。

}

Sys.Application.add_load(function(){updateDateKey('G');});  用到了微软js类库里的方法,该句作用等于window.onload=function(){updateDateKey('G');}

</script>

webservices里的服务方法:

 [System.Web.Script.Services.ScriptService]

    public class DynamicPopulate1 : System.Web.Services.WebService

    {

       [WebMethod]

        public string GetString(string contextKey)  返回值与参数类型及参数不能改

        {

            System.Threading.Thread.Sleep(250);   人为延长一下方法执行时间

            string value = (contextKey == "U") ?

                DateTime.UtcNow.ToString() :

                String.Format("{0:" + contextKey + "}", DateTime.Now);

            return String.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", value);

        }

    }

http://www.cnblogs.com/abcdwxc/archive/2007/11/02/947155.html

http://blog.csdn.net/bentonite/archive/2010/01/03/5124559.aspx

 

15.FilteredTextBoxExtender(文本框过滤控件)

该控件能够限制文本框中输入的数据,Note that since this effect can be avoided by deactivating JavaScript, you should use this extender as a convenience for your users, but you must never expect that the data being sent to the server consists of "valid" chars only。

主要属性:

TargetControlID(目标TextBox控件ID)

FilterType(过滤类型Custom(自定义,默认),Numbers,LowercaseLetters,UppercaseLetters(可以同时定义多种类型,用逗号隔开))

以下三个属性是当FilterType过滤类型中有Custom自定义类型时有效

FilterMode(ValidChars(允许模式,默认)InvalidChars(禁止模式))  就是禁止下面的字符还是允许下面的字符

ValidChars(允许的字符 当FilterType有Custom&&FilterMode=ValidChars时有效)

InvalidChars(禁止的字符 当FilterType有Custom&&FilterMode=InvalidChars时有效)

当InvalidChars禁止的字符与除Custom外的其他类型冲突时,以InvalidChars为准。如FilterType=Custom,Numbers  却禁止了123a,这时是不能输入123的,当然a更输入不了了。

当ValidChars允许的字符与除Custom外的其他类型冲突时,取并集。如FilterType=Custom,Numbers  却允许abc,这时可以输入abc,当然数字也可以输入。

总之,禁止的一定禁止,允许的一定允许。

  只能输入数字<asp:TextBox ID="TextBox1" runat="server"/>

  <ajax:FilteredTextBoxExtender ID="TextBox1_FilteredTextBoxExtender" 

   runat="server" Enabled="True" FilterType="Numbers"  

   TargetControlID="TextBox1">

    </ajax:FilteredTextBoxExtender><br />

  只能输入大写字母<asp:TextBox ID="TextBox3" runat="server"/>

   <ajax:FilteredTextBoxExtender ID="TextBox3_FilteredTextBoxExtender" 

    runat="server" Enabled="True" TargetControlID="TextBox3" 

    FilterType="UppercaseLetters">

    </ajax:FilteredTextBoxExtender><br />

  只能输入+-*/跟小写字母<asp:TextBox ID="TextBox2" runat="server"/>

    <ajax:FilteredTextBoxExtender ID="TextBox2_FilteredTextBoxExtender" 

     runat="server" Enabled="True" TargetControlID="TextBox2" 

     FilterType="Custom, LowercaseLetters" ValidChars="+-*/">

    </ajax:FilteredTextBoxExtender><br/>

  不允许说脏话<asp:TextBox ID="TextBox4" runat="server"/>

    <ajax:FilteredTextBoxExtender ID="TextBox4_FilteredTextBoxExtender" 

     runat="server" Enabled="True" TargetControlID="TextBox4" 

     FilterType="Custom" FilterMode="InvalidChars" InvalidChars="操日死狗娘">

    </ajax:FilteredTextBoxExtender><br />

http://book.51cto.com/art/201007/214021.htm

 

 

16.ListSearchExtender(列表搜索控件)

http://blog.csdn.net/yanxiaodi/archive/2010/07/17/5742811.aspx

该控件可以帮助你快速搜索在ListBox或DropDownList中的选项

 <asp:ListBox ID="ListBox1" runat="server" Width="106px">

        <asp:ListItem>我爱你</asp:ListItem>

        <asp:ListItem>你爱我</asp:ListItem>

        <asp:ListItem>她爱他</asp:ListItem>

        <asp:ListItem>中国</asp:ListItem>

    </asp:ListBox>

    <ajax:ListSearchExtender ID="ListBox1_ListSearchExtender" runat="server" 

        Enabled="True" TargetControlID="ListBox1" PromptCssClass="ListSearchExtenderPrompt"

        PromptText="输入文字搜索选项" QueryTimeout="2000" QueryPattern="StartsWith">

    </ajax:ListSearchExtender><br /><br />

    <asp:DropDownList ID="DropDownList1" runat="server" Width="130px">

        <asp:ListItem>台湾</asp:ListItem>

        <asp:ListItem>香港</asp:ListItem>

        <asp:ListItem>澳门</asp:ListItem>

        <asp:ListItem>拉斯维加斯</asp:ListItem>

    </asp:DropDownList>

    <ajax:ListSearchExtender ID="DropDownList1_ListSearchExtender" runat="server" 

        Enabled="True" TargetControlID="DropDownList1" PromptCssClass="ListSearchExtenderPrompt"

        PromptText="输入文字搜索选项" QueryTimeout="3000" QueryPattern="Contains">

    </ajax:ListSearchExtender>

CSS:

.ListSearchExtenderPrompt

{

   font-family:微软雅黑;

   color:Red; 

   background-color:white;

}

主要属性:

TargetControlID(目标ListBox或DropDownList控件的ID)

PromptCssClass(提示框的css样式类)

PromptText(提示文字)

QueryTimeout(如果没有搜到过多久提示框里的文字消失,单位毫秒)

QueryPattern(搜索模式是以文字开始模式还是包括文字模式)

遗憾的是该控件目前还不支持中文！！

 

17.MaskedEditExtender(格式化输入控件)与MaskedEditValidator(格式化输入验证控件)

该控件可以拓展一个TextBox控件,使得该TextBox控件只能被输入某些格式的文本。

很重要的一个属性是Mask(规定格式,在规定时需要使用一些微软规定的字符来代表某一类字符,如9代表数字,L代表字母(注意L的大小写)$代表字母或空格C代表任意字符A代表字母N代表数字?代表任意字符)一般标点符号都可以写在该属性里,但要注意\是转义符。

MaskType(格式类型,None,Number,Date,Time,DateTime,当设为None时,当要获取文本框的值时是不会连标点符号也获取的,每种类型都有自己可获取的标点符号,Number是,. 而其他时间类型是:-/等,不过我试了其他符号有些标点符号也可以被时间类型获取如|等,其他标点符号都会被忽略)

PromptChararacter(没有输入完时的提示字符(占位符)默认是_)

DisplayMoney(在左边还是右边显示货币符号,前提是MaskType设置为Number)

AcceptAMPM(是否显示AM或PM,前提是MaskType设置为DateTime或Time)

OnInvalidCssClass(当验证失败时TextBox的样式类,这个效果需要使用MaskedEditValidator验证控件)

感觉MaskedEditValidator验证控件不如使用ASP.NET本来就有的验证控件方便,所以就不说了,下面链接有涉及,不过均有不完整就部分错误。

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

http://hi.baidu.com/wujuguang/blog/item/8271bbef4d109912fdfa3ca3.html