AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ASP.NET Core MVC 从入门到精通之Html辅助标签（一）

2023-07-29 103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ASP.NET Core MVC 从入门到精通之Html辅助标签（一）

随着技术的发展，ASP.NET Core MVC也推出了好长时间，经过不断的版本更新迭代，已经越来越完善，本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容，适用于初学者，在校毕业生，或其他想从事ASP.NET Core MVC 系统开发的人员。

经过前几篇文章的讲解，初步了解ASP.NET Core MVC项目创建，启动运行，以及命名约定，创建控制器，视图，模型，接收参数，传递数据ViewData，ViewBag，路由，页面布局，wwwroot和客户端库，Razor语法，EnityFrameworkCore与数据库，HttpContext，Request，Response，Session，序列化，文件上传，自动映射等内容，今天继续讲解ASP.NET Core MVC 中Html辅助标签等相关内容，仅供学习分享使用。

概述

ASP.NET Core MVC不仅支持原生的Html标签，还支持自带的Html辅助标签，而且所有的Html辅助标签都是通过IHtmlHelper的扩展方法来实现的。在大多数情况下，HTML 辅助标签仅仅是一个返回字符串的方法。通过 MVC，您可以创建您自己的辅助标签，或者直接使用内建的 HTML 辅助标签。

使用辅助标签，具有以下好处：

  1. 通知Html辅助标签，可以保持统一风格。
  2. 可以进行模型校验。

超链接

超链接在Html中是a标签，在ASP.NET Core MVC 可以通过@Html.ActionLink 或者 @Html.RouteLink实现。

ActionLink方法具有7个重载，各个参数的含义如下：

  1. linkText：超链接显示文本，不可以为空。
  2. actionName：链接的目标方法名称ActionName。
  3. controllerName：链接的控制器名称，可跨控制器跳转。
  4. routeValues：object类型的路由数据，可以接收匿名对象，如：new {id=1,name="公子小六"}。
  5. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style="color:red;width=100px",@class="link"}。
  6. protocol：协议，如：http，https等。
  7. hostname：主机服务器名称。
  8. fragment：URL 片段名称（定位点名称）。

超链接示例：

@Html.ActionLink("点击跳转","Index","Student",new {id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})

注意：因为class是C#关键字，所以如果需要表示样式，需要添加@前缀

RouteLink不支持如ActionLink中指定actionName，controllerName那种，只支持指定路由名称。RouteLink具有5个重载参数，具体如下所示：

  1. linkText：超链接显示文本，不可以为空。
  2. routeName：路由名称。
  3. routeValues：object类型的路由数据，可以接收匿名对象，如：new {id=1,name="公子小六"}。
  4. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style="color:red;width=100px",@class="link"}。

RouteLink示例：

<!--以下RouteLink和ActionLink输出结果一致-->
@Html.RouteLink("点击跳转","Default",new {controller="Student",action="Index", id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})

form标签

form标签主要用于表单的提交，form辅助标签用@Html.BeginForm或者@Html.BeginRouteForm表示，且用@using包裹，用于表示form表单的起始和结束。

空的表单如下所示：

<form action="/User/Save" method="post">
</form>

用Html辅助标签，如下所示：

@using (Html.BeginForm("Save","User",FormMethod.Post))
{
}

@Html.BeginForm重载参数如下所示：

  1. actionName：链接的目标方法名称ActionName。
  2. controllerName：链接的控制器名称，可跨控制器跳转。
  3. method：是form请求传递参数的方式，是一个枚举类型FormMethod，有Get和Post两种方式。
  4. routeValues：object类型的路由数据，可以接收匿名对象，如：new {id=1,name="公子小六"}。
  5. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style="color:red;width=100px",@class="link"}。
  6. antiforgery：是否将身份验证令牌添加到表单中有助于防止请求伪造。

@Html.BeginRouteForm和@Html.BeginForm一致，主要是接收路由参数，不接收字符串格式的action和controller，此处不再演示。

