サーバーサイドの開発改善に注目！
～VS2010＋ASP.NET 4新機能（後編）～

ASP.NET 4 Beta入門（2）

　本稿では、いち早くASP.NET 4のBeta版を対象に、前編／後編に分けて新機能や機能強化点を紹介します。後編では、サーバーサイドにフォーカスを当て、サーバーサイドにおける細かな改善点、新コントロール、Dynamic Dataアプリケーションについて紹介します。

はじめに

　前編では、主にクライアントサイドの新機能などを紹介しました。今回はサーバーサイドにフォーカスを当て、サーバーサイドにおける細かな改善点、新コントロール、Dynamic Dataアプリケーションについて紹介します。

　なお、本サンプルプログラムを動作させるに当たっては、無償で提供されているNorthWindデータベースとPubsデータベースを使用しています。

注

　前編では「ASP.NET 4.0」という表記でしたが、.NET Framework "4" に合わせて「ASP.NET 4」とMicrosoftのドキュメントやTraining Kitなどで使われるように遷移してきたため、後編では、「ASP.NET 4」と統一表記することにします。

必要な環境

　本稿では、開発環境として「Visual Studio 2010 Ultimate Edition（日本語版）」（以下、VS2010）のBeta 2版を想定しています。VS2010 Beta 2のインストール手順については、「Visual Studio 2010 Beta 2を使ってみよう」を参考にしてください。

今回触れる内容

　今回触れるのは、大別すると以下の3つです。

• ASP.NET 4のサーバーサイドにおける改善点
• ASP.NET 4の新コントロール
• ASP.NET 4のDynamic Dataアプリケーション

　すべてを網羅することはできませんが、ASP.NET 4のサーバーサイド技術の勘所を鳥瞰します。

ASP.NET 4のサーバーサイドにおける改善点

　最初にASP.NET 4のサーバーサイドにおけるインパクトの大きい改善点を3点紹介します。

ClientIDModeプロパティ

　ASP.NET 2.0で登場したマスターページは、ページ内の重複する部分をあらかじめ定義することで、適用したページに対して一貫したレイアウトを提供できる機能を持つため、多くのアプリケーションで活用されました。

　VS2008＋ASP.NET 3.5では、入れ子にしたマスターページに対するフォームデザイナの表示サポートも行われ、開発効率も大幅にアップしました。

　このように成熟したマスターページでしたが、まだ課題はありました。それはIDの自動設定です。

　ASP.NET 3.5まではマスターページを使用した場合、デザイン時にはマスターページを意識することなく設定ができますが、実行時はマスターページを含めて各コントロールや要素が一意で識別するために図1の様なIDが自動で振られていました。しかし、ご覧の通り、ctl00と言ったIDが自動で表示される他、"_"による羅列のため、一意で識別できるものの、IDを利用した制御が煩雑になることもしばしばありました。

図1　従来生成されていたID

　ASP.NET 4では、ClientIDModeプロパティによりその課題が解決されます。プロパティの概要は次のとおりです。

ClientIDModeプロパティの概要

値	概要
AutoID	従来のASP.NETと同様の設定
Static	出力されるHTMLのClientIDがサーバコントロールのIDに一致にする設定
Predictable	GridViewなどのデータバインドを行うコントロールのClientIDの値を使う
Inherit	ネスト元のClientIDModeプロパティを継承（ネスト元のClientID_該当コントロールID）

　それでは実際の挙動です。最初にサーバーコントロールの記述です（実行結果は図2）。

図2　ClientIDMode実行例

ClientIDModeの指定例

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" >
    ClientIDModeの設定はInherit<asp:Label ID="Label1" runat="server" Text="Label">　<h2><%= Label1.ClientID %></h2></asp:Label>
    <br />
    ClientIDModeの設定はStatic<asp:Label ID="Label2" runat="server" Text="Label" ClientIDMode="Static">　<h2><%= Label2.ClientID %></h2></asp:Label>
    <br />
    ClientIDModeの設定はAutoID<asp:Label ID="Label3" runat="server" Text="Label" ClientIDMode="AutoID">　<h2><%= Label3.ClientID %></h2></asp:Label>
</asp:Content>

　ClientIDModeプロパティをそれぞれ指定している他、Labelのテキストとして各ClientIDを表示させています。続いて、実際に生成されるHTMLです。

ClientIDModeを指定した場合のHTML

ClientIDModeの設定はInherit<span id="MainContent_Label1">　<h2>MainContent_Label1</h2></span>
<br />
ClientIDModeの設定はStatic<span id="Label2">　<h2>Label2</h2></span>
<br />
ClientIDModeの設定はAutoID<span id="ctl00_MainContent_Label3">　<h2>ctl00_MainContent_Label3</h2></span>

　Inherit設定の場合、ネスト元のID_該当コントロールIDという割り当てになります。Staticはデザイナ上で設定されているIDがそのまま割り当てされます。AutoIDは、従来のASP.NETの割り当て設定です。

　ご覧の通りAutoIDを使うよりも、InheritまたはStaticを使う方がより各要素を分かりやすく特定できることが確認できたと思います。

　応用としてデータコントロールを使用し、ClientIDModeプロパティをPredictableに設定した際の挙動も紹介します。今回はEntityDataSourceコントロールとGridViewコントロールを使用します。最初にサーバーコントロールの記述です。

ClientIDModeの指定例（ClientIDMode.aspxの一部）

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" ClientIDRowSuffix="CustomerID"
    AutoGenerateColumns="False" DataSourceID="EntityDataSource1" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label id="lblCustomer" runat="server" text='<%# Eval("CustomerID") %>' ClientIDMode="Predictable" />
            </ItemTemplate>
        </asp:TemplateField>

        ＜中略＞

    </Columns>
</asp:GridView>
<asp:EntityDataSource ID="EntityDataSource1" runat="server"
    ConnectionString="name=NORTHWNDEntities"
    DefaultContainerName="NORTHWNDEntities" EnableFlattening="False"
    EntitySetName="Customers">
</asp:EntityDataSource>

　EntityDataSourceで、NorthWindデータベースの中からCustomersエンティティを抽出しています。GridView側では、ClientIDModeプロパティをStaticに、ClientIDRowSuffixプロパティをCustomerIDに設定しています。入れ子元のデータコントロールがStaticに設定されているため、アイテムテンプレートのClientIDModeプロパティは、Predictableに設定しています。

　ClientIDRowSuffixプロパティはClientIDを一意の物にするためにレコード内の特定のフィールドを指定することでPredictableに設定されている要素に対して「_レコード内の指定した値」が追加されます。

　実際に生成されるHTMLを確認してみましょう。

ClientIDModeをPredictableに設定した場合のHTML

    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
        </tr>
        <tr>
            <td>
                <span id="lblCustomer_ALFKI">ALFKI</span>
            </td>

            ＜中略＞

        </tr>

        ＜中略＞

    </table>
</div>

　Predictableの設定と、ClientIDRowSuffixプロパティの設定により、分かりやすく一意のIDを指定しやすくなったことがご確認いただけたのではないでしょうか？

　複数レコードが表示される場合に一意の値を指定したい場合は、Predictableの設定と、ClientIDRowSuffixプロパティを活用しましょう。