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

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

　　老样子，还是先看效果。

　　

　　

• 说上面的那个，一个textbox是在一个panel里面，而DropShadowExtender是 对panel进行控制的，所以TargetControlID比不可少了。而Opacity设置了透明度。剩下的属性下面都有说明。就我个人目前来看，还没有发现有什么具体的好用的地方。还需要进一步的摸索。

 

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

 

• 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