文本框与Label

文本框通过@Html.TextBox方法实现，并且在form表单标签之内，@Html.TextBox共有5个重载，主要参数如下所示：

  1. expression：表达式名称，一般用于表示文本框的name。
  2. value：文本框中的值，可以绑定模型中的值。
  3. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style="color:red;width=100px",@class="link"}。
  4. format：格式

Label主要用于显示只读文本。共有3个重载，主要参数如下所示：

  1. expression：表达式名称，一般用于表示当时显示的文本是对应于哪个控件。
  2. labelText：要显示的 文本内容。
  3. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style="color:red;width=100px",@class="link"}。

文本框和Label示例，如下所示：

@Html.Label("Id","User Id",new { style="width:90px;"});
@Html.TextBox("Id",Model.Id)
<br />
<br />
@Html.Label("Name","User Name",new { style="width:90px;"})
@Html.TextBox("Name",Model.Name)
<br />
<br />
@Html.Label("Mail","E-Mail",new { style="width:90px;"})
@Html.TextBox("Mail",Model.Email)

注意：以上@Html.Text三个地方都一致，但是在生成的原生Html中，前两个有data-val="true" data-val-required="the field is required"属性，在Mail中并没有这两个属性，这又是为什么呢？

密码框

密码框，主要用于输入密码，相当于input type="password"，用@Html.Password辅助标签实现，主要有2个重载，主要参数有以下三个：

  1. expression：表达式名称，一般用于表示文本框的name。
  2. value：密码框中的值，可以绑定模型中的值，也可以为空
  3. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new { placeHolder="请输入密码"}。

密码框示例：

@Html.Label("Pwd","Password",new { style="width:90px;"})
@Html.Password("Pwd",null,new {placeHolder="请输入密码"})

单选框和复选框

单选框主要用于从多个选项中选择一个，各个选项之间是互斥的。单选框用@Html.RadioButton表示，主要有3个重载，各个参数说明如下：

  1. expression：表达式名称，一般用于表示文本框的name。
  2. value：单选框的值
  3. isChecked：是否默认选中
  4. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new { placeHolder="请输入密码"}。

单选框示例如下所示：

@Html.Label("Sex","性别",new { style="width:90px;"})
@Html.RadioButton("Sex","Male",false) <span>男</span>
@Html.RadioButton("Sex", "FeMale", false) <span>女</span>

复选框主要用于多个选项中选择一个或多个，各个选项之间是兼容的。复选框用@Html.CheckBox表示，主要有3个重载，各个参数说明如下：

  1. expression：表达式名称，一般用于表示文本框的name。
  2. isChecked：是否默认选中
  3. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new { value="pingpang" }

复选框示例，如下所示：

@Html.Label("Hobby","爱好",new { style="width:90px;"})
@Html.CheckBox("Hobby",false,new { value="football" }) <span>足球</span>
@Html.CheckBox("Hobby",false,new { value="basketball" }) <span>篮球</span>
@Html.CheckBox("Hobby",false,new { value="pingpang" }) <span>乒乓球</span>

文本域

文本域主要用于输入大量文本内容，一般显示为多行多列的文本输入框。共有4个重载，各个参数说明如下所示：

  1. expression：表达式名称，一般用于表示文本框的name。
  2. value：文本域内容
  3. rows：行数
  4. columns：列数
  5. htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象。

文本域示例，如下所示：

@Html.Label("Description","简介",new { style="width:90px;"})
@Html.TextArea("Description",null,5,20,new {})

完整示例

上述介绍了form , label，textbox，passord，radio，checkbox，textarea，actionlink等辅助标签，完整代码如下所示：

@model DemoCoreMVC.Models.User;
@*
    <a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width=100px">点击跳转</a>
    等价于
