「Photino.Blazor - ルーティング」の版間の差分

提供:MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動
(ページの作成:「== 概要 == <br><br> == ルーティングの設定 == Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。<br> これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。<br> <br> * 正しいURLの場合は対応するページを表示する。 * 存在しない…」)
 
14行目: 14行目:
<br>
<br>
  <syntaxhighlight lang="xml">
  <syntaxhighlight lang="xml">
<!-- App.razorファイル -->
  <!-- Blazor向けのルーティング設定を行うコンポーネント -->
  <!-- Blazor向けのルーティング設定を行うコンポーネント -->
   
   

2024年12月31日 (火) 16:33時点における版

概要



ルーティングの設定

Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。

  • 正しいURLの場合は対応するページを表示する。
  • 存在しないページにアクセスした場合は、エラーページを表示する。
  • 全てのページに共通のレイアウトを適用する。


以下の例では、Blazor向けのルーティング設定を行っている。

 <!-- App.razorファイル -->
 <!-- Blazor向けのルーティング設定を行うコンポーネント -->
 
 @using PhotinoSample.Shared
 
 <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       <FocusOnNavigate RouteData="@routeData" Selector="body" />
    </Found>
    <NotFound>
       <PageTitle>Not found</PageTitle>
       <LayoutView Layout="@typeof(MainLayout)">
          <p role="alert">Sorry, there's nothing at this address.</p>
       </LayoutView>
    </NotFound>
 </Router>


  • <Router>タグ
    Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。
    AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。
    上記の例は、Appクラスを含むアセンブリ

  • <Found>タグ
    ルートが見つかった場合の処理を定義する。
    • <RouteView>タグ
      実際のページコンテンツを表示する。
      上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。
    • <FocusOnNavigate>タグ
      ナビゲーション後にフォーカスを設定する機能を提供する。

  • <NotFound>タグ
    URLが見つからない場合 (404エラー) において、表示内容を定義する。
    <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。