Ajax Toolkit 控件学习系列(4) ——两个和Panel有关的控件

主要说名下2个DropXXXExtender的用法。

　　老样子，还是先看效果。

　　
<ajax:DropShadowExtender ID="dde" runat="server" TargetControlID="panel2" Opacity="0.3" Rounded="true" Radius="3">[/code]

DropDownExtender 例子中，一个textbox，下面是一个看不见的panel，内置了几个Linkbutton，而此控件的TargetControlID自然控制textbox，DropdownControlID控制的是弹出来的Panel。点击里面的Linkbutton触发相应的事件，返回给textbox里面的值。有必要说一下的就是Trigger中的AsyncPostBack 需要设置，因为是Linkbutton触发的异步的更新，textbox值的改变。

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:Panel ID="panel2" runat="server" CssClass="">
<asp:Label ID="lb_username" runat="server" Text=""></asp:Label>
<asp:TextBox ID="tb_panel2" runat="server"></asp:TextBox>
</asp:Panel>
<br />
<asp:TextBox ID="tbInput" runat="server" Text=""></asp:TextBox>
<asp:Panel ID="panel" runat="server" CssClass="panelCss" Style="visibility: hidden">
<asp:LinkButton ID="lb1" CssClass="link" runat="server" OnClick="OnSelect">选项一</asp:LinkButton><br />
<asp:LinkButton ID="lb2" CssClass="link" runat="server" OnClick="OnSelect">选项二</asp:LinkButton><br />
<asp:LinkButton ID="lb3" CssClass="link" runat="server" OnClick="OnSelect">选项三</asp:LinkButton><br />
<asp:LinkButton ID="lb4" CssClass="link" runat="server" OnClick="OnSelect">选项四</asp:LinkButton>
</asp:Panel>
<ajax:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="tbInput"
DropDownControlID="panel">
</ajax:DropDownExtender>
<ajax:DropShadowExtender ID="dde" runat="server" TargetControlID="panel2" Opacity="0.3"
Rounded="true" Radius="3">
</ajax:DropShadowExtender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lb1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lb2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lb3" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lb4" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>

关于 DropShadowExtender 几个属性的说明。

　　BehaviorID：为该控件在客户端行为表现的标识号。
TargetControlID：该控件绑定的要实现Shadow效果的控件。
Opacity：实现Shadow效果的控件的透明度。
Rounded：实现Shadow效果的控件是否有圆角。
Radius：实现Shadow效果的控件的半径。

msdn上面的对于 EventName所要设置的东西，如果异步的是button，这个属性就是Click，依次对应吧。

控件	默认事件
Button	Click
Calendar	SelectionChanged
CheckBox	CheckedChanged
GridView	SelectedIndexChanged
TextBox	TextChanged

参考文章 ：KELVIN http://www.falaosao.net/article.asp?id=168