ASP.net MVC5 Validationのエラー時に、テキストボックスをハイライトしたい。

Question

###前提・実現したいこと
Validationのエラー時に、テキストボックスをハイライトしたい。

###発生している問題・エラーメッセージ
ASP.NET MVC5 実践プログラミングという参考書で
チュートリアルを学んでいます。

p.246の入力値の検証という章において、
検証エラー時にテキストボックスをハイライトするサンプルがあるのですが、
上手く動作しません。

説明では、Content/Site.cssに
.input-validation-errorのスタイルを設定すればハイライトできると書いてあるのですが、ハイライトできません。

サーバ起動後の検証エラー発生時に、サーバ側のSite.cssを修正（.input-validation-errorを有効にする）し、保存すると検証エラーの対象となっているテキストボックスがハイライトされていることから、
クラスの指定は正しそうです。(やりたいことは、検証エラーと同時にハイライトしたい)

JavaScript等、クライアントサイドの制御に疎く、
原因が分からないためお力を借りたいです。

サンプルは以下URLのダウンロードから入手可能です。
落としたファイルのMvcModelで動作確認ができます。
ダウンロードサイト

以上、よろしくお願いいたします。

###該当のソースコード

Content/Site.css

.input-validation-error {
    background-color: #ffeeee;
}

Web.config

  <appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />
  </appSettings>

Views/Members/Create.cshtml

@model MvcModel.Models.Member

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Member</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

<!-- 省略 -->
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

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

展開後のhtml

<!-- 省略 -->
<div>
    <a href="/Members">Back to List</a>
</div>


        <hr />
        <footer>
            <p>&copy; 2017 - マイ ASP.NET アプリケーション</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/blackword.js"></script>

動作確認手順

1.サーバを起動する。
2.下記のURLからユーザ作成画面に移る。
http://localhost:ポート/Members/Create
3.下記の例のように検証エラーを発生させる。
名前に半角英数字、メールアドレスと認識できない文字を入力、Saveを実行

Answer 1

ブラウザのキャッシュを消去してから試してみたらどうなりますか？

【追記】

キャッシュのせいではないかと言っておいてハズレだったら何なので、Visual Studio 2015 Community のインターネット用のテンプレートを使って、MVC5, .NET 4.6.1 アプリ作って、site.css に以下の CSS を追加して検証してみました。

input.input-validation-error {
    border: 1px solid #e80c4d;
    background-color: #ffeeee;
}

結果は以下の画像（どうしてもここに貼れないので自分のサーバーにアップしてその URL を以下に書いておきます）の通り、検証結果 NG の場合テキストボックスの枠と背景の色が CSS に設定したように変わります。

http://surferonwww.info/BlogEngine/image.axd?picture=2017%2f5%2fmvc5Validation.jpg

ただし、テキストボックスにフォーカスが当たっている場合（上の画像の一番下のテキストボックス）、他のスタイル（たぶん bootstrap.css のもの）が優先的に適用されるようで、枠は青になります。背景の方はフォーカスが当たっているか否かの影響はなく、検証結果 NG で #ffeeee にななります。

Comments

[ikasoumen]

ありがとうございます。
キャッシュをクリアしたところ動作するようになりました。
F5でリロードしてるから読み込まれているだろうと盲目的な思考でした。

なるほど、cssは静的コンテンツだからキャッシュされる？
chromeの開発者ツールのsourcesから読み込まれたcssを確認する方法もありました。
レスポンスヘッダにキャッシュコントールの属性を付与できるらしい。

まだまだ、知らないこといっぱいあるだろうけど、
ひとつモヤモヤが晴れて前へ進めそうです。

[ikasoumen]

ハイライトが更新されない状況を再現しようと思ったら、
今度は、キャッシュをクリアしなくとも、cssが正しく認識されるようになってしまった。

うーん、分からん。
あ、独り言です^^

[退会済みユーザー]

> F5でリロードしてるから読み込まれているだろうと盲目的な思考でした。

F5 キーでリロードした場合、site.css に対する要求の応答には HTTP 304 Not Modified（ヘッダのみでコンテンツは送信しない。ブラウザのキャッシュを使えという指示と同じ）を返すと思います。なので、キャッシュが使われたのでしょう。

Web 開発の基本として、問題が起きたらパケットキャプチャツールを使って要求・応答を見ることをお勧めします。自分的には Fiddler が使いやすいのでお勧めです。Chrome のデベロッパーツールでもキャプチャは可能です。

Fiddler のお勧め
http://surferonwww.info/BlogEngine/post/2011/05/25/Recommendation-of-Fiddler.aspx

[ikasoumen]

Fiddlerですか、なんかハッカーぽいですね。

正直ステータスコードは、200とそれ以外ぐらいにしか思っていなかったので、
この機会にどんなレスポンス返しているのかみてみたいと思います。（Teratailとか）

[退会済みユーザー]

> Fiddlerですか、なんかハッカーぽいですね。

そういうものではなくて、Web アプリの開発ツールとして必須に近いものだと自分は思っているのですが。

今回の例でも、Fiddler で見れば、以下の記事の画像のように 304 応答が返ってきているのは一目でわかったので、解決が早かったのではないかと思います。

http://surferonwww.info/BlogEngine/post/2015/05/19/cache-control-by-using-http-handler.aspx

個人的に特に真価を発揮すると思っているのが、jQuery.ajax を使ってデータをやり取りする場合。

どういうデータが送信されているか、送信先は正しいか、サーバーから応答は帰ってきているか、応答の内容は期待通りか、エラーが出ている場合サーバーから遅れれてきたエラーメッセージの内容はどういうものか・・・等々を調べるのに有用です。

今度またこういう機会があったら使ってみてください。Fiddler 無しでは半日悩むところが、5 分で解決するかもしれません。