Ajax扩展控件

kendezhu

浏览: 243014 次
性别:
来自: 葡萄牙

最近访客更多访客>>

wc12436109

qu118

凝枫霜颖

Oliver--ME

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX扩展控件

Ajax ASP ASP.net CSS WebService

11.DragPanelExtender(拖拽控件)

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

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

主要代码:

            <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">

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

</ContentTemplate>

<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">

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代码:

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

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

Long Date</label><br />

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代码:

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

分享到：