*@
@Html.ActionLink("点击跳转","Index","Student",new {id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})
<br />
@Html.RouteLink("点击跳转","Default",new {controller="Student",action="Index", id=1,name="公子小六"},new {style="color:red;width=100px",@class="link"})
@using (Html.BeginForm("Save","User",FormMethod.Post))
{
    @Html.Label("Id","User Id",new { style="width:90px;"});
    @Html.TextBox("Id",Model.Id)
    <br />
    <br />
    @Html.Label("Name","User Name",new { style="width:90px;"})
    @Html.TextBox("Name",Model.Name)
    <br />
    <br />
    @Html.Label("Mail","E-Mail",new { style="width:90px;"})
    @Html.TextBox("Mail",Model.Email)
    <br />
    <br />
    @Html.Label("Pwd","Password",new { style="width:90px;"})
    @Html.Password("Pwd",null,new {placeHolder="请输入密码"})
    <br />
    <br />
    @Html.Label("Sex","性别",new { style="width:90px;"})
    @Html.RadioButton("Sex","Male",false) <span>男</span>
    @Html.RadioButton("Sex", "FeMale", false) <span>女</span>
    <br />
    <br />
    @Html.Label("Hobby","爱好",new { style="width:90px;"})
    @Html.CheckBox("Hobby",false,new { value="football" }) <span>足球</span>
    @Html.CheckBox("Hobby",false,new { value="basketball" }) <span>篮球</span>
    @Html.CheckBox("Hobby",false,new { value="pingpang" }) <span>乒乓球</span>
    <br />
    <br />
    @Html.Label("Description","简介",new { style="width:90px;vertical-align:top;"})
    @Html.TextArea("Description",null,3,20,new {})
}

与上述辅助标签对应的Html原生代码，如下所示：

<a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width:100px">点击跳转</a>
<br>
<a class="link" href="/Student/Index/1?name=%E5%85%AC%E5%AD%90%E5%B0%8F%E5%85%AD" style="color:red;width:100px">点击跳转</a>
<form action="/User/Save" method="post">
    <label for="Id" style="width:90px;">User Id</label>
    <input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="text" value="1">    <br>
    <br>
    <label for="Name" style="width:90px;">User Name</label>
    <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="公子小六">    <br>
    <br>
    <label for="Mail" style="width:90px;">E-Mail</label>
    <input id="Mail" name="Mail" type="text" value="Alan.hsiang@qq.com">
    <br>
    <br>
    <label for="Pwd" style="width:90px;">Password</label>
    <input id="Pwd" name="Pwd" placeholder="请输入密码" type="password">
    <br>
    <br>
    <label for="Sex" style="width:90px;">性别</label>
    <input id="Sex" name="Sex" type="radio" value="Male"> <span>男</span>
    <input id="Sex" name="Sex" type="radio" value="FeMale"> <span>女</span>
    <br>
    <br>
    <label for="Hobby" style="width:90px;">爱好</label>
    <input id="Hobby" name="Hobby" type="checkbox" value="football"> <span>足球</span>
    <input id="Hobby" name="Hobby" type="checkbox" value="basketball"> <span>篮球</span>
    <input id="Hobby" name="Hobby" type="checkbox" value="pingpang"> <span>乒乓球</span>
    <br>
    <br>
    <label for="Description" style="width:90px;vertical-align:top;">简介</label>
    <textarea cols="20" id="Description" name="Description" rows="3"></textarea>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8BFjNYa4u1JEvSFtRevYkrqryxwT0_r_eRNKsK4VToEBDTdl_uU7Qt7Z3_2Eu8xd0eiz_eMhzkSssfX-kTgLnui_qq7uXql9na9LwfkmvViszQE499vE9vrap83T6vhV16A9nEK6PPY6gzpPMlnWiVc">
    <input name="Hobby" type="hidden" value="false">
    <input name="Hobby" type="hidden" value="false">
    <input name="Hobby" type="hidden" value="false">
</form>

对应的生成的页面，如下所示：

以上就是ASP.NET Core MVC 从入门到精通之Html辅助标签第一部分内容。

