Blazor_WASM パート 2: Razor 構文

Razor は、.NET ベースのコードを Web ページに埋め込むためのマークアップ構文です。Razor 構文は、Razor マークアップ、C#、および HTML で構成されます。Razor は、 Razor コンポーネントファイル ( )にあります.razor。Razor 構文は、さまざまな JavaScript シングルページアプリケーション (SPA) フレームワーク (Angular、React、VueJs、Svelte など) のテンプレートエンジンに似ています。この記事では、Razor ファイルの Razor 共通構文を紹介します。

Razor 構文リファレンス

Razor 構文

@*直接输出变量*@
<p> @Name</p>
@*如果就像输出@，则使用另个@*@
<p> @@Name</p>
@*如果是明显的邮箱格式则按邮箱格式输出*@
<p>[email protected]</p>
@*虽然是邮箱格式，但是两个@会重新将Name作为属性*@
<p>123@@Name.com</p>
@*如果是邮箱格式，但是想输出Name属性可以用括号*@
<p>123@(Name).com</p>

@*razor代码块*@
@*代码块内的 C# 代码不会呈现*@
@code {
  
    public string Name { set; get; } = "Test";

    public class Student
    { 
        public string Name { set; get; } 
        public string School{ set; get; }
    }

    string GenericMethod<T>()
    {
        return typeof(T).Name;
    }

    public Student stu = new Student() { Name = "Jerry" ,School = "yucai"};

    public int value { set; get; } = 3903;

}

画像-20230306161504614

Razor の暗黙的な式

@*隐式 Razor 表达式,可以直接使用.*@
@*但是隐式表达式不能使用泛型*@
<p>@stu.Name</p>

画像-20230306161615290

カミソリの表示表現

@*显式表达式*@
<p>@(stu.Name)显式</p>
<p>@(stu.Name + stu.School)显式</p>
@*可以调用私有方法*@
<p>@(GenericMethod<int>())泛型</p>

画像-20230306161651538

サイクル

@*for循环*@
@for (int i = 0; i < 3; i++)
{
    <p>第@(i)个</p> 
    <p>@Name</p>
}

画像-20230306161803922

制御構造

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
@*else 和 else if 不需要 @ 符号：*@

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}


@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

画像-20230306161901599

ブロックを使用して

@*自动释放变量*@
@*@using (FileStream fs = new FileStream(".",FileMode.OpenOrCreate))
{
}

例外キャッチブロック

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
}

特性

各 Razor はクラスにコンパイルされ、そのクラスに機能を追加できます。

@attribute [Authorize]

インターフェースを実装する

@implements IDisposable

継承クラス

@inherits CustomRazorPage<TModel>

ジェネリックとして定義される

@typeparam TEntity where TEntity : class

ルーティング

Razor コンポーネントがリクエストを直接処理する必要があることを指定します

@page "/test"

参照名前空間

@using Microsoft.AspNetCore.Authorization

名前空間を定義する

名前空間の最初の文字は大文字にする必要があります

@namespace Mynamespace

依存性注入

@inject Logger<Test> logger
等价于 private readonly Logger<Test> logger;
  public Test(Logger<Test> log)
  {
      logger = log
  }