ASP.NET Core入門教程6、ASP.NET Core MVCビューレイアウト入門

5977 ワード
asp.net core .net core
一、前言
1、この教程の主な内容
  • ASP.NET Core MVC(Razor)ビューマスターページチュートリアル
  • ASP.NET Core MVC(Razor)Section付きビューマスターページチュートリアル
  • ASP.NET Core MVC(Razor)ビューグローバルコード(_ViewStart.cshtml)チュートリアル
    • 2、このチュートリアルの環境情報
    ソフトウェア/環境
    説明
    オペレーティングシステム
    Windows 10
    SDK
    2.1.401
    ASP.NET Core
    2.1.3
    IDE
    Visual Studio Code 1.28
    エクスプローラ
    Chrome 70
    このコードは以下のコードで調整されます.https://github.com/ken-io/asp...
    3、準備
    VSコード自体はASPを提供する.NET Core MVCビューエンジン(Razor)の知能感知.幸いなことに、VS Code C#拡張は1.17.0バージョンからRazorビューエンジンのインテリジェントな感知をサポートしています.
    そこで、VSコードC#拡張を最新バージョンにアップグレードします.
    二、マスターページビューテンプレート
    Webページには、ナビゲーションや下部など、共通のレイアウトがあります.これらのページの共通部分は、マスターページに入れる必要があります.これにより、各ページは、このページで完了する機能/内容に注目するだけでよい.開発効率が向上し、公共部分のメンテナンスコストも削減されます.
    Razorビューエンジンは、ビューレイアウトの基礎としてLayoutの概念を提供し、ビュー内で別のビューをそのビューのマスターとして参照することができます.
    1、レイアウトページをマスターページとして作成する
    プロジェクトルートディレクトリViewsフォルダにサブディレクトリSharedを作成し、Sharedディレクトリにマスターページ_Layout.cshtmlを作成します.
    通常、共通のRazorビューファイル名は_の先頭にある
    
    
        @ViewBag.Title - Ken.Tutorial
    
    
        
    Ken.Tutorial
    
        @RenderBody()
    @ ViewBag.Titleは、テンプレートが現在適用されているビューカスタムタイトル@ RenderBody(`は、マスターが現在適用されているビューをレンダリングし、現在位置に塗りつぶすことを示す.
    2、サブページとしてビューを作成する
    ビューの作成とマスターページの指定(Layout)/Views/Homeに新規作成されたファイルIndex.cshtmlページには、以下の方法でマスターページを指定できます.
  • マスターページ名
    • を指定
    @{
    Layout = "_Layout";
}
  • マスターページのフルパスを指定
    • @{
    Layout = " /Views/Shared/_Layout.cshtml";
}

    以上の2つの方式はいずれかを選択すればよい
    @{
    Layout = "_Layout";
}

    @ViewBag.Title
    
@ViewBag.Message

    アクションの変更
    調整HomeController.csでAction:Index()、ビューでMessageを出力
    public IActionResult Index()
{
    ViewBag.Title = "Home";
    ViewBag.Message = "Hello World ！ -ken.io";
    return View();
}

    3、アクセステスト
    プロジェクトを開始し、/または/home/indexにアクセスすると、次のように表示されます.
    三、クリップ付きマスターページビューテンプレート
    マスターページを通じて、いくつかのページの内容や機能を簡単に共有することができます.ただし、一部の特殊なサブページでは、サブページのみを固定した場所に表示するのではなく、親ページの一部の内容を書き換える必要がある場合があります.
    Razorビューエンジンは、Sectionの概念を提供し、ビューでSectionを定義し、その後、マスタービューでRenderSectionを介してビュー定義のSectionをロードすることができる.
    1、Sectionの定義とロード
    Section定義
    Section定義はサブページでのみ有効です.Section定義の例:
     @section test{
     
    Section Content
    
 }
    @ section:Sectionを定義するキーワードtest:SectionName、命名規則はC#変数名と同じで、アルファベットまたは下線の先頭の後ろにアルファベット、下線、数値を付けることができます
    Sectionロード
    マスターページでは、@RenderSection()メソッドでサブページで定義されたSectionをロードできます.
    RenderSectionは、親ページでのみ有効です
  • 強制ロード
    • @RenderSection("test")
  • サブページに定義があれば
    • をロードする.
    @RenderSection("test", false)
  • サブページに定義があればロードし、なければデフォルトコンテンツ
    • が表示される.
    @if(IsSectionDefined("test"))
{
    RenderSection("test");
}
else
{
    
    Layout Content
    
}

    2、Section使用例
    コントローラとアクションの作成ControllersフォルダにLayoutController.csを作成
    using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class LayoutController : Controller
    {
        public IActionResult SectionDemo()
        {
            return View();
        }
    }
}

    Section付きビューの作成ViewsフォルダにLayoutフォルダを作成し、ビューファイルを作成します.SectionDemo.cshtml
    @{
    Layout = "_Layout";
    ViewBag.Title = "SectionDemo";
}

    @ViewBag.Title
    

    Section Demo by ken.io
    

@section footer{
    
    Section Footer
    
}

    テンプレート・ページの変更_Layout.cshtmlを修正してSectionロードを追加
    
    
        @ViewBag.Title - Ken.Tutorial
    
    
        
    
            
    Ken.Tutorial
    
            
    
        
    

        
    
            @RenderBody()
        
    
        
        
    
            
    
            @if(IsSectionDefined("footer"))
            {
                RenderSection("footer");
            }
            else
            {
                
    Layout Footer
    
            }

    3、アクセステスト
    プロジェクトを開始し、ブラウザによるアクセステスト://layout/sectiondemo/にアクセスすると、次のように表示されます./layout/sectiondemoにアクセスすると、次のように表示されます.
    四、ビュー提示前のグローバルコード
    Razorビューエンジンは、ビュー表示前にコードを実行するエントリを提供します.このエントリは、グローバルビューレンダリング前に実行されるコードを定義し、フォルダの下のビューレンダリング前に実行されるコードを定義する_ViewStart.cshtmlという約束されたファイルです.フルパスの例:
  • /Views/_ViewStart.cshtml
  • /Views/Home/_ViewStart.cshtml

    • 2つの_ViewStart.cshtmlファイルが同時に存在する場合、/Views/_ViewStart.cshtmlの実行優先度は/Views/Home/_ViewStart.cshtmlより高い
    グローバルコードの例Viewsフォルダの下にビューファイル_ViewStart.cshtmlを作成する
    @{
    Layout = "_Layout";
}

    ここでは、グローバルコードを使用して、すべてのビューのマスターページを_Layoutに指定します.これにより、ビューサブページでマスターページを1つずつ作成する必要はありません.Index.cshtmlで指定されたLayoutをコメントしたら
    @{
    //Layout = "_Layout";
}

    その後、プロジェクトを開始し、/にアクセスします.
    ローカルグローバルコードの例/Views/Homeフォルダの下にビューファイル_ViewStart.cshtmlを作成する
    @{
    Layout = null;
}

    ここでは、/Views/Homeフォルダの下にあるすべてのビューのマスターページをnullとして指定し、デフォルトではマスターページは参照されません.
    プロジェクトを開始し、/にアクセスすると、次のようになります.
    五、備考
    1、付録
  • 本明細書のコード例
    • https://github.com/ken-io/asp...
  • 本明細書では
    • を参照
    https://docs.microsoft.com/zh...
    この記事は、私の独立したブログに掲載されています.https://ken.io/note/asp.net-c...
    SvelteKitについて
    [kotlin]変数