web-dev-qa-db-ja.com

ASP.NET MVC 5-現在のビュー名を取得（Razor .cshtml側）

私は学生で、ASP.NET MVCを初めて使用し、ASP.NET Webフォームを使用しています。 （に慣れている）

私はリストを手に入れました：

<ul class="sidebar bg-grayDark">
    <li class="active">
        <a href="@Url.Action("Index", "Home")">
            <span class="mif-home icon"></span>
            <span class="title">Home</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Product")">
            <span class="mif-shop icon"></span>
            <span class="title">Products</span>
            <span class="counter">14</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "Category")">
            <span class="mif-flow-cascade icon"></span>
            <span class="title">Categories</span>
            <span class="counter">9</span>
        </a>
    </li>
    <li class="bg-hover-black">
        <a href="@Url.Action("Index", "User")">
            <span class="mif-users icon"></span>
            <span class="title">Users</span>
            <span class="counter">1</span>
        </a>
    </li>
</ul>

私の目標：どのビューがレンダリングされるかによって、クリックされたに「アクティブ」を追加したいと思います。例：「カテゴリ」をクリックすると、ホームがアクティブなクラスを失い、カテゴリに「アクティブ」が追加されます。 （そして"bg-hover-black"の逆のこと）

実際にレンダリングされたビューをチェックすることでそれを行うことができると思いましたが、それを行う方法がわかりません。 （レンダリングされた実際のビューを確認する方法はわかりませんが、Razorを使用して条件を確認することはできます）

私は最初にJavaScriptで試しました：


    $(function () {
        $('.sidebar').on('click', 'li', function () {
            if (!$(this).hasClass('active')) {
                $('.sidebar li').removeClass('active');
                $(this).addClass('active');
            }
        })
    })

しかし、ページが読み込まれると、HTMLがホームパーツの「アクティブ」で再レンダリングされるため、機能しません。 （ホームの「アクティブ」を削除すると、クリックとページの読み込みの間を除いて、onClickはアクティブになりません）。

何か解決策はありますか？私はウェブでたくさん検索しましたが、私を助けるものは何も見つかりませんでした。

英語の間違いでごめんなさい、私はまだそれを学んでいます:)。

おかげで、

ヘルキャット8。

c#cssasp.netasp.net-mvcrazor
16
Hellcat8

あなたはあなたのページがコントローラにちなんで命名される慣習を使っているので、あなたはこれをかみそりで行うことができてコントローラ/ページ名を取得します：

@{
 var pageName = ViewContext.RouteData.Values["controller"].ToString()
}

<ul class="sidebar bg-grayDark">
    <li class="@(pageName == "Home" ? "active" : "")">
        <a href="@Url.Action("Index", "Home")">
            <span class="mif-home icon"></span>
            <span class="title">Home</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "Product" ? "active" : "")">
        <a href="@Url.Action("Index", "Product")">
            <span class="mif-shop icon"></span>
            <span class="title">Products</span>
            <span class="counter">14</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "Category" ? "active" : "")">
        <a href="@Url.Action("Index", "Category")">
            <span class="mif-flow-cascade icon"></span>
            <span class="title">Categories</span>
            <span class="counter">9</span>
        </a>
    </li>
    <li class="bg-hover-black @(pageName == "User" ? "active" : "")">
        <a href="@Url.Action("Index", "User")">
            <span class="mif-users icon"></span>
            <span class="title">Users</span>
            <span class="counter">1</span>
        </a>
    </li>
</ul>

これにより、ページサーバー側にアクティブクラスが設定され、JavaScriptでこのクライアント側を実行する必要がなくなります。

16
Anish Patel

これが、Razor Pagesプロジェクトの_layout.cshtmlファイルのactiveクラスで装飾された、カスケードされたBootstrapドロップダウンサブメニューの私のアプローチです。

このソリューションの主な要素：

  • _ViewContext.RouteData.Values["page"]_から現在のページルートを取得します。
  • @Url.Action()の代わりにアンカータグヘルパーを使用します。

コード：

_<ul class="nav navbar-nav">
    @{
        String pageRoute = ViewContext.RouteData.Values["page"].ToString();
    }
    <li class="dropdown @( pageRoute.Contains("/CustomerModel/") ? "active" : "" )">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Customer-Model <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="@( pageRoute.Contains("/Customers/") ? "active" : "" )"><a asp-page="/CustomerModel/Customers/Index">Customers</a></li>
            <li class="@( pageRoute.Contains("/Partners/")  ? "active" : "" )"><a asp-page="/CustomerModel/CustomerPermissions/Index">CustomerPermissions</a></li>
        </ul>
    </li>
    <li class="dropdown @( pageRoute.Contains("/StaffModel/") ? "active" : "" )">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff-Model <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li class="@( pageRoute.Contains("/Staff/")              ? "active" : "" )"><a asp-page="/StaffModel/Staff/Index">Staff</a></li>
            <li class="@( pageRoute.Contains("/StaffGroups/")        ? "active" : "" )"><a asp-page="/StaffModel/StaffGroups/Index">StaffGroups</a></li>
            <li class="@( pageRoute.Contains("/PermissionsGroups/")  ? "active" : "" )"><a asp-page="/StaffModel/PermissionsGroups/Index">PermissionsGroups</a></li>
            <li class="@( pageRoute.Contains("/AllowedModules/")     ? "active" : "" )"><a asp-page="/StaffModel/AllowedModules/Index">AllowedModules</a></li>
            <li class="@( pageRoute.Contains("/AllowedServices/")    ? "active" : "" )"><a asp-page="/StaffModel/AllowedServices/Index">AllowedServices</a></li>
        </ul>
    </li>
</ul>
_
3
Jpsy

確認するには：ユーザーがアイテムをクリックしたときにページを変更しています。

このため、JavaScriptは実行されますが、ページ全体が書き直され、最初の状態に戻ります（つまり、マークアップにあるようにHomeがアクティブになります）。

現在のページを確認するには、location.hrefと、次のようなhrefのURLと比較します。

$(function() {
    $("ul.sidebar>li").removeClass("active");  // or just not have active in the markup
    $("li>a[href=" + location.href + "]").closest("li").addClass("active");
});

または、これがより堅牢になる場合は、viewmodelでトークン（string、enum、またはconst）を渡して、次のように確認できます。

<ul class='sidebar'>
    <li data-page='home'...
    ...
    <li data-page='categories'...

その後

$(function() { 
    $("li[[email protected]]").addClass("active")

（または単にマークアップ内...）

    <li data-page='categories' @(Model.PageName == 'Categories' ? "class=active" : "")>
2
freedomn-m

アクティブなアクションまたはコントローラーの名前を取得するには、以下を使用します

var controllerName = ViewContext.RouteData.Values["controller"].ToString();
var actionName = ViewContext.RouteData.Values["action"].ToString();

次のコードを使用して、liのクラスを指定できます。

<li class="@(actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>

または、次のように両方を確認できます。

 <li class="@(controllerName =="Account" && actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>
1
khaled saleh