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开发中少走弯路,提高开发效率。
136 51
|
8月前
|
JavaScript 测试技术
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
|
C# 网络架构
Blazor_WASM之4:路由
Blazor_WASM之4:路由
161 0
|
开发框架 安全 .NET
您是否存在想在浏览器动态编译razor的组件的想法?
您是否存在想在浏览器动态编译razor的组件的想法?
109 1
|
开发框架 JavaScript 前端开发
|
移动开发 前端开发 JavaScript
Blazor_WASM之3:项目结构
Blazor WebAssembly项目模板可选两种,Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty
184 0
|
Web App开发 移动开发 前端开发
使用Svelte开发Chrome Extension
起因 最近Chrome浏览器升级到96大版本后,二维码入口从地址栏移动至二级菜单。这对H5前端开发来说不太友好,每次需要页面二维码时都需要多点两下(* ̄︿ ̄)。 因此萌生了开发一个二维码Chrome Extension的想法(@ ̄ー ̄@)。 经过多方技术选型(React、原生、Vue、Svelte等),最终选择Svelte,原因是语法简单,心智负担小,运行时代码少,打包体积小
277 0
|
Web App开发 JavaScript 前端开发
javascript模板插件amaze.js
javascript模板插件amaze.js
|
移动开发 JavaScript 前端开发
SJS(simple javascript)html5开发扩展库
由于长期的开发html5移动项目,所以少不了使用一些库,如jquery mobile,zepto等,但是相对于移动设备来说,jquery太庞大了,而且它的意义在于兼容,当一切放在html5的基础上的时候,他就失去了意义。
1292 0
|
Web App开发 移动开发 JavaScript
来 认识一下Weex 的 JS Framework
在 Weex 框架中的位置 Weex 是一个既支持多个前端框架又能跨平台渲染的框架,JS Framework 介于前端框架和原生渲染引擎之间,处于承上启下的位置,也是跨框架跨平台的关键。无论你使用的是 Vue 还是 Rax,无论是渲染在 Android 还是 iOS,JS Framework 的代码都会运行到(如果是在浏览器和 WebView 里运行,则不依赖 JS Framework)。
3495 0

热门文章

最新文章