细数28个服务器端控件
自Asp.net Ajax正式版发布以来,专注于AjaxControlToolkit,新增4控件着实有趣且其它28个控件尚有新收获和疑问;因之前写过两文,[最新版]Asp.net Ajax 编程备忘录----细数28个服务器端控件 [原创]
【Asp.net Ajax RC版】Asp.net Ajax编程备忘录---- 再说28个服务器端控件不敢行复制粘贴之事,着眼变化,总结点滴收获,成此文。
[1]Accordion
1.本身不需要放在UpdatePanel中
2. var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');这种写法是不好的,这个版本还是没有改进
但是我们在自动测试的页面中发现了更好的写法: var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");
[2]AlwaysVisibleControl
1. var label = document.getElementById('ctl00_SampleContent_currentTime');
这个写法还是麻烦var label = $get('ctl00_SampleContent_currentTime');
2.如果不是要动态的显示时间我们是没有必要使用UpdatePanel的,做了一个简单的:
<asp:Panel ID="Panel1" runat="server"
Width="220px" BackColor="White" ForeColor="DarkBlue"
BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
<div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
<p>Current Time:</p>
<span id="Span1" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/>
</div>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration=".1" />
[3]Animation
1.正式版的页面文件为动画脚本添加了注释更加清晰易懂
2.翻看Anmation Reference 没有新添加什么内容,以前已经详细讲过,不再多言
3.不需要UpdatePanel
[4]AutoComplete (NEW!)
1.是对文本框的扩展
2.调用的Web Service方法签名有要求:
[WebMethod]
public string[] GetCompletionList(string prefixText, int count) { ...
3.MinimumPrefixLength最短前缀字符数,就是说你至少要键入几个字符才会出现提示
4.不需要UpdatePanel
[5]Calendar NEW!
1.同样是对文本框的扩展,文本框获得焦点就会出现日期选择,样式是可以自定义的
2.虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID,一旦这个值设定了,文本框获得焦点也不会弹出日期选择
3.不需要UpdatePanel
[6]CascadingDropDown
无甚变化 以前已经说的够详细 不过里面使用UpdatePanel的代码的确值得看看
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="inline">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
[7]CollapsiblePanel
这个老经典了,没有变化;不过有个疑问还是没有解决:
TextLabelID="Label1"这个属性有什么深意\高级的操作么?我没有发现
2.不需要UpdatePanel
[8]ConfirmButton
因为要动态显示时间 所以使用了UpdatePanel
坚持以前的看法,如果是需要服务器端获取用户选择,还是使用模式弹出吧
[9]DragPanel
是不是发现这段代码了呢?如果去掉这段代码,图东到页面边缘的时候是不正常的,它自己回来了 :)
<script type="text/javascript">
// The following snippet works around a problem where FloatingBehavior
// doesn't allow drops outside the "content area" of the page - where "content
// area" is a little unusual for our sample web pages due to their use of CSS
// for layout.
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
2.不需要UpdatePanel
[10]DropDown
我做了这样一个尝试:对文本框进行扩展,选择像直接反应在文本框中,效果不错,看代码:
<asp:UpdatePanel ID="ok" runat="server">
<ContentTemplate>
<asp:TextBox ID="show" runat="server"></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;">
<asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem" OnClick="OnSelect" />
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="show"
DropDownControlID="DropPanel" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="Update" runat="server">
<ContentTemplate>
<asp:Label id="lblSelection" runat="server" Style="padding: 5px;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
[11]DropShadow 一种说法是:WEB2.0 用户什么都可以定义的,包括边框弧度
[12]DynamicPopulate 除了调用Web service之外 还可以调用客户端脚本的方法,那怎么调用呢?看了看自动测试的代码,没有找到头绪
CustomScript - The script to invoke instead of calling a Web or Page method. This script must evaluate to a string value.
[13]FilteredTextBox 已经专门讨论过了,并且给出了更好的解决方案
http://www.cnblogs.com/me-sa/articles/603217.html
[14]HoverMenu 以前的两片文章已经将细节一一列出,不再多言
[15]MaskedEdit 搞成这样用户会用么?我是不会在项目中使用的
[16]ModalPopup 现在在Opera里面也是正常的了,比较了一下代码,确实做了改进
[17]MutuallyExlcusiveCheckBox Nothing Changed!
[18]NoBot 用作简单的保护是够了
[19]NumericUpDown 在页面上使用还是和WinForm中使用差很多,数据显示感觉有一点滞后
[20]PagingBulletedList Nothing Changed!
[21]PasswordStreng 微软Live注册的时候就是用的这个
[22]PopupControl 看到这个示例的时候 我不禁一笑 这第一个文本框不就是Calendar么
[23]Rating 还是有朋友提出异议说是比较喜欢这个玩意
[24]ReorderList Nothing Changed!
[25]ResizableControl 还真有客户提出这个需求,后来做了个demo 他们自己去掉这里这个需求
[26]RoundedCorners 你会用代码实现么?还是交给美工?
[27]Slider 新浪用来分页 有的Web2.0 用来表示热度
[28]Tabs 是我认为这一次新增控件中最实用的好东东
在编码风格上与所有嵌套式的控件一样:
<ajaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px">
<ajaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
<ContentTemplate>
...
</ContentTemplate>
/>
</ajaxToolkit:TabContainer>
Demo效果让我们很容易想到最近改版之后的网页主页和新浪主页 和Accordion比较一下各有千秋,是对经典WinForm的一种移植
[29]TextBoxWatermark 看了几十个WEB2.0的网站,没想到,见到最多的就是这种水印效果,最直接的提示 实用价值比较高
[30]ToggleButton 这个也见识过了,真有人在用,以前过于主观了
[31]UpdatePanelAnimation Noting Changed!
[32]ValidatorCallout 这个用起来还是很好用的,比起来那些红色的星号,这个更容易发现,:)
【Asp.net Ajax RC版】Asp.net Ajax编程备忘录---- 再说28个服务器端控件不敢行复制粘贴之事,着眼变化,总结点滴收获,成此文。
[1]Accordion
1.本身不需要放在UpdatePanel中
2. var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');这种写法是不好的,这个版本还是没有改进
但是我们在自动测试的页面中发现了更好的写法: var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");
[2]AlwaysVisibleControl
1. var label = document.getElementById('ctl00_SampleContent_currentTime');
这个写法还是麻烦var label = $get('ctl00_SampleContent_currentTime');
2.如果不是要动态的显示时间我们是没有必要使用UpdatePanel的,做了一个简单的:
<asp:Panel ID="Panel1" runat="server"
Width="220px" BackColor="White" ForeColor="DarkBlue"
BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
<div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
<p>Current Time:</p>
<span id="Span1" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/>
</div>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
VerticalOffset="10"
HorizontalSide="Right"
HorizontalOffset="10"
ScrollEffectDuration=".1" />
[3]Animation
1.正式版的页面文件为动画脚本添加了注释更加清晰易懂
2.翻看Anmation Reference 没有新添加什么内容,以前已经详细讲过,不再多言
3.不需要UpdatePanel
[4]AutoComplete (NEW!)
1.是对文本框的扩展
2.调用的Web Service方法签名有要求:
[WebMethod]
public string[] GetCompletionList(string prefixText, int count) { ...
3.MinimumPrefixLength最短前缀字符数,就是说你至少要键入几个字符才会出现提示
4.不需要UpdatePanel
[5]Calendar NEW!
1.同样是对文本框的扩展,文本框获得焦点就会出现日期选择,样式是可以自定义的
2.虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID,一旦这个值设定了,文本框获得焦点也不会弹出日期选择
3.不需要UpdatePanel
[6]CascadingDropDown
无甚变化 以前已经说的够详细 不过里面使用UpdatePanel的代码的确值得看看
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="inline">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
[7]CollapsiblePanel
这个老经典了,没有变化;不过有个疑问还是没有解决:
TextLabelID="Label1"这个属性有什么深意\高级的操作么?我没有发现
2.不需要UpdatePanel
[8]ConfirmButton
因为要动态显示时间 所以使用了UpdatePanel
坚持以前的看法,如果是需要服务器端获取用户选择,还是使用模式弹出吧
[9]DragPanel
是不是发现这段代码了呢?如果去掉这段代码,图东到页面边缘的时候是不正常的,它自己回来了 :)
<script type="text/javascript">
// The following snippet works around a problem where FloatingBehavior
// doesn't allow drops outside the "content area" of the page - where "content
// area" is a little unusual for our sample web pages due to their use of CSS
// for layout.
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
2.不需要UpdatePanel
[10]DropDown
我做了这样一个尝试:对文本框进行扩展,选择像直接反应在文本框中,效果不错,看代码:
<asp:UpdatePanel ID="ok" runat="server">
<ContentTemplate>
<asp:TextBox ID="show" runat="server"></asp:TextBox>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;">
<asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem" OnClick="OnSelect" />
</asp:Panel>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="show"
DropDownControlID="DropPanel" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="Update" runat="server">
<ContentTemplate>
<asp:Label id="lblSelection" runat="server" Style="padding: 5px;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
[11]DropShadow 一种说法是:WEB2.0 用户什么都可以定义的,包括边框弧度
[12]DynamicPopulate 除了调用Web service之外 还可以调用客户端脚本的方法,那怎么调用呢?看了看自动测试的代码,没有找到头绪
CustomScript - The script to invoke instead of calling a Web or Page method. This script must evaluate to a string value.
[13]FilteredTextBox 已经专门讨论过了,并且给出了更好的解决方案
http://www.cnblogs.com/me-sa/articles/603217.html
[14]HoverMenu 以前的两片文章已经将细节一一列出,不再多言
[15]MaskedEdit 搞成这样用户会用么?我是不会在项目中使用的
[16]ModalPopup 现在在Opera里面也是正常的了,比较了一下代码,确实做了改进
[17]MutuallyExlcusiveCheckBox Nothing Changed!
[18]NoBot 用作简单的保护是够了
[19]NumericUpDown 在页面上使用还是和WinForm中使用差很多,数据显示感觉有一点滞后
[20]PagingBulletedList Nothing Changed!
[21]PasswordStreng 微软Live注册的时候就是用的这个
[22]PopupControl 看到这个示例的时候 我不禁一笑 这第一个文本框不就是Calendar么
[23]Rating 还是有朋友提出异议说是比较喜欢这个玩意
[24]ReorderList Nothing Changed!
[25]ResizableControl 还真有客户提出这个需求,后来做了个demo 他们自己去掉这里这个需求
[26]RoundedCorners 你会用代码实现么?还是交给美工?
[27]Slider 新浪用来分页 有的Web2.0 用来表示热度
[28]Tabs 是我认为这一次新增控件中最实用的好东东
在编码风格上与所有嵌套式的控件一样:
<ajaxToolkit:TabContainer runat="server"
OnClientActiveTabChanged="ClientFunction"
Height="150px">
<ajaxToolkit:TabPanel runat="server"
HeaderText="Signature and Bio"
<ContentTemplate>
...
</ContentTemplate>
/>
</ajaxToolkit:TabContainer>
Demo效果让我们很容易想到最近改版之后的网页主页和新浪主页 和Accordion比较一下各有千秋,是对经典WinForm的一种移植
[29]TextBoxWatermark 看了几十个WEB2.0的网站,没想到,见到最多的就是这种水印效果,最直接的提示 实用价值比较高
[30]ToggleButton 这个也见识过了,真有人在用,以前过于主观了
[31]UpdatePanelAnimation Noting Changed!
[32]ValidatorCallout 这个用起来还是很好用的,比起来那些红色的星号,这个更容易发现,:)