深入了解cshtml(cshtml和html的区别)

一、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";}

欢迎 @name 光临!

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

3、HTML辅助器

@Html.ActionLink("Link Text", "ActionName", "ControllerName")

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

欢迎 @Model.Name 光临!

年龄:@Model.Age。

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

四、布局视图

1、布局文件

@{
    Layout = "_Layout";
}

...

在MVC中,可以使用布局视图将常见的页面元素(如页眉、页脚)提取到单独的文件中,在多个视图页面中共享。

在每个视图文件中,可以通过修改@{ Layout = “_Layout” }语句来指定使用的布局文件名称。

2、布局文件中的区块


    @RenderSection("sidebar", required: false)


    @RenderBody()

在布局文件中,使用“@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、验证消息


    @Html.ValidationSummary()


    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)

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

七、部分视图

1、_Partial.cshtml文件

@Model.Name

@Model.Age

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

2、@Html.Partial()方法


    @Html.Partial("_Partial", person)

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

八、总结

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平