asp.net core高级应用:TagHelper+Form

上一篇博客《asp.net core新特性(1):TagHelper》我讲解了TagHelper的基本用法和自定义标签的生成，那么我就趁热打铁，和大家分享一下TagHelper的高级用法~~，大家也可以在我的博客下随意留言。对于初步接触asp.net core的骚年可以看看我对TagHelper的了解和看法：《asp.net core新特性(1):TagHelper》

　　之后，我也会继续撰写博文，继续分享asp.net core的一些新特性，比如DI，ViewComponent以及bower等asp.net mvc中没有的新东西。

　　ok，咱们就开始吧~~

　　在之前我对TagHelper的分享当中提及了，TagHelper能够去替代原来在@Html帮助类中的一些功能，比如form，a等标签，而且写在html代码中更加的舒服，符合html的语法。

</form>

@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" }))

{

}

　那么，在Html帮助类中最有用的Model与Tag的转换，自动表单的生成，微软是否也给出了解决方案呢？答案是肯定的。Microsoft还专门分出了单独的说明页面来讲述TagHelper的自动表单生成，英文功底好的同学可以直接查看MS的官方文档《Introduction to using tag helpers in forms in ASP.NET Core》。

　　文档中提及了对于表单控件，我们可以直接在asp-for属性中直接填写Model中的属性名，即可自动生成对应的控件类型和填入默认值。

　　ok,我们来尝试一下。

　　（1）创建ViewModel类

public class SignUpViewModel

{

[Required]

[Display(Name ="用户名")]

[MaxLength(30,ErrorMessage = "用户名不能超过30")]

public string UserName { get; set; }

[Required]

[DataType(DataType.Password)]

[RegularExpression(@"((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^$",ErrorMessage ="密码至少包含两种以上字符")]

[Display(Name ="密码")]

public string Password { get; set; }

[DataType(DataType.MultilineText)]

public string Description { get; set; }

}

对于写过asp.net mvc的开发者肯定不会陌生这种验证方式~~

　　（2）编写TagHelper标签

　　为了与Html区分，我写了两者的比较版本

</div>

@Html.LabelFor(m=>m.Password)

@Html.PasswordFor(m=>m.Password)

@Html.ValidationMessageFor(m=>m.Password)

</div>

</div>

</div>

</form>

（3）验证表单

public IActionResult SignUp(SignUpViewModel model)

