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

news2024/11/25 9:27:34

随着技术的发展，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辅助标签第一部分内容。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/630245.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

微信小程序快速入门【一】

微信小程序快速入门【一】

微信小程序快速入门【一】 文章目录 微信小程序快速入门【一】&#x1f468;‍&#x1f3eb;内容1&#xff1a;背景&#x1f468;‍⚖️内容2&#xff1a;准备工作&#x1f468;‍&#x1f4bb;内容3&#xff1a;新建一个小程序&#x1f349;文末推荐 &#x1f468;‍&#x1f…
阅读更多...
有关 python 切片的趣事

有关 python 切片的趣事

哈喽大家好&#xff0c;我是咸鱼 今天来讲一个我在实现 python 列表切片时遇到的趣事 在正式开始之前&#xff0c;我们先来了解一下切片&#xff08;slice&#xff09; 切片操作是访问序列&#xff08;列表、字符串…&#xff09;中元素的另一种方法&#xff0c;它可以访问一…
阅读更多...
莱特兄弟的家庭教育

莱特兄弟的家庭教育

莱特兄弟的三个设计经验 你可以从他们如何使得一辆自行车飞行中学到很多东西 克莱夫汤普森 大家都知道莱特兄弟是第一个实现动力飞行的人——他们的飞机于1903年12月17日在北卡罗来纳州的基蒂霍克起飞。 但是在实现这一突破之前的过程? 这真是令人感兴趣&#xff0c;并且充满了…
阅读更多...
【PWN · ret2text | ‘/bin/sh‘写在bss段】[HNCTF 2022 Week1]ezr0p32

【PWN · ret2text | ‘/bin/sh‘写在bss段】[HNCTF 2022 Week1]ezr0p32

目录 前言 一、题目 二、解题过程 payload的构造 三、exp 总结 前言 一直在做libc的中规中矩的题目&#xff0c;遇到一题有点老的类型的题目有些陌生。但其实其中原理比较简单&#xff0c;但是涉及到/bin/sh获取的常规操作&#xff0c;而自己也没整理过&#xff0c;于…
阅读更多...
Git-＞分支

Git-＞分支

⭐作者介绍&#xff1a;大二本科网络工程专业在读&#xff0c;持续学习Java&#xff0c;努力输出优质文章 ⭐作者主页&#xff1a;逐梦苍穹 ⭐所属专栏&#xff1a;Git ⭐如果觉得文章写的不错&#xff0c;欢迎点个关注一键三连&#x1f609;有写的不好的地方也欢迎指正&#x…
阅读更多...
springboot+vue体育馆场地器材管理系统的设计与实现

springboot+vue体育馆场地器材管理系统的设计与实现

体育馆管理系统有管理员和用户两个角色。用户功能有场地信息&#xff0c;员工信息&#xff0c;器材信息&#xff0c;留言反馈&#xff0c;个人中心。管理员功能有个人中心&#xff0c;用户管理&#xff0c;场地信息管理&#xff0c;场地类型管理&#xff0c;员工信息管理&#…
阅读更多...
Redis - 缓存雪崩，缓存穿透，缓存击穿

Redis - 缓存雪崩，缓存穿透，缓存击穿

Redis是一个完全开源的&#xff0c;遵守BSD协议的&#xff0c;高性能的key-value的数据存储结构系统&#xff0c;它支持数据持久化&#xff0c;可以将内存中的数据保存在磁盘中。不仅支持简单的key-value类型的数据结构&#xff0c;同事还提供list&#xff0c;zset&#xff0c;…
阅读更多...
ChatGPT+小红书的8种高级玩法

ChatGPT+小红书的8种高级玩法

掌握了这套万能命令&#xff0c;让你快速做出小红书爆款文案! 一、用ChatGPT做定位 我是一个大龄的普通人&#xff0c;没有什么特殊的技能&#xff0c;接下来&#xff0c;请你作为一位小红书的账号定位专家&#xff0c;通过与我对话的方式&#xff0c;为我找到我的小红书账号定…
阅读更多...
Hive | 报错锦集

Hive | 报错锦集

知识目录 一、写在前面✨二、Hive启动hiveserver2报错&#x1f525;三、HiveServer2启动方式✨四、Hive执行SQL语句报一大堆日志&#x1f349;五、Hive使用Load加载数据报错&#x1f36d;六、Hive执行含Count的SQL语句报错&#x1f349;七、Hive执行SQL语句报/bin/java&#x1…
阅读更多...
golang 读取csv文件到excel--推荐使用【不同实现方式】

golang 读取csv文件到excel--推荐使用【不同实现方式】

