Blazor WebAssembly を触ってみる - その③コードを少し書いてみる
Blazor WebAssembly を触ってみる - その①環境を整える、サンプルを動かす
Blazor WebAssembly を触ってみる - その②デバッグしてみる
の続きです。
コンポーネント (Razor コンポーネント)
コードを書いて見る前に少し用語を勉強しておく。
今日の参考資料はこれ。
ASP.NET Core Blazor の概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly
- Blazor のアプリはコンポーネント (.razor ファイル) によって構成される。コンポーネントってのは「ページ、ダイアログ、データ エントリ フォームなどの UI の要素」らしい。
- C# コードに HTML マークアップを結合するための Razor 構文で記述する
触ってみる
Before
一部コメントアウトしましたが、サンプルでは文字を表示するだけのシンプルな HTML のコードでした。
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<!--<SurveyPrompt Title="How is Blazor working for you?" /> -->
After
Dialog.razor という子コンポーネントのファイルを作成します。
ここでは HTML の div 要素とその中の変数 Title や ChildConponent、onclick 時に呼ばれそうな OnYes 関数の定義などを記述しています。
<div>
<h1>@Title</h1>
@ChildContent
<button @onclick="OnYes">Yes!</button>
</div>
@code {
[Parameter]
public string Title { get; set; }
// 親子間のコンポーネントの受け渡しに不可欠で名前変更はできない (これや @ChildContent がないと実行時にエラー)
[Parameter]
public RenderFragment ChildContent { get; set; }
private void OnYes()
{
Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
}
}
この div 要素やボタンを配置してくれそうな子コンポーネント Dialog.razor を親コンポーネント Index.razor で表示します。
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<!--<SurveyPrompt Title="How is Blazor working for you?" />-->
<!-- コンポーネントの名前、変数 Title に渡す値など Dialog.razor に渡す値を記述 (関数の引数みたい) -->
<Dialog Title="Blazor">
Do you want to <i>learn more</i> about Blazor?
</Dialog>
何やら表示されました。これが Dialog.razor で記述した箇所ですね。
Yes! ボタンをクリックすると、Dialog.razor で定義した OnYes() 内の Console.WriteLine("Write to the console in C#! 'Yes' button was selected."); が実行され、Console に出力されました。
HTML 表示は以下ですが、blazor.webassembly.js を指定しているくらいです。
blazor.webassembly.js は .NET ランタイム、アプリ、およびアプリの依存関係のダウンロード、アプリを実行するランタイムの初期化を行うようです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>blazorApp1</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
今日はここまで。
Author And Source
この問題について(Blazor WebAssembly を触ってみる - その③コードを少し書いてみる), 我々は、より多くの情報をここで見つけました https://qiita.com/chyonek/items/30a17bcfddd9beeb11b2著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .