WebForms UnobtrusiveValidationMode を使用して ASP.NET WebForms アプリケーションのフォーム入力の検証をシームレスに行う

2024-05-21

WebForms UnobtrusiveValidationMode が jquery の ScriptResourceMapping を必要とする理由

このエラーメッセージは、ASP.NET WebForms アプリケーションで Unobtrusive Validation モードを使用している場合に発生します。Unobtrusive Validation モードは、クライアント側の JavaScript を使用してフォーム入力の検証をシームレスに行う機能です。このモードを使用するには、jQuery ライブラリが正しくロードされている必要があります。

エラーの原因

このエラーが発生する理由は、ASP.NET が jQuery ライブラリをロードするために ScriptResourceMapping という設定が必要としているからです。ScriptResourceMapping は、ASP.NET が特定のライブラリをどこからロードするかを指示するために使用されます。

解決策

このエラーを解決するには、以下のいずれかの方法を実行する必要があります。

方法 1: ScriptResourceMapping を Web.config ファイルに追加する

  1. Web.config ファイルを開きます。
  2. <configuration> 要素内に以下の行を追加します。
<system.web.script.resources>
  <add assembly="System.Web.Extensions" type="System.Web.Extensions.ScriptResourceHandler" name="jQuery" path="~/Scripts/jquery-1.10.2.min.js" />
</system.web.script.resources>

方法 2: NuGet パッケージを使用して jQuery をインストールする

  1. Visual Studio で、プロジェクトに NuGet パッケージをインストールします。
  2. jQuery パッケージを検索してインストールします。
  3. NuGet パッケージによってインストールされた jQuery ファイルへの参照を追加します。

方法 3: CDN から jQuery をロードする

  1. <head> タグ内に以下の行を追加します。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

補足

  • 上記の解決策は、ASP.NET 4.0 以降を使用している場合にのみ適用されます。
  • jQuery のバージョンは、プロジェクトの要件に応じて変更する必要があります。


WebForms UnobtrusiveValidationMode を使用するサンプルコード

この例では、ASP.NET WebForms アプリケーションで Unobtrusive Validation モードを使用してフォーム入力の検証を行う方法を示します。

コード例

<configuration>
  <system.web>
    <pages enableUnobtrusiveValidation="true" />
  </system.web>
  <system.web.script.resources>
    <add assembly="System.Web.Extensions" type="System.Web.Extensions.ScriptResourceHandler" name="jQuery" path="~/Scripts/jquery-1.10.2.min.js" />
  </system.web.script.resources>
</configuration>

Default.aspx ファイル

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Unobtrusive Validation Example</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lblName" runat="server" Text="Name:" />
            <asp:TextBox ID="txtName" runat="server" Required="true" />
            <asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ErrorMessage="Name is required." />
        </div>
        <div>
            <asp:Label ID="lblEmail" runat="server" Text="Email:" />
            <asp:TextBox ID="txtEmail" runat="server" Required="true" ValidationExpression="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" ErrorMessage="Invalid email address." />
            <asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid email address." />
        </div>
        <div>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </div>
    </form>
</body>
</html>

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class Default : Page
    {
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                // Submit form data
                string name = txtName.Text;
                string email = txtEmail.Text;

                // Process form data
                // ...
            }
        }
    }
}

説明

  • この例では、pages 要素の enableUnobtrusiveValidation 属性を true に設定して、Unobtrusive Validation モードを有効にします。
  • ScriptResourceMapping 要素を使用して、ASP.NET が jQuery ライブラリをどこからロードするかを指示します。
  • jQuery ライブラリ、jquery.validate.min.js ライブラリ、および jquery.validate.unobtrusive.min.js ライブラリをスクリプト要素に追加します。
  • フォームには、名前と電子メールアドレスの入力フィールドが含まれています。
  • RequiredFieldValidator コントロールを使用して、名前フィールドが必須であることを検証します。
  • btnSubmit ボタンをクリックすると、btnSubmit_Click イベントハンドラーが呼び出されます。
  • Page.IsValid プロパティを使用して、フォーム入力の検証結果を確認します。
  • フォーム入力の検証が成功した場合は、フォームデータを処理します。