需求&#xff1a;把下面的csv文件&#xff0c;自动写入到excel模版中&#xff0c; 1.自动按照csv的行数&#xff0c;以日期时间名问sheet名成写入到excel表的sheet名称中 2.自动复制excel的第一个sheet的所有内容&#xff0c;同时用csv文件的内容填充特定区域内容 xy1.csv文…
阅读更多...
动态组件：类组件

动态组件：类组件

函数组件的缺点&#xff1a; 第1次渲染组件&#xff0c;把函数执行&#xff0c;产生一个私有的上下文: EC(V)&#xff0c;把解析出来的props「含children」 传递进来「但是被冻结了」&#xff0c;对函数返回的JSX元素「virtualDOMJ进行渲染。当我们点击按钮的时候&#xff0c;…
阅读更多...
信道容量详解

信道容量详解

本专栏包含信息论与编码的核心知识&#xff0c;按知识点组织&#xff0c;可作为教学或学习的参考。markdown版本已归档至【Github仓库&#xff1a;https://github.com/timerring/information-theory 】或者公众号【AIShareLab】回复 信息论 获取。 文章目录 信道容量信道容量的…
阅读更多...
Django--创建项目与app的初步认识

Django--创建项目与app的初步认识

目前我是想学习Django来搭建一个网站&#xff0c;记录一下我学初学的过程与遇到的问题。 我直接使用pycharm来创建一个Django项目&#xff0c;就不用在终端输入命令行的方式创建虚拟环境。 在终端输入&#xff0c;python manage.py runserver&#xff0c;点击连接web页面进行测…
阅读更多...
为什么说python里面函数参数的默认值最好不要使用可变类型

为什么说python里面函数参数的默认值最好不要使用可变类型

之前发布过Python中函数的介绍&#xff1a;Python中函数的介绍 &#xff0c;今天来做一个小小的补充说明&#xff1a;为什么说python里面函数参数的默认值最好不要使用可变类型 Python中&#xff0c;函数参数的默认值是在函数定义时计算的&#xff0c;而不是在每次函数调用时计…
阅读更多...
机器人与外星人的对话：中国传统哲学的精髓是什么？

机器人与外星人的对话：中国传统哲学的精髓是什么？

一天&#xff0c;机器人Robot和外星人Vick相遇&#xff0c;他俩聊了很多&#xff0c;主要是关于中国传统哲学的&#xff0c;下面是他俩的对话记录。 R&#xff1a;很多人表示他们很痛苦&#xff0c;禅师说那是因为“无明”&#xff0c;外星人&#xff0c;你怎么看&#xff1f; …
阅读更多...
【P58】JMeter 简单数据写入器（Simple Data Writer）

【P58】JMeter 简单数据写入器（Simple Data Writer）

文章目录 一、简单数据写入器&#xff08;Simple Data Writer&#xff09;参数说明二、准备工作三、测试计划设计 一、简单数据写入器&#xff08;Simple Data Writer&#xff09;参数说明 可以将原始数据直接保存到文件 使用场景&#xff1a;一般与 HTML 报告配合使用 使用…
阅读更多...
【Python文本处理】基于运动路线记录GPX的文件解析，及对经纬度坐标的数学模型运动速度求解

【Python文本处理】基于运动路线记录GPX的文件解析，及对经纬度坐标的数学模型运动速度求解

【Python文本处理】基于运动路线记录GPX的文件解析&#xff0c;及对经纬度坐标的数学模型运动速度求解 解析 GPX文件格式 GPX文件本身其实就是坐标、海拔、时间、心率等综合性的xml文件 如图&#xff1a; 海拔&#xff1a;ele 时间&#xff1a;time 心率&#xff1a;heartr…
阅读更多...
【用pytorch进行LSTM模型的学习】

【用pytorch进行LSTM模型的学习】

用pytorch进行LSTM模型的学习 LSTM模型用pytorch&#xff0c;采用LSTM对seaborn数据集做预测基本步骤数据的观察特殊数据处理数据归一化模型的构建与选择模型的保存 飞机航班流量预测示例 LSTM模型 LSTM模型长下面这样&#xff0c;主要用在时间序列的预测&#xff0c;具有比RN…
阅读更多...
5Why分析法

5Why分析法

5Why分析法 由丰田公司的大野耐一提出的对一个问题点连续以5个“为什么”来自问&#xff0c;以追究其根本原因的分析方法。 模型介绍 所谓5Why分析法&#xff0c;又称“5问法”&#xff0c;也就是对一个问题点连续以5个“为什么”来提问&#xff0c;以追究其根本原因。虽为5个…
阅读更多...
代码随想录第53天

代码随想录第53天

1.最长公共子序列&#xff1a; 红字的问题都是和最长重复子数组那题的代码进行比较的出来的 动规五部曲分析如下&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串tex…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023