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

 }


相关文章
|
2月前
|
前端开发 JavaScript 安全
C#一分钟浅谈:Blazor WebAssembly 开发
Blazor WebAssembly 是一个客户端框架,允许开发者使用C#和Razor语法构建Web应用。本文介绍了Blazor WebAssembly的基本概念、常见问题及解决方案,包括路由配置、数据绑定、异步操作、状态管理和性能优化等方面的内容,并分享了一些易错点及如何避免的方法。希望这些内容能帮助你在Blazor WebAssembly开发中少走弯路,提高开发效率。
117 51
|
C# 网络架构
Blazor_WASM之4:路由
Blazor_WASM之4:路由
156 0
|
开发框架 JavaScript 前端开发
|
移动开发 前端开发 JavaScript
Blazor_WASM之3:项目结构
Blazor WebAssembly项目模板可选两种,Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty
178 0
symfony框架Twig模板语言的使用
symfony框架Twig模板语言的使用
166 0
symfony框架Twig模板语言的使用
|
JavaScript 前端开发 Java
【前端灵魂脚本语言JavaScript①】——JS引入方式
 Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
230 0
【前端灵魂脚本语言JavaScript①】——JS引入方式
|
前端开发 JavaScript
|
JavaScript 前端开发 Java
wasm和javascript
你是前端吗?你知道WebAssembly吗? 我是前端,很早以前就关注并使用这个技术了。 2015年的时候,还搞过技术分享,那时候还不叫wasm, 那时候确切点说称之为经过llvm编译高度优化过的asm.js . 当时给youku播放器做的加密方案之一,当时有flascc , alchemy等几个不同的方案备选。
6033 0
|
JavaScript 前端开发 .NET

热门文章

最新文章