概述

简介

WebFuture 模板以 W3C 的 WEB设计标准，遵循网站的“内容、结构、表现和行为”相分离的设计原则。模板页构成网页的结构、样式控制网页的表现、组件展现网页的内容，并辅以网页技术交互访问的行为，从而构成规范的网页体系。这些构成中有些会交织，如结构中除了布局外还会包含一定的内容、组件中除了内容外还会包含一定的结构、样式中除了控制显示形式外还会包含一定的行为等。在这些构成中，组件主要成为网页前台展示与后台数据库的纽带，调用数据库中的内容，从而在页面中展现和传达包含数据、文档、图片等数据信息。如下面 “默认首页.cshtml” 模板的示例代码中，展示了网页模板（即结构）中的部分代码：

• 结构（模板页文件）：.cshtml
• 内容（组件文件）：@Power.ArticleList(……)
• 表现（样式文件）：index.css
• 行为（交互定义）：<script>/<script>

@{
    Layout = $"~/Views/{this.Context.GetCurrentSite().Identifier}/Layout/公共布局页.cshtml";
    ViewBag.IsHome = false;
}
@section header {
    <link href="~/content/@(this.Context.GetCurrentSite().Identifier)/home/css/index.css" asp-append-version="true" rel="stylesheet" />
}
<div id="content">
    <!-- 热点关注 -->
    <dl class="headNew">
        <dt><span class="u">热点</span><span class="d">关注</span></dt>
        <dd>
            <ul>
                @Power.ArticleList("文章头条列表", new { Count = 4, Node = "xwzx", Tag = "热点关注", TitleLength = 46, TopicNum = 1, TopicTitleLength = 50, TopicContentLength = 0, TopicDisplayPic = false })
            </ul>
        </dd>
    </dl>
……
</div>
……
<script>
   jQuery("#indGhjh, #indGhjh1")
     ……
</script>
……

WebFuture 模板和组件对应于 MVC 中的视图和局部视图，都是以 .cshtml 为扩展名的视图文件，这些视图文件中均支持 Razor 语法。

CSHTML 即 C# Razor 语法的视图文件，是 MVC（Model-View-Controller）开发模式中的视图层，结合了 C# 语法和 HTML 组件。在 ASP.NET Core 中，我们通常使用 CSHTML 来创建 Web 应用程序的用户界面。

与传统的 ASP.NET Web Forms 相比，ASP.NET Core 使用 CSHTML 提供了更高效且更易于维护的视图层实现方式，同时还具有更好的扩展性和更强大的性能。

语法

在一个 CSHTML 文件中，使用 @{} 包裹起来的部分表示 C# 代码片段，可以包含变量、循环、条件语句等。

@{
    //C#语法
}

使用 @ 符号和变量名，可以在 HTML中 输出变量的值。

@{
    var name = "张三";
}
欢迎 @name 光临!

使用 @* 注释内容 *@ 包裹起来的表示注释该代码片段，使用双斜杠 // 在 C# 代码片段里注释单行。

@* 标题H1 *@
<h1>Hello world</h1>
@*
    <h1>代码演示</h1>
    <p>可以使用“@* *@”注释多行代码</p>
*@

@{
    // 姓名
    var name = "张三";
    // var userName = "admin";
}

布局视图

在每个视图文件中，可以通过修改 @{ Layout = "~/Views/_Common/Layout/基础布局页.cshtml" } 语句来指定使用的布局文件。

@{
    Layout = "~/Views/_Common/Layout/基础布局页.cshtml";
}
...

在布局文件中，使用 @RenderSection() 和 @RenderBody() 方法可以定义布局页面中的区块，并引用其它视图的内容。

@RenderSection("header", false) // 网站顶部区块
@RenderBody() // 具体的页面内容区块

脚本和样式

可以直接通过在 CSHTML 中引用 JavaScript 文件，来添加 JavaScript 功能到 Web 应用程序中。

<script src="~/content/_common/base/js/power.js" asp-append-version="true"></script>

同样，可以通过在 CSHTML 中引用 CSS 文件，为Web应用程序添加样式。

<link href="~/content/@(this.Context.GetCurrentSite().Identifier)/base/css/default.css" asp-append-version="true" rel="stylesheet" type="text/css" />

总结

CSHTML 是 ASP.NET Core 中的核心技术之一，提供了一种高效、易于维护、具有扩展性和性能优势的视图层实现方式。通过充分了解 CSHTML 语法和 MVC 开发模式，可以更好地开发Web应用程序。