ASP.NET 4 WebフォームのよりクリーンなHTMLマークアップ

これは、VS 2010および.NET 4の今後のリリースに関するシリーズの 16番目の記事です。



本日の投稿は、ASP.NET 4のWebフォームで行った重要な変更に焦点を当てたシリーズの最初の投稿であり、クリーンでCSSフレンドリーなマークアップ標準を生成します。 今日は、クライアントのサーバーコントロールによって生成された「ID」属性をより適切に制御するために行った作業について説明します。

クリーンで標準に準拠したCSSフレンドリーマークアップを生成する

開発者の最も一般的な不満の1つは、ASP.NET Webフォームでサーバーコントロールの通常のレイアウトを生成できないことでした。 ASP.NETの以前のバージョンの特定の問題のリストは次のとおりです。

• HTMLでID属性を自動生成すると、JavaScriptとCSSでの作業が困難になります。
• 一部のコントロール（asp：メニューなど）にセマンティックマークアップの代わりにテーブルを使用します。
• スタイルプロパティが明示的に指定されていない場合でも、一部のコントロールはインラインスタイルを生成しました。
• ViewStateは十分な大きさであることが多く、理想からはほど遠いものです。

ASP.NET 4は、標準に準拠したページをすぐに作成するための改善されたサポートを提供します。 現在、ASP.NET 4の組み込み<asp：>サーバーコントロールは、よりクリーンなマークアップを生成し、CSSスタイリングをサポートしています。これにより、上記の問題がすべてなくなります。

既存のASP.NET Webフォームアプリケーションを更新する際のマークアップの互換性

ASP.NET 4に登場したよりクリーンなマークアップについて聞いたときによく聞かれる質問は、「素晴らしいですが、現在、既存のアプリケーションはどうなりますか？」です。 これらの革新は、プロジェクトを更新するときにすべてを壊しますか？」



既存のASP.NET Webフォームアプリケーションでレイアウトとスタイルが一定であることを確認するため、 web.configに構成フラグ-controlRenderingCompatbilityVersionを追加しました。これにより、使用するマークアップジェネレーターのバージョンを決定できます。







controlRenderingCompatbilityVersionフラグが 「3.5」に設定されている場合、アプリケーションおよびサーバー側のコントロールは、デフォルトでデフォルトの.NET 3.5マークアップを描画します。 controlRenderingCompatbilityVersionフラグが 「4.0」に設定されている場合、アプリケーションおよびサーバーコントロールは、XHTML 1.1標準に準拠したセマンティックマークアップを生成します。クライアントIDはよりクリーンで、余分なラインスタイルはありません。



既定では、ASP.NET 4を使用して構築されたすべての新しいASP.NET Webフォームアプリケーションのこのフラグは4.0です。VS2010を使用して更新される他のすべての以前のアプリケーションでは、 controlRenderingCompatbilityVersionフラグを自動的に3.5に設定します。 後で、アプリケーション全体のレベルと、ページごとまたはディレクトリ全体のweb.configファイルで、値を簡単に変更できます。

クライアントID

生成されたHTML要素に明確で予測可能なID属性を持つ機能は、開発者が長い間Webフォームに求めていたものです（「ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1」のようなID値はあまり一般的ではありません）。 ID値を制御することにより、JavaScriptの記述、CSSの使用、および大きなページのマークアップの量の削減が容易になります。

ClientIDModeコントロールの新しいプロパティ

ASP.NET 4は、Control基本クラスの新しいClientIdModeプロパティをサポートしています。 ClientIdModeプロパティは 、コントロールがクライアントIDを生成する方法を指定します。 ClientIdModeプロパティは、次の4つの値をサポートしています。

• AutoID-.NET 3.5の原則に従って生成します（自動生成されたIDは、互換性のためにctrl00プレフィックスを追加します）
• 予測可能（デフォルト） -行IDで「 ctl00 」を切り捨て、リストまたはコンテナーの場合、親IDを子に追加します（id =” ParentControl_ChildControl”）
• 静的 -コントロールの命名を開発者に完全に制御します。IDが何を示していても、結果にはすべてが表示されます。
• 継承 -親コントロールの命名モードを使用するようにコントロールに指示します

ClientIDModeプロパティは、コントロールまたはコンテナに直接設定でき、内部要素は継承された設定になります。







または、ディレクティブ<％@ Page％>または<％@ Control％>を使用してページレベル全体で設定できます。この場合、ページまたはユーザーコントロール内のコントロールは設定を継承し、オプションでそれらをオーバーロードできます。







