系统模板语法

最后更新: | 浏览次数: 689|开发文档

基础原理

系统模板文件使用.cshtml文件扩展名,使用Razor标记语法,Razor默认的语言为HTML,它可以让您将基于服务器的代码(C#)嵌入到网页中,当一个网页被请求时,服务器在返回页面给浏览器之前先执行页面中的基于服务器的代码,再输出HTML内容。

更通俗的理解:模板文件中的内容使用html和css布局,在需要动态调用服务器端的数据时,在对应的位置插入Razor标记。即可实现动态内容输出。Razor标记只负责服务器端内容输出,不负责页面布局和样式

基础语法

Razor 使用 @ 符号从 HTML 转换为 C# 表达式,并将它们转换为HTML内容并输出。

若要对 Razor 标记中的 @ 符号进行转义,请使用两个 @ 符号,例如:@@Username

包含电子邮件地址的 HTML 属性和内容不将 @ 符号视为转换字符。 Razor 分析不会处理以下示例中的电子邮件地址

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

变量声明

可使用隐式类型方式声明变量,隐式声明使用var关键词,根据赋值类型推断具体的类型,这与javascript中的var关键词作用类似,在模板中声明变量,必须将变量包含在代码块中,例如:

@{
  //str的类型为字符串string类型
  var str="hello";
}

隐式表达式

隐式 Razor 表达式以 @ 开头,后跟模板标记代码或c#代码,例如

<!--输出站点名称-->
<p>@Cms.SiteName</p>
<!--输出当前时间-->
<p>@Datetime.Now</p>

显式表达式

显式 Razor 表达式由 @ 符号和圆括号组成。例如要计算两个值的差值,可使用以下 Razor 标记:

<p>@(1000-666)</p>

以上代码将在html页面输出结果:334

代码块

Razor 代码块以 @ 开始,并括在 {} 中。 代码块内的代码不会呈现,例如:

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

该代码呈现以下 HTML:

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

控制结构

控制结构是对代码块的扩展。 代码块的各个方面(转换为标记、内联 C#)同样适用于以下结构:

条件 @if, else if, else, and @switch

@if 控制何时运行代码:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

elseelse if 不需要 @ 符号:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else
{
    <p>The value is odd</p>
}

循环 @for, @foreach, @while, and @do while

@for

@for (var i = 0; i < 10; i++)
{
   <p>value is:@i</p>
}

@foreach

 @foreach (var item in Cms.Top(ProductAttr.Default, 8))
 {
     <div class="col d-flex">
         <div class="item-col product-col">
             <img src="@item.Thumb" alt="@item.Name" width="@item.Thumbs[0].Width" height="@item.Thumbs[0].Height" />
         </div>
     </div>
 }

其它

Razor更高级的语法可以参考官方文档,在系统中几乎用不到,可参考Microsoft文档

变量声明:https://learn.microsoft.com/zh-cn/dotnet/csharp/language-reference/statements/declarations

Razor文档:https://learn.microsoft.com/zh-cn/aspnet/core/mvc/views/razor

文档