当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから
お問い合わせ 無料トライアル

Document

ドキュメント

ナビゲーションメニューの作成

最終更新日:

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース

このチュートリアルの前のステップでは、データベースからページデータを取得してライブサイトに表示する機能を実装しました。このステップでは、コンテンツ編集者がウェブサイトのナビゲーションを管理できるように、ダイナミックメニューをコード化します。

ウェブサイトのナビゲーションは、サイトのコンテンツやその他の様々な要件に基づいて頻繁に変更される傾向があります。ページタイプのナビゲーションアイテム機能により、コンテンツ編集者は個々のページのメニューに表示するフラグを設定することができ、コンテンツツリーのどのページをナビゲーションメニューに表示するかを制御することができます。

MVCアプリケーションのコードの側では、メニュー内表示フラグに基づいてページデータを取得し、メニューの表示、デザイン、動作を処理する必要があります。このダイナミックなアプローチにより、サイトのコードを調整したり再展開したりする必要がなく、編集者はナビゲーションメニューの項目をコントロールすることができます。

以下について説明します：

  • メニュー項目のビューモデルの作成

  • メニューコントローラーの作成

  • ナビゲーションメニュービューの作成

  • ウェブサイトのレイアウトを更新する

メニュー項目のビューモデルの作成

  1. Visual Studioで、Modelsフォルダ内に新しいMenuサブフォルダを作成します。

  2. Menuサブフォルダを選択し、新しいMenuItemViewModelクラスを追加します。

  3. 以下のコードを使用して、ビューモデルのプロパティを定義します。

    
namespace MEDIOClinic.Models
{
    public class MenuItemViewModel
    {
        // Defines the properties of the MenuItem view model
        public string MenuItemText { get; set; }
        public string MenuItemRelativeUrl { get; set; }
    }
}

  4. 変更を保存します。

    メニューコントローラの作成

コントローラクラスは、サイトのナビゲーションメニューの内容をロードして表示するGetMenuアクションを定義します。このアクションはメニューデータを取得し、ビューに渡されるモデルのコレクションに整理します。

  1. コントローラフォルダ内に新しいMenuControllerクラスを作成します。

  2. デフォルトのコードを以下のように置き換えます。

    
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
​
using CMS.Core;
using CMS.DocumentEngine;
​
using Kentico.Content.Web.Mvc;
​
using MEDIOClinic.Models;
​
namespace MEDIOClinic.Controllers
{
    public class MenuController : Controller
    {
        private readonly IPageRetriever pageRetriever;
        private readonly IPageUrlRetriever urlRetriever;
​
        public MenuController()
        {
            // Initializes instances of required services
            // NOTE: This method of instantiating services is not recommended for
            // real-world projects and is only used for the sake of brevity in this tutorial.
            // Instead, we recommend configuring a dependency injection container to resolve
            // object dependencies (e.g., Autofac). See the Xperience documentation for details.
            pageRetriever = Service.Resolve<IPageRetriever>();
            urlRetriever = Service.Resolve<IPageUrlRetriever>();
        }
​
        // GET: Loads and displays the site's navigation menu
        public ActionResult GetMenu()
        {
            // Retrieves a collection of page objects with data for the menu (pages of all page types)
            IEnumerable<TreeNode> menuItems = pageRetriever.Retrieve<TreeNode>(query => query
                                                    // Selects pages that have the 'Show in menu" flag enabled
                                                    .MenuItems()
                                                    // Only loads pages from the first level of the site's content tree
                                                    .NestingLevel(1)
                                                    // Filters the query to only include necessary columns
                                                    .Columns("DocumentName", "NodeID", "NodeSiteID")
                                                    // Uses the menu item order from the content tree
                                                    .OrderByAscending("NodeOrder"));
​
            // Creates a collection of view models based on the menu item data
            IEnumerable<MenuItemViewModel> model = menuItems.Select(item => new MenuItemViewModel()
            {
                // Gets the name of the page as the menu item caption text
                MenuItemText = item.DocumentName,
                // Retrieves the URL for the page (as a relative virtual path)
                MenuItemRelativeUrl = urlRetriever.Retrieve(item).RelativePath
            });
​
            return PartialView("_SiteMenu", model);
        }
    }
}

  3. 変更を保存します。

このコードは、Xperience DocumentQuery APIを使用して、すべてのページタイプのページデータを取得します。DocumentQueryは、SQLデータベース上に抽象化されたレイヤーを提供し、ページ データの取得方法を調整する追加メソッドを呼び出すことができます。

たとえば、OrderByメソッドでは、取得されるデータ項目の順序を設定し、Columnsメソッドでは、基礎となるSQLクエリが必要なデータ列のみをロードするようにします。パフォーマンス上の理由から、すべてのデータ検索APIコールでカラムを制限することを強くお勧めします。

詳細はドキュメントを参照してください。APIでのページの操作」を参照してください。

