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

 }


相关文章
|
7天前
|
前端开发 JavaScript 安全
C#一分钟浅谈:Blazor WebAssembly 开发
Blazor WebAssembly 是一个客户端框架,允许开发者使用C#和Razor语法构建Web应用。本文介绍了Blazor WebAssembly的基本概念、常见问题及解决方案,包括路由配置、数据绑定、异步操作、状态管理和性能优化等方面的内容,并分享了一些易错点及如何避免的方法。希望这些内容能帮助你在Blazor WebAssembly开发中少走弯路,提高开发效率。
79 51
|
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
|
C# 网络架构
Blazor_WASM之4:路由
Blazor_WASM之4:路由
|
C#
如何使用MASA.Blazor
如何使用MASA.Blazor
135 0
|
开发框架 JavaScript 前端开发
|
移动开发 前端开发 JavaScript
Blazor_WASM之3:项目结构
Blazor WebAssembly项目模板可选两种,Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty
symfony框架Twig模板语言的使用
symfony框架Twig模板语言的使用
158 0
symfony框架Twig模板语言的使用
|
Web App开发 移动开发 JavaScript
向 Web 开发人员推荐35款 JavaScript 图形图表库
  图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。   在这篇文章中,我们收集了35款值得网站开发者收藏的 JavaScript 图形图表库,适合各种图表需求。
1734 0
|
开发框架 前端开发 JavaScript
Mithril.js:一个高性能 JavaScript MVC 框架
现代前端的发展涌现出很多出色的 JavaScript 框架,在性能和效率方面各有特色,每个前端团队都有自己使用得比较顺手的开发框架。本文介绍一个新的前端框架:Mithril.js,是一个高性能 JavaScript 框架,它的大小和速度使其成为满足视图模型需求的不错选择。
298 0
Mithril.js:一个高性能 JavaScript MVC 框架
|
移动开发 JavaScript 前端开发
Weex 框架中 JS Framework 的结构
Weex 具有移动端跨平台的特性,JS Framework 是其中比较关键的一层。首先来看一下 JS Framework 在 Weex 中的位置: ![Weex 整体结构](http://gtms02.alicdn.com/tps/i2/TB1ootBMpXXXXXrXXXXwi60UVXX-596-397.png) 从图中可以看出 Weex 整体的工作流程。首先开发者可以声明式的定义组件
10680 0