MVC 4 での Wijmo の操作

MVC Classicを使用する場合、次の２つのアプリケーションを選択できます。標準の Visual Studio ASP.NET MVC 4 Web アプリケーションを使用するか、当社の Wijmo 向けに最適化された ASP.NET MVC 4 Wijmo インターネットアプリケーションを使用することができます。 ASP.NET MVC 4 Wijmo インターネットアプリケーション（「MVC Classic プロジェクトの作成」を参照）は、そのデフォルトの UI に Wijmo コントロールを使用し、必要な Wijmo アセンブリはアプリケーションの _Layout.cshtml ページで参照済みです。Wijmo ウィジェットは、常に Views フォルダにある１つまたは複数のビュー（.cshtml ファイル）の下に追加されます。 MVC 4 ビューに関するいくつかの基礎を復習しておくと便利です。

ビューがユーザーに表示される前に、コントローラーでビューの return View() ステートメントが実行されます。そのビューのレイアウト、実際にはプロジェクトにあるすべてのビューのレイアウトは _ViewStart.cshtml で指定されています。 _ViewStart.cshtml ファイルは Views フォルダのルートにあります。_ViewStart.cshtml ファイルを開くと、次の Razor 構文があるのがわかります。

ソースビュー	コードのコピー
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }

プロジェクト全体のレイアウトの一部として Wijmo ウィジェットを表示する場合は、このページにウィジェットの HTML 要素を追加し、それを初期化することができます。実際、ASP.NET MVC 4 Wijmo インターネットアプリケーションでは、いくつかのウィジェットがその _Layout.cshtml ファイルですでにレイアウトされています。

特定のビューにウィジェットを表示する場合は、そのビューを開き、そのページにウィジェットの HTML 要素を追加し、jQuery を使用してそれを初期化します。たとえば、最初のページにメニューを表示する場合は、次のマークアップとスクリプトを _Index.cshtml ファイルに追加するだけです。

ソースビュー	コードのコピー
<body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("MVC アプリケーション", "Index", "Home")</p> </div> <div class="float-right"> <nav> <ul id="menu"> <li>Hello</li> <li>World</li> </ul> <script type="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); }); </script> </nav> </div> </div> </header> </body>

ソースビュー

コードのコピー

<body>
 <header>
   <div class="content-wrapper">
    <div class="float-left">
<p class="site-title">@Html.ActionLink("MVC アプリケーション", "Index", "Home")</p>
</div>
<div class="float-right">
<nav>
                <ul id="menu">
                    <li>Hello</li>
                    <li>World</li>
                </ul>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#menu").wijmenu();
                });
    </script>
</nav>
</div>
</div>
</header>
</body>

このように簡単に行えます.