ASP.NET Webフォームの新機能：特集：ASP.NET 4.5新機能概説（2）（4/5 ページ）

» 2013年03月26日 11時38分公開

[花田善仁（監修：山田祥寛），WINGSプロジェクト]

控えめな検証（バリデーション）

　これまで、クライアント側で検証を行おうとすると、検証を行うためのJavaScriptコードなどが大量にHTMLファイル中に埋め込まれることになっていた。

　例として、次のようにTextBoxコントロールと、このコントロールが必須項目であることを示すためのRequiredFieldValidatorコントロールを配置した場合について考えてみよう（なお、これは検証ロジックがどのようになるかを示すための例であり、Submitなどを行う仕組みは含まれていない。従って、実際に「必須項目です」と表示されることもないことには注意してほしい）。

リスト14　検証コントロールの使用例（UnobtrusiveValidationSample.aspxファイル）

　以前のバージョンでは、この.aspxファイルからは、次のような検証コードを含んだHTMLページが生成されていた。

<div>
    <input name="TextBox1" type="text" id="TextBox1" />
    <span id="RequiredFieldValidator1" style="visibility:hidden;">必須項目です</span>
</div>

<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.errormessage = "必須項目です";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>

<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}

function ValidatorOnSubmit() {
if (Page_ValidationActive) {
    return ValidatorCommonOnSubmit();
}
else {
    return true;
}
}
//]]>
</script>

リスト15　以前のバージョンのHTMLコードに埋め込まれた検証コード

　ASP.NET 4.5からは、検証用のコードがJavaScriptコードとして埋め込まれるのではなく、必要な情報が非表示の<span>要素に、「data-」で始まるパラメータとして埋め込まれるようになった。この対応によって、生成されるHTMLのコードが格段に見やすいものとなっている。

<div>
<input name="TextBox1" type="text" id="TextBox1" />
<span data-val-controltovalidate="TextBox1" data-val-errormessage="必須項目です" id="RequiredFieldValidator1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">必須項目です</span>
</div>

リスト16　控えめな検証により出力されるHTMLコード

　“控えめなコード”を出力するには以下の3つの方法がある。

●（1）Web.configファイルのappSettingsの子要素で指定する方法（Webアプリ全体）

　Web.configファイルの<appSettings>要素で「ValidationSettings:UnobtrusiveValidationMode」キーに対応する値として「WebForms」を設定する。以下に設定例を示す。

リスト17　Web.configファイルで控えめな検証を有効にする設定の例

●（2）コード中で指定する方法（Webアプリ全体）

　（1）の例ではWeb.configファイルで指定したが、コード中で同様な指定を行うには、静的プロパティである、System.Web.UI.ValidationSettings.UnobtrusiveValidationModeプロパティを使用する。この方法はWebアプリ全体に影響するため、一般的にはGlobal.asaxファイルのApplication_Startメソッドで指定する。以下に記述例を示す。

public class Global : HttpApplication
{
void Application_Start(object sender, EventArgs e)
{
System.Web.UI.ValidationSettings.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;
……省略……
}

リスト18　コードを使って控えめな検証を有効にする例（Webアプリ全体）

●（3）コード中で指定する方法（ページごと）

　上記の2つはWebアプリ全体で控えめな検証を有効にする方法だが、特定のページでのみこれを有効にしたいときには、Pageクラスのインスタンス・プロパティであるUnobtrusiveValidationModeプロパティを使用する。

　例えばUnobtrusiveValidationSampleページでだけ控えめな検証コードを生成するには、以下のように記述する。

public partial class UnobtrusiveValidationSample : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.WebForms;
}
}