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

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

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

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

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

<form id="form1" runat="server">
<div>
  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
    ControlToValidate="TextBox1" ErrorMessage="必須項目です">
  </asp:RequiredFieldValidator>
</div>
</form>

リスト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」を設定する。以下に設定例を示す。

<configuration>
  <configSections>
    ……省略……
  </configSections>
  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />
  </appSettings>

リスト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;
  }
}

リスト19　コードを使って控えめな検証を有効にする例（ページ単位）

　UnobtrusiveValidationModeプロパティには、「WebForms」以外に「None」も指定できる。Noneを指定した場合には、これまでどおりHTML中に検証コードが埋め込まれるようになる。