ASP.NET AJAX のホームへ戻る

●ドロップダウンカレンダーを表示 (PopupControlExtender)

 

AJAX Control ToolkitPopupControlExtenderを利用するとTextBoxCalendarを連動させて表示させることができます。TextBoxをクリックしたときにCalendarをドロップダウン表示させるには、PopupControlExtenderTargetControlIDプロパティにTextBoxIDを設定します。Positionプロパティには「Buttom」を設定します。PopupControlIDプロパティにはCalendarが宣言されているPanelIDを設定します。Calendarから選択した日付をTextBoxに表示するには、CalendarSelectionChangedイベントハンドラでPopupControlExtenderCommitメソッドを実行します。

 

出荷日付:<asp:TextBox ID="txtDate" runat="server" Width="155px"/>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"

  TargetControlID="txtDate" PopupControlID="Panel1" Position="Bottom" /> 

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">

  <aspAjax:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

      <center>

          <asp:Calendar ID="Calendar1" runat="server"

            OnSelectionChanged="Calendar1_SelectionChanged"...>

            :::

          </asp:Calendar>

      </center>

    </ContentTemplate>

  </aspAjax:UpdatePanel>

</asp:Panel>

 

Protected Sub Calendar1_SelectionChanged(...)

  PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString())

End Sub

 

Panel1CssClassプロパティにCSSが設定されていますが、このCSSには「visibility:hidden」が宣言されています。このCSSを設定しないと、WebページがロードされたときにCalendarが一時的に可視状態になります。

 

fig15

  TextBoxにドロップダウンカレンダーを連動させる

ASP.NET AJAX のホームへ戻る