質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    19871questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ASP.NET

    608questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

リンクをクリックしたときに、左のメニューを制御したいです

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 598

cancat

score 239

こんにちは。
Windows10でASP.NET MVCのアプリケーションを開発しています。
Visual Studio 2017 Communityを使っています。

前提・実現したいこと

データベースからリストしたリンクをクリックしたときに、左のメニューが、予期せぬメニューに移動します。
これを修正したいです。

試したこと

(1)データベースから、User一覧を取得し、_Main.cshtmlに展開して、リンクとして表組しました。
(2)リンクをクリックすると、dashboardのページを開きます。
(3)ところが、左に表示しているメニューが、ダッシュボードではなく、サポートのところになってしまっています。

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

データベースからリストしたリンクをクリックしたときに、左のメニューが、予期せぬメニューに移動します。

該当のソースコード

_LeftMenu.cshtml
       <ul class="sidebar-menu">
       @*ダッシュボード*@   @Html.Partial("_LeftMenuContentDashboard")
       @*ユーザー*@           @Html.Partial("_LeftMenuContentUser")
       @*サポート*@           @Html.Partial("_LeftMenuContentSupport")
       @*マニュアル*@       @Html.Partial("_LeftMenuContentManual")         
       </ul>
Userの_Main.cshtml
 @Html.RouteLink(
           @Html.DisplayFor(modelitem => Model.UsersData[i].UserId),                              new {      Controller = "Dashboard",                  Action = "Index",
              userid = @Html.DisplayFor(modelitem => Model.UsersData[i].UserId)
      })


これでリンクはできています。クリックでDashboardに遷移します。

_LeftMenuContentDashboard.cshtml
@using MyApp.App_GlobalResources
<li class="treeview">
   <a href="/Dashboard/Index">
       <i class="fa fa-dashboard" style="font-size: 18px"></i>
       <span style="padding-left: 20px">ダッシュボード</span>
   </a>
</li>


これが左メニューのダッシュボードのところ。部分ビューです。
このダッシュボードをクリックすると、ダッシュボードのところが反転して選択していることがわかります。

   $(document).ready(function () {
       var buttonExport = document.getElementsByClassName("highcharts-button");
       if (buttonExport.length > 0) {
      $(buttonExport).click(function () { $('.highcharts-contextmenu > div > div').first().html("@Resource.ExportButtonTitle") });
   }
       SetMainMenuFocus();
   });
   function myFunction() {
       document.getElementById("hideTreeView1").style.display = 'none';
       document.getElementById("hideTreeView2").style.display = 'none';
       document.getElementById("hideTreeView3").style.display = 'none';
   }
   /* Menu */
   function SetMainMenuFocus() {
       if (document.location.href == (document.location.protocol + '//' + document.location.hostname + '/')
           || document.location.href.lastIndexOf("Top") > -1) {
       OpenParent($("ul.sidebar-menu > li.treeview").first());
       return;
       }
       var currentUrl = document.location.pathname;
       var link = $("ul.sidebar-menu > li.treeview > ul.treeview-menu > li > aside.left-side > a");
       var isMatchLink = null;
       if (link != null) {
       $.each(link, function () {
           var href = $(this).attr('href');
           if (href != null && href != '' && (IsmatchUrl(currentUrl, href) || IsmatchUrl(href, currentUrl))) {
               isMatchLink = $(this);
               return true;
           }
       });
   if (isMatchLink == null) {
       $.each(link, function () {
           var href = $(this).attr('href');
           var currentUrl_Index;
           if (currentUrl.lastIndexOf("/") == currentUrl.length - 1) {
               currentUrl_Index = currentUrl + "Index";
           } else {
               currentUrl_Index = currentUrl + "/Index";
           }
           if (href != null && IsmatchUrl(currentUrl_Index, href)) {
               isMatchLink = $(this);
               return true;
           }
       });
   }
           if (isMatchLink != null) {
               var parent = isMatchLink.closest('ul.treeview-menu');
               while (parent != null && (parent.is("ul") || parent.is('li'))) {
       OpenParent(parent);
       parent = parent.parent();
               }
           }
           $.each(link, function () {
       $(this).children('div.menu-item').removeClass('menu-item-hover');
   });
           isMatchLink.children('div.menu-item').addClass('menu-item-hover');
       }
   }
   function OpenParent(element) {
       if (element != null) {
           if (element.is('li')) {
       element.addClass("active");
   }
           else if (element.is("ul")) {
       element.css("display", "block");
   }
       }
   }
   function IsmatchUrl(compairWithUrl, toCompairUrl) {
       if (compairWithUrl.indexOf(toCompairUrl) > -1) {
           return true;
       }
       return false;
   }


メニューのJavaScript。全文。ひょっとして、これのどこかで設定するのでしょうか?
まえのJavascriptの質問と併せて考えると、

   function OpenParent(element) {
       if (element != null) {
           if (element.is('li')) {
       element.addClass("active");
   }
           else if (element.is("ul")) {
       element.css("display", "block");
   }
       }
   }


が濃厚です。
これがメニュー全部で走るので、最後の項目がactiveになるのではないか。
とすると、いま表示したいメニュー(ダッシュボード)を引数で与えて、それとマッチしたとき、と書けばよいのでは。
C#ならかんたんで、
ダッシュボードをtargetstringに入れるとすると、

   function OpenParent(element, string targetstring) {
       if (element != null) {
           if (element.is('li') && element.Contains(targetstring)) {
       element.addClass("active");
   }
           else if (element.is("ul")) {
       element.css("display", "block");
   }
       }
   }


でよいはずなのですが・・・・。
書いてみました。これで、
例外 下記ソースコードの行 75、列 9 で発生しました。http://localhost:0000/Scripts/sidemenu.js
0x8000ffff - JavaScript runtime error: オブジェクトの呼び出しが無効です が発生しました
とのことです。
keywordには、Dashboardという文字を入れています。

function OpenParent(element, keyword) {
   if (element != null) {
       try {
           if (element.is('li') &&
               -1 < element.context.__proto__.pathname.indexOf(keyword)//<--この行でエラー。
           ) {
               element.addClass("active");
           }
           else if (element.is("ul")) {
               element.css("display", "block");
           }
       }
       catch (e) {
           error = e;
       }
   }
}

補足情報(言語/FW/ツール等のバージョンなど)

Microsoft Visual Studio Community 2017
Version 15.0.26228.9 D15RTWSVC
Microsoft .NET Framework
Version 4.6.01586
です。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2017/04/28 19:14

    補足願います。①このjavascriptは質問者が書いたのですか? ②HTMLはフレームで構成されていますか?

    キャンセル

  • 退会済みユーザー

    2017/10/31 10:11

    複数のユーザーから「意図的に内容が抹消された質問」という意見がありました
    解決後に編集機能を用いて質問内容を改変し関係のない内容にしたり、内容を削除する行為は禁止しています。
    投稿していただいた質問は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。
    「質問を編集する」ボタンから編集を行い、他のユーザにも質問内容が見えるように修正してください。

まだ回答がついていません

同じタグがついた質問を見る

  • JavaScript

    19871questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • ASP.NET

    608questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。