none
MVC5メニューの作成したドロップダウンが動作しなくなりました RRS feed

  • 質問

  • お世話になります。

    MVCのメニューについてですが、ある時まで正常に動作していたドロップダウンのメニューが動作しなくなりました。

    具体的には、アドレスバーに"/#"が表示されるだけでドロップダウンのメニュ部分が表示(動作)しません。


    下記を確認しました。
    ・サンプルを作成し「_Layout.cshtml」の全部をコピペして動作させると、見事に動作します。
    ・動作しないアプリに空のビューを作成し(下記コードのみ)実行するも結果、動作しない。アドレスバーに"/#"のみ
    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    ・動作しないアプリに別の動作している階層メニュ(ドロップダウンのコードは、同じ仕様)を_Layout.cshtmlの中身すべてコピペして動作させるも結果は同じく動作しない

    上記から、動作しないアプリのメニュー部分を含んだ「_Layout.cshtmlは、多分壊れていない」と判断しましたが、どこがおかしくてドロップダウンメニューが表示しないのかわかりません。
    調べる箇所のアドバイスをご教授いただけないかと投稿しました。よろしくお願いします。

    バンドルは、下記の通りです

            // バンドルの詳細については、http://go.microsoft.com/fwlink/?LinkId=301862  を参照してください
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.unobtrusive*",
                            "~/Scripts/jquery.validate*"));
    
                // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
                // できたら、http://modernizr.com にあるビルド ツールを使用して、必要なテストのみを選択します。
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/bootstrap-datepicker.js",
                          "~/Scripts/locales/bootstrap-datepicker.ja.js",
                          "~/Scripts/respond.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/bootstrap-datepicker.css",
                          "~/Content/site.css"));
            }
    

    VS2015 Windows10 C# MVC5

    2018年7月30日 2:08

回答

  • > <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    > <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

    jQuery が二重定義になってますよ。前の私のレス、

    > 元々デフォルトで jQuery 1.x 系がダウンロードされるような設定になっているところに 3.x を二重定義した?

    を読んでますか? 意味が分かってますか? 二重定義したらダメなんですよ。常識です。もっともっと勉強してください。でないと話が通じません。
    • 回答としてマーク ferret001 2018年8月1日 5:21
    2018年7月31日 7:18
  • 何も反応がなくなってしまいましたが・・・

    > <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    > <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

    というような二重定義にならないように、_Layout.cshtml によってデフォルトでレンダリングされる外部 .css, .js ファイルへの参照設定に配慮して、それでは不足する 外部 .css, .js ファイルとそれへの参照をどう設定すればいいかを考えて、正しくコーディングすれば問題は解決すると思いますよ。

    例えば、質問者さんの言う、

    >「テキストをシングルクリックで選択状態にする」という機能をjQueryで作りました。

    にホントに jquery-3.1.1.js が必要かを考えてみてください。デフォルトで _Layout.cshtml に設定済みの jquery-1.10.2.js でも問題なく動くのでは?

    であでば、_Layout.cshtml を使うだけで何もしなくても(jquery-3.1.1.js は不要、jquery-1.10.2.js だけで)「ドロップダウンのメニュー」(注)も「テキストをシングルクリックで選択状態にする」も動くはず。

    不明点があれば質問してください。

    ギブアップされるならそれでも結構ですので、その旨宣言してください。放置はマナー違反です。

    (注)dropdown-submenue は Bootstrap 3 で削除されたとのです。
    • 回答としてマーク ferret001 2018年8月1日 5:21
    2018年8月1日 3:43

