web-dev-qa-db-ja.com

ASP.NET MVCでjQuery検証を手動で有効にする方法

ASP.NET MVCと結び付けられたjQuery検証の基本を理解するのに苦労しています。

この質問の短いバージョンは次のとおりです：@Html.EditorFor()によって生成されたコードでjQuery検証を実行できるマジックがありませんが、機能しませんまったく同じHTMLを使用して自分のjQuery検証を結び付けようとします？

学習演習として（そして、Webサイトで本当にやりたいことを模倣しているため）Visual Studio 2012で新しいMVC 4アプリを作成しました。ビューモデルを追加しました。

using System.ComponentModel.DataAnnotations;
namespace ValidationTest.Models
{
    public class MyViewModel
    {
        [Required]
        public string MyStringValue { get; set; }
    }
}

そして、Views\Home\Index.cshtmlを変更して、ビューモデルに基づいて次のようなフォームを作成しました。

@model ValidationTest.Models.MyViewModel
@using (Html.BeginForm(new { id = "MyForm" })) {
    @Html.LabelFor(m => m.MyStringValue)
    @Html.EditorFor(m => m.MyStringValue)
    @Html.ValidationMessageFor(m => m.MyStringValue)

    <br />
    <input type="submit" value="Submit" />
}

最後に、Homeコントローラーを変更して、ビューモデルをフォームに提供し、関連するPOSTを次のように処理します。

using System.Web;
using System.Web.Mvc;
using ValidationTest.Models;

namespace ValidationTest.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var viewModel = new MyViewModel();
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(MyViewModel viewModel)
        {
            if (!ModelState.IsValid) return View(viewModel);

            return RedirectToAction("About");
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
    }
}

プロジェクトを実行すると、Webページにテキストボックスが表示され、ユーザーが値を入力する必要があることを魔法のように検証します。ここまでは順調ですね...

今、私の実際のアプリはオンライン調査です。スクリプトに基づいて質問を表示し、回答を求めます。実際のビューモデルには、質問のテキスト、ユーザーが指定した値などにマップするプロパティが含まれます。ビューモデルには、ユーザーが値を指定する必要があるかどうか（有効にするかどうかなど）ビューの「必須」検証）-したがって、これは、ビューモデルのMyStringValueプロパティの[Required]属性を削除し、ビューモデルのRequiredプロパティに基づいて独自の検証マジックを提供する必要があることを意味します。

これは私が迷子になる場所です。 IEでは、サンプルアプリケーション（上記の概要）の@ html.xxx呼び出しにより、このHTMLがフォームに生成されることがわかります。

<label for="MyStringValue">MyStringValue</label>
<input  class="text-box single-line" 
        data-val="true" 
        data-val-required="The MyStringValue field is required." 
        id="MyStringValue" 
        name="MyStringValue" 
        type="text" 
        value="" />
<span data-valmsg-for="MyStringValue" data-valmsg-replace="true"></span>

しかし、ページのどこかに明らかにjQuery検証ライブラリを参照するHTMLが表示されず、検証を有効にするJavaScriptコードも表示されないため、なぜこれが機能するのかまったくわかりません。

さらに、[Required]属性を削除し、上記のHTMLを（マジック@ html.xxx（）呼び出しなしで）表示するようにViewをハードコーディングすると、検証はまったく行われません。

私は何が欠けていますか？

jqueryasp.net-mvcasp.net-mvc-4jquery-validateunobtrusive-validation
17
Bob.at.Indigo.Health

はい、私は本当に基本的なものを見逃していました。

新しいMVC 4プロジェクト用に作成されたページテンプレート（_Layout.cshtml）には、ページの最後に次のコードが含まれています。

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

このコードは（ページ上のすべてのHTMLがブラウザーで表示された後）jQueryライブラリーを取り込み、ビューが提供できるオプションの「セクション」をレンダリングします。そのコードはnot jQuery検証ライブラリをプルします。

ASP.NET MVC検証はjQuery検証なしで機能しますが、検証はすべてサーバーで実行されます。注意深いオブザーバーは、不足している文字列値を指定する必要があると警告されると、クライアント側の検証により、問題のあるテキストボックスに1つの文字を入力するだけで警告が消えます。ただし、jQuery検証が有効になっていない場合、テキストボックスに入力しても警告は動的に削除されません。

単一のビューのjQuery検証を「オン」にするために、このコードはビューのcshtmlファイルのどこかに存在する必要があります（スタイル的には、HTMLの最後に表示されるため、ファイルの最後に配置する必要があります） ：

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

したがって、私の質問に対する簡単な答えは、Views\Home\Index.cshtmlファイルの最後に上記のコードを追加することです。これにより、jQuery検証が有効になり、魔法が発生し、data-xxx属性は無視されなくなりました。人生は素晴らしい。

12
Bob.at.Indigo.Health

あなたが不足しているという魔法はありません。 Microsoftの「控えめな検証」スクリプトは、jqueryおよびjquery validateを使用するWebサイトで使用できます。 ASP.NETに関連付けられていません-HTMLが控えめなスクリプトが期待する形式である限り、スクリプトは機能します。 このフィドルは、ASP.NETで作成されていないフォームに適用される控えめなスクリプトを示しています 。

控えめなスクリプトには、主に2つのタスクがあります。

  1. Jquery.validate.jsプラグインを初期化する
  2. マークアップのdata-val *属性を読み取り、これをjquery検証ルールに変換します

あなたが読んだかもしれませんが 、控えめなスクリプトが読み取るマークアップ属性は次のとおりです

data-val="true"
data-val-rulename="message"
data-val-rulename-paramname1="paramvalue"
data-val-rulename-paramname2="paramvalue"

入力フィールドは次のようになります

  <input
     data-val="true" 
     data-val-required="This field is required..." 
     data-val-number="Please enter a number..."
     data-val-range="Must be between 50 and 100...",
     data-val-range-min="50"
     data-val-range-max="100"
     id="mynumber" 
     name="mynumber" 
     type="text" value="" />

控えめなスクリプトについての私の個人的な意見は、Steve Sandersonが his MVC book で「デモウェア」と呼ぶカテゴリーに分類されるというものです。すぐに使えるナイスな機能をいくつか実行しますが、 jquery validateを妨害します 単独で使用する方がはるかに簡単です。新しいプロジェクトを開始するときに削除する傾向があります。

10
Dr Blowhard