超链接
- 超链接在HTML中是a标签，在.NET中可以通过@Html.ActionLink或者@Html.RouteLink实现
- ActionLink方法具有7个重载，各个参数的含义如下：
- linkText：超链接显示文本，不可为空
- actionName：链接的目标方法名称
- controllerName：链接的控制器名称，可跨控制器跳转
- routeValues：object类型的路由数据，可以接收匿名对象，如：new{
id = 1, name = “sleny”
} - htmlAttributes：超链接Html属性，如：style, class, width, height等；可以接收匿名对象，如：new{
style = “corlor:red;width:100px”, @class = “link”
} - protocol：协议，如：http、https等
- hostname：主机服务器名称
- fragment：URL片段名称（定位点名称）
- RouteLink不支持如ActionLink中指定action，controller，只支持指定路由名称，其具有5个重载参数，含义如下：
- linkText：超链接显示文本，不可为空
- routeName：路由名称
- routeValues：object类型的路由数据，可以接收匿名对象，如：new{
id = 1, name = “Sleny”
} - htmlAttributes：超链接Html属性，如：style，class，width，height等；可以接收匿名对象，如：new{
style = “corlor:red;width:100px”, @class = “link”
}
示例
1 | // ActionLink |
【注】：因为class是C#的关键字，所有如果需要表示样式，需要添加@前缀
Form标签
form标签主要用于表单的提交，form辅助标签用@Html.BeginForm或者@Html.BeginRouteForm表示，且用@using包裹，用于表示form表单的起始和结束
1 | // 空表单 |
@Html.BeginForm重载参数如下所示：
- actionName：链接的目标方法名称
- controllerName：链接的控制器名称，可跨控制器跳转
- method：是form请求传递参数的方式，是一个枚举类型FormMethod，有Get和Post两种方式
- routeVaules：object类型的路由数据，可以接收匿名对象，如：new{id = 1, name = “Sleny”}
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style=”color:red;width=100px”,@class=”link”}
- antiforgety：是否将身份验证令牌添加到表单中，有助于防止请求伪造
- @Html.BeginRouteForm和@Html.BeginForm一致，主要是接收路由参数，不接受字符串格式的action和controller
文本框和Label
- 文本框通过@Html.TextBox方法实现，并且在form表单标签内，共有5个重载，主要参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- value：文本框中的值，可以绑定模型中的值
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style=”color:red;width:100px”,@class=”link”}
- format：格式
- label主要用于显示只读文本，共有3个重载，主要参数如下所示：
- expression：表达式名称，一般用于表示当时显示的文本是对应于哪个控件
- labelText：要显示的文本内容
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new {style=”color:red;width:100px”,@class=”link”}
示例
1 | @Html.Label("Id","User Id",new { style="width:90px;"}); |
密码框
主要用于输入密码，相当于input type = "password"，用@Html.Password辅助标签实现，有2个重载，主要参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- value：密码框中的值，可以绑定模型中的值，也可以为空
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new { placeHolder=”请输入密码”}
示例
1 | @Html.Label("Pwd","Password",new { style="width:90px;"}) |
单选框和复选框
- 单选框用@Html.RadioButton表示，有3个重载，主要参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- value：单选框的值
- isChecked：是否默认选中
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象
- 复选框用@Html.CheckBox表示，有3个重载，主要参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- isChecked：是否默认选中
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象，如：new { value=”123” }
示例
1 | // 单选框 |
文本域
主要用于大量文本内容输入，一般显示为多行多列的文本输入框，共有4个重载，参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- value：文本域内容
- rows：行数
- columns：列数
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象
示例
1 | @Html.Label("Description","简介",new { style="width:90px;"}) |
综合示例
1 | @model MvcDemo.Models.User; |
和上述代码一致的Html原生代码如下所示：
1 | <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.DropDownList表示，有6个重载，参数如下所示：
- expression：表达式名称，一般用于文本框的name
- selectList：下拉列表的数据源，IEnumerable
类型，一般用SelectList实现 - optionLabel：默认显示的文本
- htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象
示例
- 首先准备数据源，一般从数据库中获取
1
2
3
4
5
6
7
8
9List<City> cityList = new List<City>
{
new City() { Id = 1, Name = "北京" },
new City() { Id = 2, Name = "上海" },
new City() { Id = 3, Name = "广州" },
new City() { Id = 4, Name = "深圳" }
};
var citys = new SelectList(cityList, "Id", "Name");
ViewBag.Citys = citys; - 其中SelectList是IEnumerable
的实现类，传入list，并指定value和text即可 1
2@Html.Label("City","城市",new { style="width:90px;"})
@Html.DropDownList("City", ViewBag.Citys,"请选择",new {style="width:120px;"})
多选列表框
多选列表框主要用于显示多个信息，用户可以选择多个选项，用@Html.ListBox表示，共有3个重载，参数如下所示：
- expression：表达式名称，一般用于表示文本框的name
- selectList：下拉列表的数据源，IEnumerable
类型，一般用于SelectList实现 - htmlAttributes：超链接Html属性，如：style，class，width，height等，可以接收匿名对象
示例
1 | @Html.Label("MultiCity","多选城市",new { style="width:90px;vertical-align:top;"}) |
对应的HTML代码
1 | <label for="City" style="width:90px;">城市</label> |
Html转义
有时候在输出特定格式的内容时，C#会进行转义，从而实现不了想要的效果，则需要使用@Html.Raw方法，共有2个重载，主要参数如下：
- value：需要是输出的内容，有string和TModel两种类型上述方法会输出原生Html
1
@Html.Raw("<font color='red'>大家好，这是测试Raw输出</font>")
<font color='red'>大家好，这是测试Raw输出</font>，在页面上显示红色的文本内容，而不是输出转义后的内容。
模型校验
- 在MVC中，验证发生在客户端和服务端
- .NET已经将验证抽象化为验证属性，包含验证代码，可以直接使用
常用的内置验证属性如下所示：
- [CreditCard]：验证属性是否具有信用卡格式。
- [Compare]：验证某个模型中的两个属性是否匹配。
- [EmailAddress]：验证属性是否具有电子邮件格式。
- [Phone]：验证属性是否具有电话格式。
- [Range]：验证属性值是否落在给定范围内。
- [RegularExpression]：验证数据是否与指定的正则表达式匹配。
- [Required]：将属性设置为必需属性。
- [StringLength]：验证字符串属性是否最多具有给定的最大长度。
- [Url]：验证属性是否具有 URL 格式。
校验步骤
- 模型中增加校验特性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// Models/User.cs
using System.ComponentModel.DataAnnotations;
namespace MvcDemo.Models
{
public class User
{
[]
[]
public int Id { get; set; }
[]
public string Name { get; set; }
[]
[]
public string Email { get; set; }
}
} - 引入校验分部视图
1
2
3
4// <!--Edit.cshtml文件的底部增加以下引入部分视图-->
@section Scripts{
@(await Html.PartialAsync("_ValidationScriptsPartial"))
} - 增加校验信息标签
在Edit.cshtml需要显示校验信息的地方，增加@Html.ValidationMessageFor信息展示【注】：模型校验要生效，则@Html.TextBox/@Html.Label/@Html.ValidationMessageFor，三者之间的Expression要相同，否则不会生效1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20// Views/Edit.cshtml
@using (Html.BeginForm("Save","User",FormMethod.Post))
{
@Html.Label("Id","User Id",new { style="width:90px;"});
@Html.TextBox("Id",Model.Id)
@Html.ValidationMessageFor(p=>p.Id)
<br />
<br />
@Html.Label("Name","User Name",new { style="width:90px;"})
@Html.TextBox("Name",Model.Name)
@Html.ValidationMessageFor(p=>p.Name)
<br />
<br />
@Html.Label("Email","E-Mail",new { style="width:90px;"})
@Html.TextBox("Email",Model.Email)
@Html.ValidationMessageFor(p=>p.Email)
<br />
<br />
<input type="submit" value="保存" class="btn btn-primary" />
}