すべての返信

  • > ドロップダウンのメニューが動作しなくなりました。

    「ドロップダウンのメニュー」とは何ですか?

    Visual Studio のソリューションエクスプローラーのことを言ってますか? 質問に貼ってある画像で何を示したいのですか?

    それとも、MVC5 アプリケーションの Html.DropDownList がブラウザに表示されたもののことを言ってますか? であれば、「ドロップダウンのメニュー」を含めて質門者さんの問題を再現できる必要最低限の(あくまで必要最低限の)簡単なサンプルコードを作り、それをアップして、問題を再現できる手順を書いてください。


    2018年7月30日 2:37
  • お世話になります。

    下記のコード内の<ul class="dropdown-menu"・・・という部分があるので、てっきりドロップダウンメニューというのかな?って思っていました。

    階層のメニュー構造を作りたく下記コードで作成していました。

    牡蠣コードを、_Layout.cs.html内へ。 

    <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" }) </div> ここに追加して下さい。

    下記コードが、そのメニュ部分。 <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> サンプル<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li>@Html.ActionLink("Upload", "Upload", "Home")</li> <li>@Html.ActionLink("Autocomplete", "Create", "Home")</li> <li><a href="#">リンクのリスト1</a></li> <li><a href="#">リンクのリスト2</a></li> <li><a href="#">リンクのリスト3</a></li> <li class="dropdown-submenu"> <a tableindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a href="http://google.com">Google</a></li> <li><a href="http://yahoo.com">Yahoo</a></li> </ul> </li> </ul> </li> </ul> </div>


    2018年7月30日 3:02
  • こんにちは。

    想像なのですが、別のコードでJavaScriptのエラーが発生しているために、ドロップダウンを表示させるためのコードが呼び出されていないのでは?と思いました。
    F12でエラーが発生していないか確認できますでしょうか?

    2018年7月30日 6:12
  • お世話になります。

    > F12でエラーが発生していないか確認できますでしょうか?

    F12を押すとエラーと表示されましたので、その部分をアップしました。これで、エラーの個所尾がわかるのでしょうか?

    google chromeを使用しています。
    • 編集済み ferret001 2018年7月30日 7:21 修正
    2018年7月30日 7:19
  • > 下記のコード内の<ul class="dropdown-menu"・・・という部分があるので、てっきりドロップダウンメニューというのかな?って思っていました。

    そのドロップダウンというのは Visual Studio も、ASP.NET MVC も関係ない Bootstrap の機能です。

    でも、bootstrap-datepicker はその「ドロップダウン」の機能には関係なくて、bootstrap.js と bootstrap.css だけで実現できるはずです。実際、VS2015 の MVC のテンプレートには含まれません。

    自分でデフォルトからいろいろ追加して設定をいじったのですか? それはここに書いてあること以外は知り得ない第三者には分かりませんので、そういうことがあればきちんと何をしたのか書きましょう。

    あと、何もしないのに突然ダメになるということは考えにくいので、たぶん、ダメになった原因は質問者さんが作ったのだと思いますか、それも第三者には分かりません。何をしたのか思い出せませんか?

    ・・・と注文を付けるばかりでは何ですので、今提供されている情報で思い当たることを書きます。

    (1) エラーの画像を見ると必要な外部 .js, .css ファイルがダウンロードできてないと推測される。

    (2) 404 Not Found ということはブラウザから要求が出ているが、サーバーは指定されたパスに外部 .js, .css ファイルが見つからないと言う応答を返している。すなわち、html ソースに <link href="xxx" ...  <script src="yyy" ... という要素は存在するが、xxx, yyy にファイルがない。

    (3) 別にサンプルを作って試すと問題ないということなので、.js, .css ファイルはサーバーに存在するはず。

    (4) ということは指定されたパス xxx, yyy が間違っている。

    ということで、(4) を確認してみてください。

    【追伸】

    エラーメッセージをみると bootstrap-datepicker と書いてありますね。そこがダメなのに引っ張られて bootstrap 本体の方もダメになっているのかもしれません。一緒にバンドルされる設定になっているので。そこも調べてみてください。

    ひょっとして、

    > ある時まで正常に動作していたドロップダウンのメニューが動作しなくなりました。

    の「ある時まで」というのは、質問者さんが bootstrap-datepicker を追加する前までだったとかいうことはありませんか?

    • 編集済み SurferOnWww 2018年7月31日 1:28 追伸追加
    2018年7月31日 1:15
  • お世話になります。

    > エラーメッセージをみると bootstrap-datepicker と書いてありますね

    その辺りなど調べたり、コメントアウトして試していますが、まだ、解決には至りません。

    少し思い出したこととがあって、それは、「テキストをシングルクリックで選択状態にする」という機能をjQueryで作りました。

    その辺りかもしれないのですが、はっきり覚えていません。

    現在、吐かれているエラーで、jQuery-3.1.1.jsという表示が多くあり、追加したjQueryもjQuery-3.1.1を使っています。

    もしかして、datepickerがそのファイルを読みに行って「ない」というエラーでしょうか?

    コード

    <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    
    <script>
            $('div.text-select-class').on('click', function (e) {
                //e.preventDefault();
                select_all(this);
                var divJQ = $(this);
                var text = divJQ.text();
                //alert(text);
            });
    
            function select_all(el) {
                if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
                    var range = document.createRange();
                    range.selectNodeContents(el);
                    var sel = window.getSelection();
                    sel.removeAllRanges();
                    sel.addRange(range);
                } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
                    var textRange = document.body.createTextRange();
                    textRange.moveToElementText(el);
                    textRange.select();
                }
            }
    </script>
    
       
         <div class="text-select-class">
                   @Html.DisplayFor(modelItem => item.Data)
         </div>
    

    • 編集済み ferret001 2018年7月31日 5:57 追加
    2018年7月31日 5:55
  • お世話になります。

    どうやら、今回の犯人は、「jquery-3.1.1.js」だったようです。

    このファイルを、とりあえず他のフォルダーへ移動して読めないようにして起動するとメニューが表示されるようになりました。

    当然ながら、「シングルクリックでテキスト全選択」の機能は使えなくなりました。

    これに気づいたのは、jQueryやJavascriptのファイルを不空読み込むと不具合を起こしたりする・・・

    という書き込みがあったのでもしかしてと思い外しました。

    でも・・

    実現

    する方法はないのでしょうか?

    2018年7月31日 6:18
  • 私のレス、

    > (4) ということは指定されたパス xxx, yyy が間違っている。

    > ということで、(4) を確認してみてください。

    に対する答えは? 問題あるケース/ないケースで html ソースを見て違いを調べてみましたか?

    2018年7月31日 6:22
  • > どうやら、今回の犯人は、「jquery-3.1.1.js」だったようです。

    jQuery がないと Bootstrap が動かないはず。

    元々デフォルトで jQuery 1.x 系がダウンロードされるような設定になっているところに 3.x を二重定義した?

    何かメチャクチャという感じ


    • 編集済み SurferOnWww 2018年7月31日 6:34 追記
    2018年7月31日 6:29
  • お世話になります。

    うまく説明できないようで、申し訳ありません。

    ページごとに4つ前のコード(シングルクリックでテキスト選択)を書いていたのですが、

    <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>

    この部分も毎ページに書いていました。それを、_Layout.cshtmlに移動して

        <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    

    としたら、メニューやシングルクリックでテキスト選択がうまくいくようになりました。

    ただ、日付が出なくなりました。もう少し調べてみます。

    2018年7月31日 6:40
  • > <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    > <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

    jQuery が二重定義になってますよ。前の私のレス、

    > 元々デフォルトで jQuery 1.x 系がダウンロードされるような設定になっているところに 3.x を二重定義した?

    を読んでますか? 意味が分かってますか? 二重定義したらダメなんですよ。常識です。もっともっと勉強してください。でないと話が通じません。
    • 回答としてマーク ferret001 2018年8月1日 5:21
    2018年7月31日 7:18
  • 何も反応がなくなってしまいましたが・・・

    > <script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
    > <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

    というような二重定義にならないように、_Layout.cshtml によってデフォルトでレンダリングされる外部 .css, .js ファイルへの参照設定に配慮して、それでは不足する 外部 .css, .js ファイルとそれへの参照をどう設定すればいいかを考えて、正しくコーディングすれば問題は解決すると思いますよ。

    例えば、質問者さんの言う、

    >「テキストをシングルクリックで選択状態にする」という機能をjQueryで作りました。

    にホントに jquery-3.1.1.js が必要かを考えてみてください。デフォルトで _Layout.cshtml に設定済みの jquery-1.10.2.js でも問題なく動くのでは?

    であでば、_Layout.cshtml を使うだけで何もしなくても(jquery-3.1.1.js は不要、jquery-1.10.2.js だけで)「ドロップダウンのメニュー」(注)も「テキストをシングルクリックで選択状態にする」も動くはず。

    不明点があれば質問してください。

    ギブアップされるならそれでも結構ですので、その旨宣言してください。放置はマナー違反です。

    (注)dropdown-submenue は Bootstrap 3 で削除されたとのです。
    • 回答としてマーク ferret001 2018年8月1日 5:21
    2018年8月1日 3:43
  • お世話になります。

    > jQuery が二重定義になってますよ

    おっしゃる通り2重が原因のようです。

    この2重による副作用が・・・というのを自分なりにググって読み漁っていたので遅くなりました。

    > jquery-3.1.1.js が必要かを考えてみてください

    は、なくてもメニューやシングルクリックでテキスト選択はうまくいくことが確認できました。

    ただ、日付選択の

       <script type="text/javascript">
            $(function () {
                $('.datepicker').datepicker({
                    autoclose: 'true',
                    format: 'yyyy-mm-dd',
                    language: 'ja',
                    todayHighlight: true
                });
            })
        </script>

    が動作しないので、

    2重だったので、<script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>を削除したことによる弊害か、別の理由か調査中です。JQueryのトラブルの対処法がよくわからないので、時間がかかってしまいます。

    > 放置はマナー違反です。

    お世話になっているので、そのようなことはしません。今後ともよろしくお願いします。

    2018年8月1日 4:06
  • > ただ、日付選択の
    >   <script type="text/javascript">
    >        $(function () {
    >            $('.datepicker').datepicker({
    >                autoclose: 'true',
    >                format: 'yyyy-mm-dd',
    >                language: 'ja',
    >                todayHighlight: true
    >            });
    >        })
    >    </script>
    > が動作しないので、

    そのスクリプトを書く位置の問題、すなわち jquery.js や bootstrap-datepicker.js の読み込みが終わる前に上記のスクリプトが動くように書かれているから動作しないのでは?

    _Layout.cshtml を使っているなら、View に @section Scripts { ... } を追加してその中に書いたらどうなりますか?
    2018年8月1日 4:49
  • お世話になります。

    日付も何とか表示できるようになりました。

    ここを参照「https://oki2a24.com/2015/10/21/use-datepicker-for-bootstrap-asp-net-mvc5/

    ありがとうございました。

    2018年8月1日 5:20