Blazor_WASM之2:Razor语法

简介: Razor 是一种标记语法,用于将基于 .NET 的代码嵌入网页中。 Razor 语法由 Razor 标记、C# 和 HTML 组成。 Razor 可在 Razor 组件 文件 (.razor) 中找到。 Razor 语法类似于各种 JavaScript 单页应用程序 (SPA) 框架(如 Angular、React、VueJs 和 Svelte)的模板化引擎,本文针对Razor文件介绍Razor常用语法。

Blazor_WASM之2:Razor语法

Razor 是一种标记语法,用于将基于 .NET 的代码嵌入网页中。 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>123@Name.com</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;

}

Razor隐式表达式

@*隐式 Razor 表达式,可以直接使用.*@

@*但是隐式表达式不能使用泛型*@

<p>@stu.Name</p>

Razor显示表达式

@*显式表达式*@

<p>@(stu.Name)显式</p>

<p>@(stu.Name + stu.School)显式</p>

@*可以调用私有方法*@

<p>@(GenericMethod<int>())泛型</p>

循环

@*for循环*@

@for (int i = 0; i <3;i++)

{

   <p>第@(i)个</p>

   <p>@Name</p>

}

控制结构

@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;

}

using语句块

@*自动释放变量*@

@*@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

 }


相关文章
|
网络协议 算法 Linux
【嵌入式软件工程师面经】Linux网络编程Socket
【嵌入式软件工程师面经】Linux网络编程Socket
314 1
|
数据采集 消息中间件 分布式计算
系统架构+技术选型+用例说明|学习笔记
快速学习系统架构+技术选型+用例说明
系统架构+技术选型+用例说明|学习笔记
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
1476 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
数据采集 人工智能 算法
数据准备:AI训练的第一步
【7月更文第16天】在人工智能(AI)的旅程中,数据是燃料,而数据准备则是启动引擎的关键步骤。本文将深入探讨数据收集、清洗、标注与预处理的重要性及实施方法,为你的AI项目奠定坚实的基础。
681 1
|
消息中间件 监控 Apache
【看案例】编程猫:RocketMQ助力构建稳定的业务系统
编程猫通过使用阿里云提供的消息队列RocketMQ作为系统的消息总线,实现了业务系统的稳定运行和效率提升。
171 0
【看案例】编程猫:RocketMQ助力构建稳定的业务系统
|
分布式计算 资源调度 Hadoop
搭建Hadoop集群的HA高可用架构(超详细步骤+已验证)(二)
搭建Hadoop集群的HA高可用架构(超详细步骤+已验证)(二)
518 0
|
6天前
|
人工智能 运维 安全
|
4天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
548 16