ASP.NET Webフォームの新機能特集:ASP.NET 4.5新機能概説(2)(4/5 ページ)

» 2013年03月26日 11時38分 公開
[花田善仁(監修:山田祥寛),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中に検証コードが埋め込まれるようになる。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。