系统模板语法
基础原理
系统模板文件使用.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>
}
else
和 else 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