**この例は、WebForms UnobtrusiveValidationMode を使用する基本的な方法を示しています。詳細については、Microsoft のドキュメント [無効な URL を



WebForms UnobtrusiveValidationMode を使用するその他の方法

上記で紹介した方法は、WebForms UnobtrusiveValidationMode を使用する最も一般的な方法です。しかし、他にもいくつかの方法があります。

方法 1: ScriptManager コントロールを使用する

ScriptManager コントロールを使用して、jQuery ライブラリなどのクライアント側のスクリプトをロードできます。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Unobtrusive Validation Example</title>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-1.10.2.min.js" />
            <asp:ScriptReference Path="~/Scripts/jquery.validate.min.js" />
            <asp:ScriptReference Path="~/Scripts/jquery.validate.unobtrusive.min.js" />
        </Scripts>
    </asp:ScriptManager>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    </form>
</body>
</html>

方法 2: WebResource.axd を使用する

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Unobtrusive Validation Example</title>
    <script src="~/WebResource.axd?d=uI8700e8-130d-431a-8552-362518954131&t=637177010283000000" type="text/javascript"></script>
    <script src="~/WebResource.axd?d=z412470d-a323-432d-b5d8-7478e6250323&t=637177010283000000" type="text/javascript"></script>
    <script src="~/WebResource.axd?d=45973274-8c19-475a-8a6d-4f45f9734084&t=637177010283000000" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    </form>
</body>
</html>

方法 3: CDN を使用する

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Unobtrusive Validation Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate-unobtrusive/1.12.0/jquery.validate.unobtrusive.min.js"></script>
</head>

html asp.net visual-studio

【初心者向け】たった5分でできる！Webサイトにファビコンを設置する方法

ユーザーがウェブサイトを認識しやすくなるブックマークバーでウェブサイトを見つけやすくなるブランドイメージを向上させるファビコンは favicon. ico という名前のファイルで用意する必要があります。サイズは 16x16ピクセル または 32x32ピクセル が一般的です。透過PNG形式やICO形式など、いくつかのファイル形式に対応しています。...

 
html icons favicon 【初心者向け】たった5分でできる！Webサイトにファビコンを設置する方法

HTML5のdata属性を使ってselect要素のonChangeイベント時にパラメータを渡す方法

JavaScript によるネイティブな方法HTML に select 要素と、onChange イベントを処理する JavaScript 関数を用意します。この例では、changeItem 関数に select 要素自身が渡され、selectedValue プロパティで選択された値を取得できます。...

 
javascript jquery html HTML5のdata属性を使ってselect要素のonChangeイベント時にパラメータを渡す方法

JavaScript、jQuery、HTMLで「Height equal to dynamic width (CSS fluid layout)」を実現する方法

このチュートリアルでは、JavaScript、jQuery、HTMLを使用して、動的な幅に合わせた高さを持つ要素を作成する方法を説明します。これは、レスポンシブなWebサイトデザインや、画面サイズに合わせてコンテンツを自動的に調整するレイアウトを作成する場合に役立ちます。...

 
javascript jquery html JavaScript、jQuery、HTMLで「Height equal to dynamic width (CSS fluid layout)」を実現する方法

Selectボックスの使いやすさを向上！プレースホルダー設定のメリットとデメリット

最も簡単な方法は、disabled属性とselected属性を組み合わせて、最初のオプションをプレースホルダーとして表示する方法です。このコードでは、最初のオプションにdisabled属性とselected属性を付与しています。disabled属性により、このオプションは選択できなくなります。selected属性により、このオプションが初期状態で選択された状態になります。...

 
html css select Selectボックスの使いやすさを向上！プレースホルダー設定のメリットとデメリット

requestAnimationFrameで垂直方向に長いコンテンツを含むDivをスクロール

このチュートリアルでは、jQuery を使用して、ページ読み込み時に特定の Div の一番下へ自動的にスクロールする方法を説明します。必要なものjQuery ライブラリHTML ファイル手順HTML ファイルに Div を作成するまず、スクロールしたい Div を HTML ファイルに作成する必要があります。以下は例です。...

 
jquery html requestAnimationFrameで垂直方向に長いコンテンツを含むDivをスクロール

SQL SQL SQL SQL Amazon で見る