ASP.NET MVC5 でjQueryが反映されない

お世話になっております。

HTMLでは動作したモーダルがASP.NET MVCでは動作しないため、質問を投稿しました。

回答に当たって情報の欠如等がありましたら加筆等もしますので、よろしくお願いします。

実現したいこと

jQueryがViewで使えるようになることを実現したいです。

発生している問題・エラーメッセージ

今回でいうと、親画面をクリックするとモーダルが表示されるようにしたいです。
しかし、現在、jQueryが反映されておらず、モーダル部分が初めから<body>上部に全件表示されてしまいます。

該当のソースコード

viewは必要そうな部分のみはっています

c#
1<head>
2    <meta charset="UTF-8">
3    <meta http-equiv="X-UA-Compatible" content="IE=edge">
4    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
5    <meta name="Keywords" content="">
6    <title>設定</title>
7    <script src="@Url.Content("~/Scripts/js/jquery-3.3.1.min.js")" type="text/javascript"></script>
8
9    <!--[if lt IE 9]-->
10    <script src="@Url.Content("~/Scripts/js/html5shiv.min.js")"></script>
11    <!--[endif]-->
12    @Scripts.Render("~/bundles/modernizr")
13    @Scripts.Render("~/bundles/jquery")
14</head>
15<body>
16                            <!--モーダル要素-->
17
18                            <div id="master_m17" class="modal01" title="作業開始時間時間編集">
19                                <div class="m_contents clearfix">
20                                    <form>
21                                        <div class="contents clearfix">
22                                            <p>No.</p>
23                                            <p><input type="text" name="sort" class="ten_key" required></p>
24                                            <p>作業開始時間</p>
25                                            <p><input class="timepick4" name="start_of_work2"></p>
26                                        </div>
27                                        <div class="Mbtn clearfix">
28                                            <p class="delBtn"><a href="#">削除</a></p>
29                                            <p class="regbtn"><a href="#">保存</a></p>
30                                        </div><!--/#Mbtn-->
31                                    </form>
32                                </div>
33                            </div><!--/#master_m17-->
34                            <!--/モーダル要素-->
35</body>
36

ファイル構造も縦幅的に行けそうなとこまで載せます
(ソースコード中のパスは間違っていないはずです)

試したこと

・パッケージマネージャーコンソールで次のようなコマンドを入力しました。
PM> Install-Package query.UI.Combined

・ファイルの位置に問題があるのではないかと思い、Scriptsフォルダと同じ高さにjsフォルダを移動してみもしましたが結果は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

VS2017
Windows7
.Net Framework 4.6.1
MVC5

退会済みユーザー

2018/09/19 12:09

モーダルって何ですか？　もともとの ASP.NET MVC5 にはそのような機能はありませんから、質問者さんが何か追加したんでしょ？　それを書かないと誰も分かりません。

退会済みユーザー

2018/09/19 12:23

m.ts10806

2018/09/19 13:40

各種jsファイルはブラウザから参照できる場所なのでしょうか。

pomu.pomupomu

2018/09/20 00:26

モーダルはjQueryのプラグインを用いたダイアログとも呼ばれるUIのことだと思っています。　各種jsファイルが参照できるかはわからないのですが、SuferOnWwwさんのおっしゃる通り、 <script src="@Url.Content( ... >の書き方が間違っていて反映されていないのではないかというところまでたどり着きました。ありがとうございます。

pomu.pomupomu

2018/09/20 00:27

(ただ、ASP.NET mvc でモーダルを用いている先駆者を見ていると参照できる場所に置いてあると考えています。)

退会済みユーザー

2018/09/20 02:40

> モーダルはjQueryのプラグインを用いたダイアログとも呼ばれるUIのことだと思っています。 ← だからそのプラグインが何かと聞いたのですけど。jQuery UI, Bootstrap その他多々あります。当然使う .js ファイルも異なるので、プラグインが何かわからないと話にが始まらないです。質問者さん自身も何だか分からないようですが、それではここのような掲示板では話にならないと認識してください。

退会済みユーザー

2018/09/20 02:47

> <script src="@Url.Content( ... >の書き方が間違っていて反映されていないのではないかというところまでたどり着きました。 ← その書き方は MVC3 以前のものです。MVC4 で新機能として、JavaScript/CSS ファイルの縮小化と結合処置の自動化機能が導入され、MVC5 でもそれを利用します。 https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification を読んでください。質問者さんのコードの @Scripts.Render("~/bundles/jquery") というのがその一部です。つまりゴッチャになってます。だからダメなんです。きちんと基本を勉強して理解してから質問してください。

行動規範の内容に同意します

回答1件

ベストアンサー

「jQueryが反映されていない」という前提の原始的なアドバイスしか言えませんが、
まず、scriptタグで読み込んでいるつもりのjs達が、本当に読み込まれているかalertやconsole.log等を読み込んでいる各jsに挿入して確認してみてはどうでしょう。
（console.logなど挿入したまま公開してしまうとライセンス的に問題があったりしますのでそこはご注意ください。）

そこから本現象を確認するための必要最低のjsだけ読み込ませるなど、極力シンプルにした状態でどこからjQueryが効いているか切り分けをしていくと原因にたどり付きやすいかと思います。

経験上、そもそもjsを読み込めていないか、同居できないjsのプラグイン同士が衝突し、読み込み順的にあと勝ち状態になってるような気がします。

投稿2018/09/19 15:35

s-hama

総合スコア54

pomu.pomupomu

2018/09/20 01:27 編集

回答ありがとうございます。確認して見たところ、 <script src="@Url.Content( ... > で記述されたスクリプトタグ @Scripts.Render("~/bundles/modernizr") で記述されたスクリプトタグそもそもどちらも反映されておらず、<script src="/Scripts/modernizr-2.6.2.js"></script>というものだけがなぜか現在のView画面(Create.cshtml)以外のどこかから読み込まれており、そもそも全てのスプリクトタグが読み込まれていないことがわかりました。原因までたどり着くためのアドバイスありがとうございました。書いているのにそもそもブラウザ側にタグ自体が送られていないとは思ってもいなかったので、助かりました。本当にありがとうございます。 (また、console.logのライセンス問題について知りませんでした。気をつけます！)

行動規範の内容に同意します