CodeZine(コードジン)

特集ページ一覧

クライアントサイドの開発強化に注目!
~VS2010+ASP.NET 4.0新機能(前編)~

ASP.NET 4.0 Beta入門

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/12/22 14:00

ダウンロード FirstASP4.zip (1.0 MB)

目次

ASP.NET AJAX Libraryによるスクリプトからのコントロール呼び出し

 さて、ここで実際にASP.NET AJAX Libraryに統合されたAJAX Controlの使い方を紹介します。基本的な構文は次のとおりです。

コントロールの生成
Sys.create.使用したいコントロール("要素(IDまたはクラスを指定)");

 構文が統一化され、利用しやすくなっています。必要に応じて、プロパティの値を第2パラメーター以降に設定します。また、jQueryの統合により、jQueryライクな構文も利用できるようになっています。

jQueryライクなコントロール生成
$("要素(IDまたはクラスを指定)").使用したいコントロール();

 どちらの記載でも結果は同じなので利用しやすい方で記述してください。

 それでは実際に上記構文を利用してAJAX Controlを使用してみましょう。

Watermarkコントロール

 テキストボックスに値が入力されるまで、指定された文字列を表示させるWatermarkコントロールです。

図5 Watermarkコントロール使用例
図5 Watermarkコントロール使用例

 使用方法は次のとおりです。

Watermarkコントロール
<head runat="server">
    <title>Watermark</title>
    <link rel="stylesheet" type="text/css" href="Stylesheet.css" />
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>  
    <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>  
    
    <script type="text/javascript">
        // requireメソッドで、jQueryとWatermarkコントロールに必要なスクリプトをダウンロード
        Sys.require([Sys.scripts.jQuery, Sys.components.watermark], function () {
            // .sampleクラスのテキストボックスにWatermarkコントロールを生成
            Sys.create.watermark(".sample", "文字を入力してください", "Watermark");
            // IDが#jsampleのテキストボックスにWatermarkコントロールを生成
            $("#jsample").watermark("jQueryライクな構文で作成", "Watermark"); 
        });
   </script>
</head>
<body>
    <p>

        <input class="sample" type="text" />
    </p>
    <p>
        <input id="jsample" type="text"/>
    </p>
</body>

 Sys.require()メソッドは、ASP.NET AJAX Libraryで追加されたメソッドで、第一パラメタで指定したコンポーネントに必要なファイルをMicrosoft Ajax CDNからダウンロードします。複数のコンポーネントのスクリプトファイルをダウンロードしたい場合は、配列型で記載します。このメソッドは、コントロールを生成するスクリプトファイルを意識することなく利用できるため、ASP.NET 4.0時代に活用しやすいメソッドであると言えます。
 

上記メソッドを利用するとWatermarkコントロールを生成する準備が出来ます。肝心のWatermarkコントロールですが、生成にはSys.create.watermark()メソッドを使用します。第1パラメーターにはクラスを、第2パラメーターにWatermarkTextプロパティを、第3パラメーターにはWatermarkCssClassプロパティの値をそれぞれ入力しています。

AJAX Controlのスクリプトファイルを知るには?

 Watermarkコントロールを生成する為に必要なスクリプトファイルはASP.NET AJAX Library内のTextboxWatermark.debug.jsファイルを見ると解ります。これは、各コントロールに共通しているので、各コントロールのスクリプトファイルを知りたい場合に活用してください。

 jQueryライクな構文では、最初に要素を指定しているため、watermarkメソッドでは、第1パラメーターにWatermarkTextプロパティを、第2パラメーターにWatermarkCssClassプロパティの値を設定しています。

 実行結果は図5の通りです。

Calendarコントロール

 テキストボックスに対する拡張コントロールで、ポップアップでカレンダーが表示されます。

図6 Calendarコントロール使用例
図6 Calendarコントロール使用例

 使用方法は次のとおりです。

Calendarコントロール
<head runat="server">
    <link href="http://ajax.microsoft.com/ajax/beta/0911/extended/Calendar/Calendar.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        // requireメソッドで、jQueryとCalendarコントロールに必要なスクリプトをダウンロード
        Sys.require([Sys.scripts.jQuery, Sys.components.calendar], function () {
            Sys.create.calendar(".calendar");

            // IDが#jsampleのテキストボックスにCalendarコントロールを生成
            $("#jsample").calendar();
        });

    </script>
</head>
<body>
    <p>
        通常の構文で作成
        <input Class="calendar" />
    </p>
    <p>
        jQueryライクな構文で作成
        <input id="jsample" type="text"/>
    </p>
</body>

CalendarコントロールではSys.require()を使用してCalndarコントロールのスクリプトファイルをダウンロードした後、基本構文通りにCalendarコントロールを生成しています。

 jQueryライクな構文では、基本構文通りの記述を行っています。

 実行結果は図6の通りです。

データアクセス

 JavaScriptで定義したオブジェクトを簡単に表示できるデータバインディングも実現できるようになりました。詳しくは既存の記事「ASP.NET AJAX 4.0を予習する(前編)」に記載されているのでそちらを参照ください。

まとめ

 今回はASP.NET 4.0の全体像とコア機能、新機能を紹介しました。特に、クライアントサイド開発部分に大きな強化を感じられたのではないでしょうか? もちろん、サーバーサイドの新機能や機能強化はありますし、次回はそちらについて触れる予定ですが、ASP.NET 4.0は多くのWeb開発者にアプローチを行うという傾向を強く押し出しているため、筆者の感想としてASP.NET 4.0はクライアントサイド開発の大幅な強化が目玉になるのではないかと思います。

 今目の前で変革してきているASP.NET/VS 2010に興味を持っていただければ幸いです。

参考文献



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET 4 Beta入門

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5