ASP.NET Core MVC_Tag Helper
2024-05-20 19:46:32
文章目录
- Tag Helper
- 激活 Tag Helpers
- Anchor Tag Helpers
- Label Tag Helpers
- Input Tag Helpers
- 表单验证
- 环境Tag Helper——environment
- 创建自定义Tag Helpers
- 使用Tag Helpers创建元素
代码
Tag Helper
ASP.NET Core MVC提供了一种可用于代替HTML Helpers：Tag Helpers的新技术。如今，许多JavaScript库使用自己的属性（例如Angular）扩展HTML，因此能够使用服务器端技术使用自定义HTML属性非常方便。 许多ASP.NET Core MVC Tag Helpers都有前缀asp-，因此您可以轻松查看服务器上已解决的内容。 这些属性不会发送到客户端，而是在服务器上解析以生成HTML代码。
激活 Tag Helpers
要使Tag Helpers可用于所有视图，请将addTagHelper语句添加到共享文件_ViewImports.cshtml
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
- *：打开所有Tag Helpers的程序集
- Microsoft.AspNetCore.Mvc.TagHelpers：Tag Helpers的程序集
- removeTagHelper：停用TagHelper。
- 可能会和脚本库发生命名冲突。使用内置的Tag Helpers和asp-前缀很可能不会发生冲突，但是其他和Tag Helper很容易发生冲突
Anchor Tag Helpers
Controller
public IActionResult Index()
{return View();
}
View
@{ViewData["Title"] = "Index";
}
<a asp-controller="Home" asp-action="Index">Home</a>
<br />
@*下面两个a标签不需要写asp-controller="Home"，因为它们和当前视图来自同一controller*@
<a asp-action="LabelHelper">Label Tag Helper</a>
<br />
<a asp-action="InputTypeHelper">Input Type Tag Helper</a>
Html代码
<a href="/">Home</a>
<br />
<a href="/TagHelpers/LabelHelper">Label Tag Helper</a>
<br />
<a href="/TagHelpers/InputTypeHelper">Input Type Tag Helper</a>
Label Tag Helpers
Controller
private Menu GetSampleMenu() => new Menu{Id = 1,Text = "Schweinsbraten mit Knödel und Sauerkraut",Price = 6.9,Date = new DateTime(2018, 10, 5),Category = "Main"};public IActionResult LabelHelper() => View(GetSampleMenu());
Model
设置Display的name会在使用Label Tag Helper上显示
public class Menu
{public int Id { get; set; }[Required, StringLength(50)][Display(Name = "Menu")]public string Text { get; set; }[Display(Name = "Price"), DisplayFormat(DataFormatString = "{0:C}")]public double Price { get; set; }[DataType(DataType.Date)]public DateTime Date { get; set; }[StringLength(10)]public string Category { get; set; }
}
View
@model MVCSampleApp.Models.Menu
@{ViewBag.Title = "Label Tag Helper";
}
<h2>@ViewBag.Title</h2>
<label asp-for="Text"></label>
<br />
<label asp-for="Price"></label>
<br />
<label asp-for="Date"></label>
Html代码
<label for="Text">Menu</label>
<br/>
<label for="Price">Price</label>
<br />
<label for="Date">Date</label>
Input Tag Helpers
Controller
public IActionResult InputHelper() => View(GetSampleMenu());
View
<div><label asp-for="Text"></label><input asp-for="Text"/>
</div>
<div><label asp-for="Price"></label><input asp-for="Price" />
</div>
<div><label asp-for="Date"></label><input asp-for="Date" />
</div>
Html代码
<div><label for="Text">Text</label><input type="text" data-val="true"data-val-length="The field Text must be a string with a maximum length of 50."data-val-length-max="50" data-val-required="The Text field is required."id="Text" name="Text"value="Schweinsbraten mit Knodel und Sauerkraut" />
</div>
<div><label for="Price">Price</label><input type="text" data-val="true"data-val-number="The field Price must be a number."data-val-required="The Price field is required."id="Price"name="Price" value="6.9" />
</div>
<div><label for="Date">Date</label><input type="date" data-val="true"data-val-required="The Date field is required." id="Date"name="Date"value="2018-10-05" />
</div>
表单验证
为了验证信息，Tag Helper使用asp-validation-for扩展了span。
View
@model MVCSampleApp.Models.Menu
@{ViewData["Title"] = "FormHelper";
}<form method="post" asp-method="FormHelper"><input asp-for="Id" hidden="hidden" /><hr /><label asp-for="Text"></label><div><input asp-for="Text" /><span asp-validation-for="Text"></span></div><br /><label asp-for="Price"></label><div><input asp-for="Price" /><span asp-validation-for="Price"></span></div><br /><label asp-for="Date"></label><div><input asp-for="Date" /><span asp-validation-for="Date"></span></div><label asp-for="Category"></label><div><Input asp-for="Category" /><span asp-validation-for="Category"></span></div><Input type="submit" value="Submit" />
</form>
Controller
使用ModelState验证表单
public IActionResult FormHelper() => View(GetSampleMenu());
[HttpPost]
public IActionResult FormHelper(Menu m) {if (!ModelState.IsValid){return View(m);}return View("ValidationHelperResult", m);
}
环境Tag Helper——environment
环境 Tag Helper 可以将特定的UI仅在特定的环境可用。
@*include：当是Development和Staging环境时运行*@
<environment include="Development, Staging"><div>This shows up for the <strong>Development</strong>and <strong>Staging</strong> environments</div>
</environment>
@*exclude：不是Production环境时运行*@
<environment exclude="Production"><div>Not visible in the <strong>Production</strong>environment</div>
</environment>
可以通过设置环境变量ASPNETCORE_ENVIRONMENT（可以使用Visual Studio中的项目设置（）或配置launchsettings.json文件来配置活动环境。
创建自定义Tag Helpers
需要创建一个新的项目（可以是类库）且引用Microsoft.AspNetCore.All 和 Markdig。
如果在原来的项目添加，很有可能addTagHelper没有添加到。
MarkdownTagHelper——此类在新的项目中
namespace TagHelperSamples
{/// <summary>/// HtmlTargetElement特性用于指定用于指定Tag Helper的元素或者属性的名称/// </summary>[HtmlTargetElement("markdown", TagStructure = TagStructure.NormalOrSelfClosing)][HtmlTargetElement(Attributes = "markdownfile")]public class MarkdownTagHelper : TagHelper{/// <summary>/// 当使用HtmlAttributeName属性注释时，/// 基础结构会自动应用Tag Helper的属性。 /// 这里，属性MarkdownFile从markdownfile属性获取其值/// </summary>[HtmlAttributeName("markdownfile")]public string MarkdownFile { get; set; }private readonly IHostingEnvironment _env;// Tag Helper可以使用依赖注入。 // 因为MarkdownTagHelper需要wwwroot文件的目录，// 并且该目录是从IHostingEnvironment接口返回的，// 所以此接口将在构造函数中注入public MarkdownTagHelper(IHostingEnvironment env) => _env = env;/// <summary>/// 需要实现Process或者ProcessAsync。/// /// 考虑了MarkdownTagHelper的两种不同用途。/// 一种用法是指定markdown元素，其中内容作为元素的子元素，另一个是markdownfile属性引用Markdown文件。/// /// <param name="context"></param>/// <param name="output"></param>/// <returns></returns>public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output){if (context == null)throw new ArgumentNullException(nameof(context));if (output == null)throw new ArgumentNullException(nameof(output));string markdown = string.Empty;// 使用属性markdownfile，则设置MarkdownFile属性if (MarkdownFile != null){//WebRootPath返回Web文件的根路径。string fileName = Path.Combine(_env.WebRootPath, MarkdownFile);markdown = File.ReadAllText(fileName);}// 使用markdown元素读取此元素的内容else{// 要检索内容，需要调用GetChildContentAsync方法，// 并且在此方法返回后，需要调用GetContent方法，该方法最终返回HTML页面中指定的内容。markdown = (await output.GetChildContentAsync()).GetContent();}// 使用Markdig库的Markdown类，Markdown内容将转换为HTML。// 然后将此HTML代码放入调用SetHtmlContent方法的TagHelperOutput的内容中string x = Markdown.ToHtml(markdown);output.Content.SetHtmlContent(Markdown.ToHtml(markdown));}}
}
Controler——原有项目中
public IActionResult Markdown() => View();
View——原有项目中
使用markdown标签
<h2>Markdown Sample</h2>
@*markdown中的文必须按照此格式，每行之前不要有空格，否则可能会解析不出来*@
<markdown>
## This is simple Markdown
[C# Blog](https://csharp.christiannagel.com)* one
* two
* three
</markdown>View——原有项目中使用
使用 markdownfile 属性
<div markdownfile="Sample.md"></div>
结果
使用
<div markdownfile="Sample.md"></div>
使用Tag Helpers创建元素
下一个自定义Tag Helper扩展了HTML表元素，以便为列表中的每个项目和每个属性的列显示一行。数据信息模型传递给Tag Helper，Tag Helper动态创建table，tr，th和td元素。
创建的信息是使用反射完成的。像这样的类似功能也可以在view component中实现，并且view helpers可以与Tag Helper一起使用。
**TableTagHelper **——此类在新的项目中
namespace TagHelperSamples
{/// <summary>/// 这个HtmlTargetElement指定table应用本helper和属性items/// 此attribute用于设置HtmlAttributeName属性指定的Items属性/// </summary>[HtmlTargetElement("table", Attributes = ItemsAttributeName)]public class TableTagHelper : TagHelper{private const string ItemsAttributeName = "items";[HtmlAttributeName(ItemsAttributeName)]public IEnumerable<object> Items { get; set; }/// <summary>/// /// 备注：如果使用Tag Helper时指定了table元素，已经定义了行和列，可以将结果与现有内容合并。/// </summary>/// <param name="context">TagHelperContext包含应用了Tag Helper的HTML元素的属性以及所有子元素</param>/// <param name="output"></param>public override void Process(TagHelperContext context, TagHelperOutput output){if (context == null)throw new ArgumentNullException(nameof(context));if (output == null)throw new ArgumentNullException(nameof(output));// TagBuilder帮助创建具有属性的html元素var table = new TagBuilder("table");table.GenerateId(context.UniqueId, "id");var attributes = context.AllAttributes.Where(a => a.Name != ItemsAttributeName).ToDictionary(a => a.Name);//向TagBuilder添加属性，需要所有属性名称及其值的字典table.MergeAttributes(attributes);PropertyInfo[] properties = CreateHeading(table);foreach (var item in Items){var tr = new TagBuilder("tr");foreach (var prop in properties){var td = new TagBuilder("td");td.InnerHtml.Append(prop.GetValue(item).ToString());tr.InnerHtml.AppendHtml(td);}table.InnerHtml.AppendHtml(tr);}output.Content.AppendHtml(table);}private PropertyInfo[] CreateHeading(TagBuilder table){var tr = new TagBuilder("tr");var heading = Items.First();// 使用反射访问此实例的属性，在Type对象上调用GetProperties方法，并在th（html元素）内写入属性的名称PropertyInfo[] properties = heading.GetType().GetProperties();foreach (var prop in properties){var th = new TagBuilder("th");th.InnerHtml.Append(prop.Name);tr.InnerHtml.AppendHtml(th);}table.InnerHtml.AppendHtml(tr);return properties;}}
}
Controler——原有项目中
public IActionResult CustomTable() => View(GetSampleMenus());private IList<Menu> GetSampleMenus() =>new List<Menu>{new Menu{Id = 1,Text = "Schweinsbraten mit Knödel und Sauerkraut",Price = 8.5,Date = new DateTime(2018, 10, 5),Category = "Main"},new Menu{Id = 2,Text = "Erdäpfelgulasch mit Tofu und Gebäck",Price = 8.5,Date = new DateTime(2018, 10, 6),Category = "Vegetarian"},new Menu{Id = 3,Text = "Tiroler Bauerngröst'l mit Spiegelei und Krautsalat",Price = 8.5,Date = new DateTime(2018, 10, 7),Category = "Vegetarian"}};
View
<table items="Model" class="sample"></table>
结果
ASP.NET Core MVC_Tag Helper相关推荐
- ASP.NET Core MVC – Tag Helper 组件
ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- 【ASP.NET Core】解决“The required antiforgery cookie xxx is not present”的错误
当你在页面上用 form post 内容时,可能会遇到以下异常: The required antiforgery cookie "????????" is not present ...
- ASP .NET Core Web开发之 Tag Helpers
Tag Helpers是一个非常好用的工具 官方链接:Tag Helpers in ASP.NET Core | Microsoft Docs What are Tag Helpers? Tag He ...
- ASP.NET Core 中文文档 第二章 指南（4.4）添加 Model
原文:Adding a model 作者:Rick Anderson 翻译:娄宇(Lyrics) 校对:许登洋(Seay).孟帅洋(书缘).姚阿勇(Mr.Yao).夏申斌 在这一节里,你将添加一些类来 ...
- ASP.NET Core MVC – Caching Tag Helpers
ASP.NET Core Tag Helpers系列目录,这是第二篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- 升级 asp.net core 1.1 到 2.0 preview
Upgrading to .NET Core 2.0 Preview 1 更新 依赖的类库 改为 标准库 2 web app 更改 csproj 文件---升级版本 <PropertyGrou ...
- ASP.NET Core 1.1 Preview 1 简介(包含.NETCore 1.1升级公告)
ASP.NET Core 1.1 Preview 1于2016年10月25日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强. 要将现有项目更新到ASP.NET Core 1.1 Pre ...
- ASP.NET Core - Razor页面之Handlers处理方法
简介 在前一篇文章中,我们讨论了Razor页面.今天我们来谈谈处理方法(Handlers). 我们知道可以将代码和模型放在 .cshtml 文件里面或与 .cshtml 匹配的 .cshtml.cs ...
- ASP.NET Core 基于角色的 JWT 令牌
原文:https://bit.ly/3vYljq3 作者:Rick Strahl 翻译:精致码农-王亮 声明:我翻译技术文章不是逐句翻译的,而是根据我自己的理解来表述的.其中可能会去除一些本人实在不知 ...
最新文章
- 取代MybatisPlus？阿里推出了新 ORM 框架！（两者对比参考）
- 浅尝key-value数据库（三）——MongoDB的分布式
- SharePoint 2013 Word 转换PDF服务介绍及示例
- Windows7 beta1 微软官方下载
- 如何用Veripacks替换构建模块
- IIoT 安防保卫战一触即发，Fortinet 亮剑
- 【今日CV 视觉论文速览】 19 Nov 2018
- 五子棋项目结束总结_五子棋编程思想小结
- 【Java从0到架构师】SpringBoot - 页面模版_Thymeleaf
- 指针知识(四)：指针数学计算
- 学习Java，真的可以月薪过万嘛？真实个人经历告诉你，记录了平时学习的内容以及学习过程中最真实的感受（一）
- python爬虫爬取快手视频多线程下载功能【fd的使用】
- ERP管理软件哪一家好？比较好的ERP管理系统软件推荐
- python信息技术答案_高中信息技术《Python语言》模块试卷习题.doc
- SDD-FIQA基于人脸相似度分布距离的无监督质量评估方法
- Premiere 视频基本调色
- android read_phone_state 代码,android - 用户10102和当前进程都没有android.permission.READ_PHONE_STATE - 堆栈内存溢出...
- 「手绘控笔技巧」最有效的控笔练习，让你少走很多弯路
- jsonDB使用手冊
- netlimiter 4 功能使用TCP UDP上行下行流量监控