深入了解cshtml

发布时间：2023-05-20

CSHTML文档转换为Markdown

一、CSHTML简介

CSHTML即C# Razor语法的视图文件，是MVC（Model-View-Controller）开发模式中的视图层，结合了C#语法和HTML标签。在ASP.NET Core中，我们通常使用CSHTML来创建Web应用程序的用户界面。 与传统的ASP.NET Web Forms相比，ASP.NET Core使用CSHTML提供了更高效且更易于维护的视图层实现方式，同时还具有更好的扩展性和更强大的性能。

二、CSHTML语法

1、基本语法

@{
    //C#语法
}

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

2、输出语句

@{var name = "Alice";}
<p>欢迎 @name 光临!</p>

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

3、HTML辅助器

<p>@Html.ActionLink("Link Text", "ActionName", "ControllerName")</p>

ASP.NET Core中提供了一系列的HTML辅助器，用于简化Web应用程序开发中的常见任务，如生成HTML表单、链接等。

三、CSHTML与Model交互

1、视图模型

public class PersonViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

在MVC开发模式中，我们通常使用视图模型在视图和控制器之间传递数据。

2、传递数据到视图

public IActionResult Index()
{
    var person = new PersonViewModel { Name = "Alice", Age = 25 };
    return View(person);
}

在控制器中，我们可以创建视图模型的实例，并将其传递给View()方法，将数据传递到视图中。

3、从视图中访问模型数据

@model PersonViewModel
<p>欢迎 @Model.Name 光临!</p>
<p>年龄：@Model.Age。</p>

在CSHTML文件的开头使用@model指令指定视图使用的模型类，然后可以直接从视图中访问模型的属性。

四、布局视图

1、布局文件

@{
    Layout = "_Layout";
}
<p>...</p>

在MVC中，可以使用布局视图将常见的页面元素（如页眉、页脚）提取到单独的文件中，在多个视图页面中共享。 在每个视图文件中，可以通过修改@{ Layout = "_Layout" }语句来指定使用的布局文件名称。

2、布局文件中的区块

<div>
    @RenderSection("sidebar", required: false)
</div>
<div>
    @RenderBody()
</div>

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

五、CSHTML中的脚本和样式

1、脚本引用

<script src="~/js/jquery.min.js"></script>

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

2、样式引用

<link href="~/css/styles.css" rel="stylesheet" />

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

六、视图数据验证

1、数据注解

public class PersonViewModel
{
    [Required]
    public string Name { get; set; }
    [Range(0, 120)]
    public int Age { get; set; }
}

可以在视图模型上应用数据注解，定义输入数据的验证规则。

2、验证消息

<div>
    @Html.ValidationSummary()
</div>
<div>
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
</div>

在视图中，使用@Html.ValidationSummary()和@Html.ValidationMessageFor()可以显示数据验证的错误消息。

七、部分视图

1、_Partial.cshtml文件

<p>@Model.Name</p>
<p>@Model.Age</p>

部分视图是一种可重用的视图组件，类似于用户控件或Web控件，可以在多个视图中使用。

2、@Html.Partial()方法

<div>
    @Html.Partial("_Partial", person)
</div>

在视图中使用@Html.Partial()方法可以引用部分视图，并将模型数据传递给该视图。

八、总结

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

推荐文章