または、アプリケーションのweb.configにインストールすることもできます。この場合、アプリケーションのページは設定を継承し、同様に設定をオーバーロードする可能性があります。







このすべてにより、柔軟に命名動作をカスタマイズしたり、必要に応じてオーバーロードしたりできます。

例：非リストコントロールにClientIdModeプロパティを使用する

「ID」を設定して、ページ上のコントロールに新しいClientIdModeプロパティを使用する方法を見てみましょう。 デモンストレーションのために、マスターページ「Site.Master」に基づいた「SingleControlExample.aspx」という名前の単純なページを作成し、<asp：content>にある「Message」IDを持つ<asp：label>要素を1つ含みます。 「MainContent」という名前：







分離コードファイルに、以下に示すように簡単なコードを追加して、ラベルテキストを動的に設定します。







ASP.NET 3.5を使用してアプリケーションを実行するか、バージョン3.5からのレンダリングを使用するようにASP.NET 4アプリケーションを構成するか、ClientIdMode = AutoIDを設定すると、クライアントに送信される生成されたマークアップは次のようになります。







IDは一意ですが、これは適切ですが、「ctl100」プレフィックスが原因でいため、あまり喜ばれません。

ClientIdModelが「予測可能」に設定されている場合にマークアップを生成します

ASP.NET 4では、ClientIdMode =” Predictable”を使用して、サーバー側のコントロールがデフォルトで生成されます。 これにより、すべてのID値が一意であり、ページで競合が発生しないことを確認できますが、IDは冗長性が低く、予測可能です。 つまり、ASP.NET 4の<asp：label>コントロールのデフォルトレイアウトは次のようになります。







接頭辞「ct100」が消えていることに注意してください。 「Message」コントロールは「MainContent」コンテナにあるため、デフォルトでは、ページ上の他のコントロールとの潜在的な競合を防ぐために、そのIDの先頭に「MainContent_Message」が付きます。

ClientIdModelが「静的」に設定されている場合にマークアップを生成する

ID値を階層的に入れ子にしたくない場合がありますが、設定したい値をそのまま使用します。







これにより、クライアントコントロールIDの値を完全に制御する機会が与えられます。

例：データに関連付けられたリストにClientIdModeプロパティを使用する

データに関連付けられたリストまたはグリッドは、Webフォームで自動生成されたIDを操作する際に、スタイルの使用またはカスタマイズがこれまで困難でした。 次に、ASP.NET 4でListViewのIDを構成するシナリオを見てみましょう。



以下は、関連するコレクション（この場合は空港）のコンテンツを表示するListViewコードスニペットです。







次に、コードビハインドファイルにコードを記述して、空港のリストをListViewと動的にリンクします。







実行時、デフォルトのリストは<ul>のようになります。 ListViewの<ul>および<li>要素はサーバーコントロールではなく、それらのマークアップにはIDがないことに注意してください。

各行にクライアントIDを追加します

JavaScriptを介して各<li>にプログラムでアクセスするには、クライアントIDを追加する必要があることを想像してみましょう。 IDデータは、一意で、予測可能で、認識可能である必要があります。



runat = "server"属性を設定し、各idに "airport"を指定することにより、テンプレート内の各<li>をサーバーコントロールとしてマークする必要があります。







デフォルトでは、ASP.NET 4はクリーンIDを生成します。以下に示すように、ctl001はありません。

プロパティClientIDRowSuffixを使用します

上記のテンプレートは、各<li>要素に対して一意のIDを生成するようになりましたが、JavaScriptを介してプログラムでアクセスする場合は、IDに空港コードを含める必要があります。 良いニュースは、関連付けられたASP.NET 4コントロールの新しいClientIDRowSuffixプロパティを使用して、非常に簡単にこれを実行できることです。



これを行うには、ListViewでClientIDRowSuffixプロパティを「Code」に設定します。 IDを生成するときに、関連する「コード」プロパティをAirportクラスで使用するようにListViewに指示します。







そして今、接尾辞「1」または「2」の代わりに、値Airport.Code（_CLE、_CAK、_PDX）を取得します。







GridViewなど、データ接続を持つ他の要素でClientIDRowSuffixを使用できます。

まとめ

ASP.NETを使用すると、サーバーコントロール用のよりクリーンなHTMLマークアップを生成できます。



次の記事では、ASP.NET 4のマークアップに影響を与えたその他の革新について説明します。