Ajax Toolkit 控制項學習系列(4) ——兩個和Panel有關的控制項

• 主要說名下2個DropXXXExtender的用法。

　　老樣子，還是先看效果。

　　

　　

• 說上面的那個，一個textbox是在一個panel裡面，而DropShadowExtender是 對panel進行控制的，所以TargetControlID比不可少了。而Opacity設定了透明度。剩下的屬性下面都有說明。就我個人目前來看，還沒有發現有什麼具體的好用的地方。還需要進一步的摸索。

 

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