ナビゲーションメニューの作成

ナビゲーションメニューは、ウェブサイトのほとんどのページに表示される要素です。このため、メニューの出力を部分ビューで定義し、それをサイトのメインレイアウトに追加することができます（必要に応じて他のページのビューにも追加することができます）。

  1. MenuController で GetMenu メソッドを右クリックし、Add View を選択します。

  2. 以下の値を入力します。

    • View name: _SiteMenu

    • Template: Empty (without model)

    • Create as a partial view: Yes (selected)

  3. ビューのコードで、MEDIOClinic.Modelsネームスペースのusing文を追加します。

  4. modelディレクティブを追加し、型をMenuItemViewModelのIEnumerableコレクションとして指定します。

  5. <nav>要素内のHTMLリンクをレンダリングすることでメニュー出力を定義します（メニュー項目のURLとモデルからのテキスト値を使用します）。部分ビューのコードは次のようになります。

    
@using MEDIOClinic.Models;
​
@model IEnumerable<MenuItemViewModel>
​
<nav>
    @foreach (MenuItemViewModel menuItem in Model)
    {
        @* Iterates through the view model collection and renders HTML links for the menu items *@
        <a href="@Url.Content(menuItem.MenuItemRelativeUrl)" title="@menuItem.MenuItemText">@menuItem.MenuItemText</a>
    }
</nav>

  6. 変更を保存します。

ウェブサイトのレイアウトを更新する

ナビゲーションメニューの背後にある機能をコーディングしました。このコードを使って、サイトのレイアウトにメニューを追加してみましょう。

  1. あなたの _Layout.cshtml ファイルを編集します (Views/Shared フォルダにあります)。

  2. <nav>タグで定義されているセクションを見つけ、それをHtml.Action Razorコールに置き換えてください。Menu コントローラの GetMenu アクションを呼び出します。

  3. MEDIOクリニックのロゴを表示する<header>セクションの<a>要素を探し、href属性の値を「~/」に設定します。

    チルダ文字とフォワードスラッシュ (/) は、Medioクリニックのロゴリンクがウェブサイトのルートページをターゲットにしていることを明示します。

最終的な _Layout.cshtml マークアップは次のようになります。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    @* Dynamically resolves the page's title *@
    <title>Medio Clinic - @ViewBag.Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    @Styles.Render("~/Content/css")
    @* Razor section for additional page-specific styles *@
    @RenderSection("styles", required: false)
</head>
<body>
    <header>
        <div class="col-sm-offset-3 col-sm-6">
            <div class="col-sm-6">
                @* Targets the root page of the website *@
                <a href="~/" title="MedioClinic homepage" class="logo">MEDIO clinic</a>
            </div>
            <div class="col-sm-6 nav">
                @* Loads the partial view with the navigation menu, including the <nav> element *@
                @Html.Action("GetMenu", "Menu")
            </div>
        </div>
        <div class="clearfix"></div>
    </header>
    @* Loads the content of your Tutorial's pages as sub views *@
    @RenderBody()
    <footer>
        <div class="col-sm-offset-3 col-sm-6">
            <div class="row">
                <div class="col-sm-6">
                    <h4>MEDIO clinic</h4>
                    <ul>
                        <li><i class="fa fa-map-marker"></i> Address: <address>7A Kentico street, Bedford, NH 03110, USA</address></li>
                        <li><i class="fa fa-envelope-o"></i> E-mail: <a href="mailto:info@medio-clinic.com" title="Email us">info@medio-clinic.com</a></li>
                        <li><i class="fa fa-phone"></i> Phone number: <a href="tel:5417543010" title="Phone us">(541) 754-3010</a>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="cms">Powered by <a href="http://www.kentico.com" title="Kentico CMS">Kentico CMS for ASP.NET</a></span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </footer>
    @* Razor section for additional page-specific scripts *@
    @RenderSection("scripts", required: false)
</body>
</html>

あなたのプロジェクトを構築し、ライブサイトのウェブサイト上でナビゲーションメニューをテストします。元のレイアウトにはすでにハードコードされた HTML リンクが含まれていたため、ライブサイトでは違いがわかりません。しかし、Xperience 管理インターフェイス（Pages アプリケーション）に別のページを追加したり、ホームと医療センターの項目の順序を変更したりして、メニューの動的機能をテストすることができます。作成した実装では、メニュー項目の変更があった場合、ナビゲーション・メニューに即座に表示されます。

エクスポートされた MEDIO clinic MVC ウェブサイトと MEDIOClinic プロジェクトファイルをダウンロードできます。サンプルソリューションとご自身の実装を比較するには、ウェブサイトをサイトアプリケーションの Xperience インストールにインポートするか、Visual Studio で MVC アプリケーションのコードを表示してください。

前のページ： ページコンテンツの表示 — 次のページ： Xperience開発の次のステップ

完成したページ： 9/10