ASP.NET Core 表单中的标记帮助程序

最新推荐文章于 2025-04-16 13:47:41 发布

原创最新推荐文章于 2025-04-16 13:47:41 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#c#

c# 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了ASP.NET Core中表单标记帮助程序的使用，包括asp-controller / asp-action的作用，asp-route-*的详细解释，如asp-route和asp-route-returnurl，以及data-*全局属性的定义和用法。同时，提到了asp-for的用途，它用于根据模型类型设置HTML type特性，并提供强类型化的支持。

ASP.NET Core 表单中的标记帮助程序

1）asp-controller / asp-action

作用

通过在cshtml 页面中设置 form 表单中的这两个属性，自动在生成的对应 html文件中的form表单中添加 action属性。
生成隐藏的请求验证令牌，防止跨站点请求伪造（在 HTTP Post 操作方法中与 [ValidateAntiForgeryToken] 属性配合使用时）（巴拉巴拉，看不明白）
示例：

    cshtml 代码
    c#
   <form asp-controller="Demo" asp-action="Register" method="post">
    <!-- Input and Submit elements -->
</form>

  html 代码
  <form method="post" action="/Demo/Register">
    <!-- Input and Submit elements -->
    <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>

MVC 运行时通过表单标记帮助程序属性 asp-controller 和 asp-action 生成 action 属性值。表单标记帮助程序还会生成隐藏的请求验证令牌，防止跨站点请求伪造（在 HTTP Post 操作方法中与 [ValidateAntiForgeryToken] 属性配合使用时）。保护纯 HTML 表单免受跨站点请求伪造的影响很难，但表单标记帮助程序可提供此服务。

2）asp-route-*

1. asp-route

示例 cshtml

cshtml
<form  method="post">
    <button asp-route="Custom">登录</button>
    <input type="image" src="没有啦" alt="click me " asp-route="Custom"/>
</form>

控制器代码
  [Route(**"/Gome/lalala",** Name = "Custom")]
  public string lsq(){
         return "贼鸡儿帅";
   }
   html代码
   
<input type="image" src="没有啦" alt="click me " **formaction="/Gome/lalala"**>

//注释 formaction 使用方式：
formaction 属性规定当表单提交时处理输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
注释：formaction 属性适用于 type="submit" 和 type="image"。

<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php" value="提交">
</form>

2. asp-route-returnurl

一般在新建使用个人用户帐户身份验证的 Web 应用时生成，使用 asp-route-returnurl 属性：

<form asp-controller="Account" asp-action="Login"
 asp-route-returnurl="@ViewData["ReturnUrl"]"
 method="post" class="form-horizontal" role="form">

使用时，returnUrl 仅会在用户尝试访问授权资源，但用户未验证身份或未获得授权的情况下自动填充进来。如果尝试执行未经授权的访问，安全中间件会使用 returnUrl 将用户重定向return属性中。

3. data-* 全局属性

定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>
<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>
</body>
</html>

4） asp-for 使用

作用
根据模型类型和应用于模型属性的数据注释特性设置 HTML type 特性值。
如果已经指定，不会覆盖 HTML type 属性值。
通过应用于模型属性的数据注释特性生成 HTML5 验证特性。
提供强类型化。如果属性的名称更改，但未更新标记帮助程序，则会报错。

Input 标记帮助程序根据 .NET 类型设置 HTML type 属性。下表列出一些常见的 .NET 类型和生成的 HTML 类型（并未列出每个 .NET 类型）。

.NET 类型	输入类型
Bool	type=“checkbox”
String	type=“text”
DateTime	type=“datetime-local”
Byte	type=“number”
Int	type=“number”
Single、Double	type=“number”

下表显示输入标记帮助程序会将特定输入类型和一些常见数据注释属性进行映射（并未列出每个验证属性）：

Attribute	输入类型
[EmailAddress]	type=“email”
[Url]	type=“url”
[HiddenInput]	type=“hidden”
[Phone]	type=“tel”
[DataType(DataType.Password)]	type=“password”
[DataType(DataType.Date)]	type=“date”
[DataType(DataType.Time)]	type=“time”

示例:

创建类
using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}

在cshtml 编写
@model RegisterViewModel（下方的 asp-for 将与此类进行绑定）
<form asp-controller="Demo" asp-action="RegisterInput" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Register</button>
</form>

html代码生成 为
<form method="post" action="/Demo/RegisterInput">
      Email:
      <input type="email" data-val="true"
             data-val-email="The Email Address field is not a valid email address."
             data-val-required="The Email Address field is required."
             id="Email" name="Email" value=""><br>
      Password:
      <input type="password" data-val="true"
             data-val-required="The Password field is required."
             id="Password" name="Password"><br>
      <button type="submit">Register</button>
      <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
   </form>

未完待续。。。

参考链接
参考链接