文章标签：
C#
.NET
前端开发
数据安全/隐私保护
数据库
开发框架
关键词：
.NET core
ASP Core
ASP.NET core
ASP入门
ASP core入门
老码识途
目录
相关文章
Net分享
|
14天前
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入（DI）注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入（DI）注册过程的开源库，支持自动扫描和注册服务。通过简单的配置，开发者可以轻松地从指定程序集中筛选、注册服务，并设置其生命周期，同时支持服务装饰等高级功能。适用于大型项目，提高代码的可维护性和简洁性。仓库地址：&lt;https://github.com/khellang/Scrutor&gt;
Net分享
36 5
小王老师呀
|
2月前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9，此版本与 .NET 8 的 OData 库保持一致，改进了数据编码以符合 OData 规范，并放弃了对旧版 .NET Framework 的支持，仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`，优化了内存使用和序列化速度。
小王老师呀
96 0
shiningrise
|
1月前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案，其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型，实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法，展示了 gRPC 在 C# 中的基本使用方法。
shiningrise
41 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
长梦
|
22天前
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成：从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL，包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时，文章还探讨了常见问题及其解决方法，如处理复杂查询、错误处理、性能优化和实现认证授权等，旨在帮助开发者构建灵活且高效的API。
长梦
24 3
三三是该溜子
|
20小时前
|
移动开发 前端开发 Java
【HTML】——VSCode 基本使用入门和常见操作
html，前端，VSCode使用
三三是该溜子
14 5
shiningrise
|
2月前
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
shiningrise
35 1
小王老师呀
|
3月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器，可在操作方法执行前后运行代码，适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法，可以统一处理日志、验证及异常。创建并注册自定义筛选器类，能提升代码的可维护性和复用性。
小王老师呀
48 3
长梦
|
3月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core，一个轻量级、开源的跨平台框架，专为构建高性能Web应用设计。通过简单步骤，你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题，并提供了实用示例代码以助于理解与避免错误，帮助开发者更好地掌握ASP.NET Core的核心概念。
长梦
111 3
小徐在进步
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表（`&lt;ul&gt;`嵌套`&lt;li&gt;`）、有序列表（`&lt;ol&gt;`嵌套`&lt;li&gt;`）和定义列表（`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`）。
小徐在进步
71 19
追逐时光者
|
2月前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架
追逐时光者
68 0

热门文章

最新文章

  • 1
    asp.net中FCKeditor的调用（31）
  • 2
    ASP.NET Web API 应用教程（一） ——数据流使用
  • 3
    关于Win2003下ASP无故停止
  • 4
    无影宣布升级全新ASP云流协议
  • 5
    无法安装MVC3，错误提示：安装KB2483190（vs10-kb2483190）出错
  • 6
    mvc部署在IIS7上不能访问
  • 7
    【MVC】AJAX+PartialView实现商城首页的楼层加载
  • 8
    MVC ajaxSubmit上传图片
  • 9
    Spring MVC 注解开发
  • 10
    MVC3.0 采用Jquery实现局部刷新
  • 1
    ASP.NET AJAX使用方法概述（三）
    63
  • 2
    C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
    80
  • 3
    Asp.net 2.0专题之一：MasterPage(2)
    42
  • 4
    安装ASP.NET AJAX (一安装)
    117
  • 5
    利用Visual Basic构建高效的ASP.NET Web应用
    109
  • 6
    JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
    87
  • 7
    ASP.NET公立医院健康体检信息管理系统源码
    116
  • 8
    ASP.NET三甲医院手术麻醉信息管理系统源码 对接麻醉机、监护仪、血气分析仪
    79
  • 9
    asp.net中条件查询+分页
    72
  • 10
    进入ASP .net mvc的世界
    93

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • JSP快速入门

    • 相关电子书

    更多
  • 天猫 HTML5 互动技术实践
  • Java Spring Boot开发实战系列课程【第7讲】：Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • WEB网页编程实战
    • 下一篇
    DataWorks售前咨询