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

 }


相关文章
|
4月前
|
测试技术 PHP 数据库
深入解析PHP框架:Symfony框架详解与应用
📚 Symfony框架深度解析:模块化设计提升开发效率,性能优越,灵活性高,支持MVC模式。探索控制器、路由、模板(如Twig)、服务容器、事件调度器等核心概念。还包括表单处理、数据库集成( Doctrine ORM)、安全组件、国际化支持及调试工具。使用Symfony CLI快速创建应用,内置PHPUnit测试支持。开始你的高质量Web开发之旅吧!
65 2
|
JavaScript 前端开发 API
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(六)
102 0
|
JavaScript 前端开发 算法
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(七)放大镜实战
88 0
|
JavaScript 前端开发 API
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(四)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(四)
51 0
|
存储 JavaScript 前端开发
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(五)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(五)
46 0
|
6月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
50 2
|
JavaScript vr&ar 开发者
ejs模板引擎使用(独立使用,没有集成 express |学习笔记
快速学习ejs模板引擎使用(独立使用,没有集成 express)
ejs模板引擎使用(独立使用,没有集成 express |学习笔记
|
JavaScript 前端开发 Java
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(二)
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(二)
64 0
|
C#
如何使用MASA.Blazor
如何使用MASA.Blazor
131 0
|
C# 网络架构
Blazor_WASM之4:路由
Blazor_WASM之4:路由