{

if (ModelState.IsValid)

{

return RedirectToAction("Index");

}

else

{

return RedirectToAction("Index",model);

}

（4）结果

　　ok,如果觉得这样就结束了，那么就不算TagHelper高级应用，那只能充其量在翻译MS的文档罢了。

　　那么，重点来了，既然MS能让我们创建自定义TagHelper，那我为什么不能在TagHelper当中使用Model的值呢？于是我开始在asp.net core开源github项目中寻找，终于是找到了ImputTagHelper的源码。

　　在源码中，由三个对象一起来完成标签的生成

protected IHtmlGenerator Generator { get; }

[HtmlAttributeNotBound]

[ViewContext]

public ViewContext ViewContext { get; set; }

/// <summary>

/// An expression to be evaluated against the current model.

/// </summary>

[HtmlAttributeName(ForAttributeName)]

public ModelExpression For { get; set; }

三个对象均是通过依赖注入的方式来实现对象的生成。

　　（1）其中Generator为发生器，负责生成各种类型的标签

　　（2）ViewContext为视图上下文，获取视图上下文相关信息

　　（3）For获取到当前Model的相关信息，包括Required等关键信息

　　有了这三个标签，我们也可以在自定义的标签助手中获取你想要的Model信息，比如我可以向form中填入Model信息，让标签助手自动生成form表单中的所有内容；也可以向ul标签中填入树信息，让其自动生成树列表等等

　　如下就是我编写的自动生成表单

//自定义标签助手名为bg-form

[HtmlTargetElement("bg-form")]

public class FormTagHelper : TagHelper

{

[ViewContext]

[HtmlAttributeNotBound]

public ViewContext ViewContext { get; set; }

[HtmlAttributeName("asp-for")]

public ModelExpression For { get; set; }

protected IHtmlGenerator Generator { get; }

public FormTagHelper(IHtmlGenerator generator)

{

Generator = generator;

}

[HtmlAttributeName("asp-controller")]

public string Controller { get; set; }

[HtmlAttributeName("asp-action")]

public string Action { get; set; }

//异步方法

public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)

{

output.TagName = "form";

if (!string.IsNullOrWhiteSpace(Controller))

{

output.Attributes.Add("action", "/" + Controller + "/" + Action);

}

output.Attributes.Add("class", "form-horizontal");

//获取子属性

var props = For.ModelExplorer.Properties;

foreach (var prop in props)

{

//生成表单

var div = new TagBuilder("div");

div.AddCssClass("form-group");

var label = Generator.GenerateLabel(ViewContext, prop, null, prop.Metadata.DisplayName, null);

var input = Generator.GenerateTextBox(ViewContext, prop, prop.Metadata.PropertyName, null, null, null);

var span = Generator.GenerateValidationMessage(ViewContext, prop, prop.Metadata.PropertyName, null, ViewContext.ValidationMessageElement, null);

div.InnerHtml.AppendHtml(label);

div.InnerHtml.AppendHtml(input);

div.InnerHtml.AppendHtml(span);

output.Content.AppendHtml(div);

}

//添加按钮

var btn = new TagBuilder("div");

btn.AddCssClass("form-group");

var submit = new TagBuilder("input");

submit.Attributes.Add("type", "submit");

submit.Attributes.Add("value", "提交");

var reset = new TagBuilder("input");

reset.Attributes.Add("type", "reset");

reset.Attributes.Add("value", "重置");

btn.InnerHtml.AppendHtml(submit);

btn.InnerHtml.AppendHtml(reset);

output.Content.AppendHtml(btn);

//将原有的内容添加到标签内部

output.Content.AppendHtml(await output.GetChildContentAsync());

}

只要在html加入

<bg-form asp-controller="Home" asp-action="SignUp" asp-for="@Model"></bg-form>

即可自动生成表单

　　Over，今天关于TagHelper就分享到这~~

原文地址：http://www.cnblogs.com/billming/p/7148226.html

.NET社区新闻，深度好文，微信中搜索dotNET跨平台或扫描二维码关注

asp.net core高级应用:TagHelper+Form相关推荐

WTM(ASP.NET Core)使用ASP.NET Core自带TagHelper显示模型验证消息
WTM框架使用TagHelper提供了丰富的前端控件,目前框架只支持LayUI,后期会增加更多框架整体的运转并不依赖于LayUI,开发人员可以使用最普通的Html来编写页面,框架提供的控件只是简化编写 ...
html表格标签高级应用,asp.net core标签助手的高级用法TagHelper+Form
上一篇博客我讲解了TagHelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下TagHelper的高级用法~~,大家也可以在我的博客下随意留言. 对于初步接触asp.net cor ...
ASP.NET Core 高级(一)【.NET 的开放 Web 接口 (OWIN)】
ASP.NET Core 中 .NET 的开放 Web 接口 (OWIN) ASP.NET Core 支持 .NET 的开放 Web 接口 (OWIN). OWIN 允许 Web 应用从 Web 服务 ...
【面试】ASP.NET Core+Redis+Mysql面试题答案
.NET Core 1.如何在ASP.NET Core中激活Session功能写的好啊,Inb哥,我是废物 2.什么是中间件中间件是介于应用系统和系统软件之间的一类软件,它使用系统软件所提 ...
ASP.NET Core分布式项目实战（课程介绍，MVP，瀑布与敏捷）--学习笔记
任务1:课程介绍课程目标: 1.进一步理解 ASP.NET Core 授权认证框架.MVC 管道 2.掌握 Oauth2,结合 Identity Sercer4 实现 OAuth2 和 OpenID ...
为什么 web 开发人员需要迁移到. NET Core, 并使用 ASP.NET Core MVC 构建 web 和 API
2018 .NET开发者调查报告: .NET Core 是怎么样的状态,这里我们看到了还有非常多的.net开发人员还在观望,本文给大家一个建议.这仅代表我的个人意见, 我有充分的理由推荐.net 程序 ...
(更新时间)2021年5月18日 ASP.NET Core 笔试题
.NET Core笔试题文章目录 .NET Core笔试题 1.如何在ASP.NET Core中激活Session功能? 2.什么是中间件? 3.Applicationbuilder的Use和Run ...
【笔记】ASP.NET Core技术内幕与项目实现：基于DDD与前后端分离
最近在写论文,想使用ASP.NET Core Web API技术,但对它还不是很熟,鉴权组件也没用过,于是在网上查找资料,发现了杨中科老师写的这本书(微信读书上可以免费看),说起来我最初自学C#时看过 ...
ASP.NET Core教程
第一章 .Net Core入门 1 .net core入门第二章 .Net Core重难点知识 2.1 C#新语法 2.2 异步编程 2.3 LINQ 第三章 .Net Core核心基础组件 3.1 ...

asp.net core高级应用:TagHelper+Form

asp.net core高级应用:TagHelper+Form相关推荐

最新文章

热门文章