SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

カレンダーで日付を簡単に入力するWebページを作る

WebCalendar for .NETのC1WebCalendarコントロールをWebページに実装する

  • X ポスト
  • このエントリーをはてなブックマークに追加

ポップアップカレンダーの作成

 今度は、普段はカレンダーは表示されず、ボタンを押すとカレンダーがポップアップする機能を持ったWebページを作成します。

Webフォームとクライアント側で実行するメソッドの作成

 C1WebCalendarコントロールのポップアップ機能を使う場合は、HTMLフォーム用のコントロールを使用して処理を行います。

1

 新しいWebフォームをプロジェクトに追加し、ツールボックスの「HTML」タブをクリックして、HTMLフォーム用の「Input(Text)」「Input(Button)」を配置します。その下に、C1WebCalendarコントロールを配置し、タスクトレイの「オートフォーマット」で「Professional」を選びます。

 なお、今度はAutoPostBackOnSelectプロパティをTrueにしないでください。Trueにしてしまうと、C1WebCalendarコントロールで選択した値がサーバにポストされてしまい、WebページのHTMLコントロールが受け取れなくなってしまいます。

HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
HTMLフォームの「Input(Text)」「Input(Button)」とC1WebCalendarコントロールを配置する
2

 aspxファイルの「ソース」タブをクリックし、HTMLのソースコードを表示します。そして、Buttonの<input>タグにonclick="Popup()"を追加します。

<input id="Button1" type="button" value="入力..." onclick="Popup()" />
<br />
3

 その下に<script>タグを作成し、Popupというクライアント側で実行するメソッドを作成します。Popupは、Buttonがクリックされた時に呼び出されて実行するメソッドで、2つの処理を行います。

 1つは、C1WebCalendarコントロールのPopupSettingクラスのDockプロパティを使って、Buttonの下にポップアップさせます。PopupSettingクラスは、カレンダーをポップアップする際の設定を保存するクラスです。

 もう1つは、C1WebCalendarクライアントクラスのPopupBesideメソッドを実行し、HTMLコントロールの隣にカレンダーをポップアップさせます。引数は1つで、HTMLコントロールのidを設定します。ここでは、Buttonの隣に表示するので、Buttonのid「Button1」を指定しています。

C#
function Popup()
{
    C1WebCalendar1_Client.PopupSetting.Dock = c1_dock_bottomleft;
    C1WebCalendar1_Client.PopupBeside(
                                document.getElementById("Button1"));
}
4

 もう1つクライアント側で実行するメソッドCalendar_Selectを作成します。

 このメソッドは、カレンダーで選択された値を返すメソッドです。このメソッドで、選択された日時をテキストボックスに設定する式を実行します。

C#
function Calendar_Select(calendar)
{
    if (calendar)
        document.all("Text1").value = calendar.SelectedDate;
}
5

 作成したCalendar_Selectメソッドを、C1WebCalendarコントロールに結合します。コードウィンドウの「デザイン」タブをクリックし、フォームデザイナに戻ります。C1WebCalendarコントロールをクリックし、プロパティウィンドウの「PopupMode」プロパティをTrueにします。また、「ClientOnSelChange」プロパティに、メソッド名Calendar_Selectを設定します。

 これで、カレンダーがクリックされると、このメソッドが呼び出されて選択された日付がテキストボックスに転送されます。

「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定
「ClientOnSelChange」プロパティにメソッド名「Calendar_Select」を設定

まとめ

 C1WebCalendarコントロールをはじめ、Webページ作成に優れたコンポーネントはまだまだあります。

 スタンドアローンのWindowsアプリケーションに比べ、Webアプリケーションの作成は環境が今一歩であったり、制約が多かったりしていますが、こういう時こそコンポーネントを使うと開発効率や製品の性能がアップします。

 今後も、これはいい!と思ったWebコンポーネントを使っていきたいと思います。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2037 2008/08/20 14:05

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング