Blazor - ルーティング - 版の履歴

Wiki: /* 認証 / 認可 */

2025-01-26T14:41:08Z

認証 / 認可

@@ 501行目: / 501行目: @@
 == 認証 / 認可 ==
 <code>[Authorize]</code>属性を使用することにより、特定のルートへのアクセスを制限することができる。<br>
 <br><br>

Wiki: /* エラーハンドリング */

2025-01-26T14:36:13Z

エラーハンドリング

@@ 441行目: / 441行目: @@
 エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。<br>
 これにより、ユーザフレンドリーなエラー画面を表示することが可能である。<br>
 <br><br>

Wiki: /* ルーティングファイル */

2025-01-26T14:19:54Z

ルーティングファイル

@@ 60行目: / 60行目: @@
 <br>
 なお、<code>@page</code>ディレクティブで明示的にルートを指定した場合は、この規約が上書きされる。<br>
 <br><br>

Wiki: /* レイアウトの適用 */

2025-01-26T14:08:22Z

レイアウトの適用

@@ 291行目: / 291行目: @@
 == レイアウトの適用 ==
-Blazorのルーティングでは、レイアウトの適用も重要である。<br>
+Blazorのルーティングでは、レイアウト機能も重要である。<br>
 _Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで<code>@layout</code>指示子を使用して上書きすることができる。<br>
 <br><br>

Wiki: /* オプションパラメータ / クエリパラメータ */

2025-01-26T13:53:47Z

オプションパラメータ / クエリパラメータ

@@ 192行目: / 192行目: @@
 == オプションパラメータ / クエリパラメータ ==
 ==== オプションパラメータ ====
 波括弧内に<code>?</code>を付加することにより、実現できる。<br>
 <br>
   <syntaxhighlight lang="c#">
