MVCフレームワーク-レイアウト

MVCではレイアウトを使用して、アプリケーションのすべてのページで一貫したルックアンドフィールを提供します。マスターページの定義と同じですが、MVCにはさらに多くの機能があります。

MVCレイアウトを作成する

ステップ1 *-インターネットアプリケーションをテンプレートとしてサンプルMVCアプリケーションを作成し、Webアプリケーションのルートディレクトリにコンテンツフォルダーを作成します。

新しいコンテンツフォルダーの追加

ステップ2 *-CONTENTフォルダーの下にMyStyleSheet.cssという名前のスタイルシートファイルを作成します。このCSSファイルには、一貫したWebアプリケーションページデザインに必要なすべてのCSSクラスが含まれます。

新しいCSSを作成

新しいCSS 1を作成

ステップ3 *-ビューフォルダーの下に共有フォルダーを作成します。

共有ビューフォルダー

共有ビューフォルダ1

ステップ4 *-共有フォルダーの下にMasterLayout.cshtmlファイルを作成します。ファイルMasterLayout.cshtmlは、アプリケーションの各ページのレイアウトを表します。ソリューションエクスプローラーで共有フォルダーを右クリックし、[アイテムの追加]に移動して[表示]をクリックします。次のレイアウトコードをコピーします。

MVCマスターレイアウト

レイアウトコード

<!DOCTYPE html>

<html lang = "en">
   <head>
      <meta charset = "utf-8"/>
      <title>@ViewBag.Title - Tutorial Point</title>
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon"/>
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")"/>
   </head>

   <body>
      <header>

         <div class = "content-wrapper">
            <div class = "float-left">
               <p class = "site-title">
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p>
            </div>

            <div class = "float-right">
               <nav>
                  <ul id = "menu">
                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul>
               </nav>
            </div>
         </div>

      </header>
      <div id = "body">
         @RenderSection("featured", required: false)
         <section class = "content-wrapper main-content clear-fix">
            @RenderBody()
         </section>
      </div>

      <footer>
         <div class = "content-wrapper">
            <div class = "float-left">
               <p>© @DateTime.Now.Year - Tutorial Point</p>
            </div>
         </div>
      </footer>

   </body>
</html>

このレイアウトでは、HTMLヘルパーメソッドと他のシステム定義のメソッドを使用しているため、これらのメソッドを1つずつ見ていきましょう。

* Url.Content（）*-このメソッドは、Viewコードで使用しているファイルのパスを指定します。入力として仮想パスを取り、絶対パスを返します。
* Html.ActionLink（）*-このメソッドは、一部のコントローラーのアクションにリンクするHTMLリンクをレンダリングします。最初のパラメーターは表示名を指定し、2番目のパラメーターはアクション名を指定し、3番目のパラメーターはコントローラー名を指定します。
* RenderSection（）*-テンプレート内のその場所に表示するセクションの名前を指定します。
* RenderBody（）*-関連するビューの実際のボディをレンダリングします。

ステップ5 *-最後に、Viewsフォルダー内の_ViewStart.cshtmlファイルを開き、次のコードを追加します-

@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

ファイルが存在しない場合は、この名前でファイルを作成できます。

ステップ6 *-今すぐアプリケーションを実行して、変更されたホームページを表示します。

MVCマスターレイアウト

Mvc-framework-layouts

MVCフレームワーク-レイアウト

MVCレイアウトを作成する

レイアウトコード