-  @page "/user/{id?}"
+  @page "/user/{id?}"                     // idパラメータはオプション (省略可能)
   @code {
      [Parameter]
      public string Id { get; set; }
      protected override void OnInitialized()
+     {
-        if (string.IsNullOrEmpty(Id))
+        // パラメータが省略された場合のデフォルト値設定
+        {
-           Id = "default";
+           { "q", query },              // 検索キーワード
+          { "page", page.ToString() }  // ページ番号
+     }
+  }

Wiki: /* ナビゲーション */

2025-01-26T13:41:15Z

ナビゲーション

← 古い版		2025年1月26日 (日) 22:41時点における版
142行目:		142行目:
	==== NavigationManagerを使用したプログラムによる遷移 ====		==== NavigationManagerを使用したプログラムによる遷移 ====
	<syntaxhighlight lang="c#">		<syntaxhighlight lang="c#">
	@inject NavigationManager ~~NavigationManager~~		@inject NavigationManager Navigation

	@code {		@code {
	private void ~~NavigateToCounter~~()		private void Navigate()
	{		{
	~~NavigationManager~~.NavigateTo("counter");		// 基本的な遷移
			Navigation.NavigateTo("counter");

			// 強制的なページリロード
			Navigation.NavigateTo("counter", forceLoad: true);

			// 相対パスでの遷移
			Navigation.NavigateTo("counter", forceLoad: false);

			// クエリパラメータを含む遷移
			Navigation.NavigateTo($"search?query={Uri.EscapeDataString(searchTerm)}");

			// 戻る
			Navigation.NavigateTo(Navigation.Uri);
			}

			// URLの変更を検知
			protected override void OnInitialized()
			{
			Navigation.LocationChanged += LocationChanged;
			}

			private void LocationChanged(object sender, LocationChangedEventArgs e)
			{
			// URLが変更された時の処理
	}		}
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	==== ~~リンクによる遷移~~ ====		==== NavLinkコンポーネントを使用したリンクによる遷移 ====
	NavLinkコンポーネントを使用して遷移する。<br>		NavLinkコンポーネントを使用して遷移する。<br>
	<br>		<br>
	<syntaxhighlight lang="c#">		<syntaxhighlight lang="c#">
	<NavLink href="counter">		// 基本的な使用方法
	<~~span class~~="~~oi oi-plus~~"></~~span~~> ~~Counter~~		<NavLink href="counter">Counter</NavLink>
	</NavLink>
			// アクティブ時のスタイル指定
			<NavLink href="counter" ActiveClass="active">Counter</NavLink>

			// Match属性による一致条件の指定
			<NavLink href="users" Match="NavLinkMatch.Prefix">Users</NavLink>
	</syntaxhighlight>		</syntaxhighlight>
	<br><br>		<br><br>

Wiki: /* パラメータの受け渡し */

2025-01-26T13:37:59Z

パラメータの受け渡し

@@ 65行目: / 65行目: @@
 ルートパラメータは波括弧で囲んで指定して、対応するプロパティに<code>[Parameter]</code>属性を付与する。<br>
 <br>
   <syntaxhighlight lang="c#">
-  @page "/user/{Id}"
+  @page "/user/{Id:int}"
   @code {
      [Parameter]
-     public string Id { get; set; }
+     public int Id { get; set; }
+  }
   </syntaxhighlight>
 <br><br>

Wiki: /* 概要 */

2025-01-26T13:33:04Z

概要

@@ 4行目: / 4行目: @@
 Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。<br>
 このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。<br>
   <syntaxhighlight lang="c#">
   // Pages/Counter.razorファイル
@@ 19行目: / 23行目: @@
      public int currentCount { get; set; }
+  }
   </syntaxhighlight>
 <br><br>

Wiki: ページの作成:「== 概要 == Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。

Blazorのルーティングは、`@page`ディレクティブを使用して設定する。
このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。
// Pages/Counter.razorファイル @page "/count…」

2025-01-26T12:51:03Z

ページの作成:「== 概要 == Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。 Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。 このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。 <syntaxhighlight lang="c#"> // Pages/Counter.razorファイル @page "/count…」

新規ページ

== 概要 ==
Blazorでは、URLパターンとコンポーネントを紐付けることでルーティングを実現する。 
 
Blazorのルーティングは、<code>@page</code>ディレクティブを使用して設定する。 
このように定義することにより、/counterというURLにアクセスした時にこのコンポーネントが表示される。 
<syntaxhighlight lang="c#">
// Pages/Counter.razorファイル

@page "/counter"
@page "/counter/{currentCount:int}"

<h1>Counter</h1>

Current count: @currentCount

@code {
// オプションのルートパラメータ
[Parameter]
public int currentCount { get; set; }
}
</syntaxhighlight>
 

== パラメータの受け渡し ==
ルートパラメータは波括弧で囲んで指定して、対応するプロパティに<code>[Parameter]</code>属性を付与する。 
 
<syntaxhighlight lang="c#">
@page "/user/{Id}"

@code {
[Parameter]
public string Id { get; set; }
}
</syntaxhighlight>
 

== ナビゲーション ==
プログラムによる画面遷移とリンクによる遷移の2つの方法がある。 
 
==== NavigationManagerを使用したプログラムによる遷移 ====
<syntaxhighlight lang="c#">
@inject NavigationManager NavigationManager

@code {
private void NavigateToCounter()
{
NavigationManager.NavigateTo("counter");
}
}
</syntaxhighlight>
 
==== リンクによる遷移 ====
NavLinkコンポーネントを使用して遷移する。 
 
<syntaxhighlight lang="c#">
<NavLink href="counter">
 Counter
</NavLink>
</syntaxhighlight>
 

== オプションパラメータ / クエリパラメータ ==
==== オプションパラメータ ====
波括弧内に<code>?</code>を付加することにより、実現できる。 
 
<syntaxhighlight lang="c#">
@page "/user/{id?}"

@code {
[Parameter]
public string Id { get; set; }

protected override void OnInitialized()
{
if (string.IsNullOrEmpty(Id))
{
Id = "default";
}
}
}
</syntaxhighlight>
 

== レイアウトの適用 ==
Blazorのルーティングでは、レイアウトの適用も重要である。 
_Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで<code>@layout</code>指示子を使用して上書きすることができる。 
 

== エラーハンドリング ==
404エラー等のルーティングエラーは、App.razorで設定したNotFoundテンプレートによって処理される。 
これにより、ユーザフレンドリーなエラー画面を表示することが可能である。 
 

== 認証 / 認可 ==
<code>[Authorize]</code>属性を使用することにより、特定のルートへのアクセスを制限することができる。 
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]