上一篇博客我講解了TagHelper的基本用法和自定義標(biāo)簽的生成，那么我就趁熱打鐵，和大家分享一下TagHelper的高級(jí)用法~~，大家也可以在我的博客下隨意留言。

對(duì)于初步接觸asp.net core的騷年可以看看我對(duì)TagHelper的了解和看法：

之后，我也會(huì)繼續(xù)撰寫(xiě)博文，繼續(xù)分享asp.net core的一些新特性，比如DI，ViewComponent以及bower等asp.net mvc中沒(méi)有的新東西。

ok，咱們就開(kāi)始吧~~

在之前我對(duì)TagHelper的分享當(dāng)中提及了，TagHelper能夠去替代原來(lái)在@Html幫助類中的一些功能，比如form，a等標(biāo)簽，而且寫(xiě)在html代碼中更加的舒服，符合html的語(yǔ)法。

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

{

}

那么，在Html幫助類中最有用的Model與Tag的轉(zhuǎn)換，自動(dòng)表單的生成，微軟是否也給出了解決方案呢？答案是肯定的。Microsoft還專門分出了單獨(dú)的說(shuō)明頁(yè)面來(lái)講述TagHelper的自動(dòng)表單生成，英文功底好的同學(xué)可以直接查看MS的官方文檔《Introduction to using tag helpers in forms in ASP.NET Core》。

文檔中提及了對(duì)于表單控件，我們可以直接在asp-for屬性中直接填寫(xiě)Model中的屬性名，即可自動(dòng)生成對(duì)應(yīng)的控件類型和填入默認(rèn)值。

ok,我們來(lái)嘗試一下。

(1)創(chuàng)建ViewModel類

public class SignUpViewModel

{

[Required]

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

[MaxLength(30,ErrorMessage = "用戶名不能超過(guò)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; }

}

對(duì)于寫(xiě)過(guò)asp.net mvc的開(kāi)發(fā)者肯定不會(huì)陌生這種驗(yàn)證方式~~

(2)編寫(xiě)TagHelper標(biāo)簽

為了與Html區(qū)分，我寫(xiě)了兩者的比較版本

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

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

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

(3)驗(yàn)證表單

public IActionResult SignUp(SignUpViewModel model)

{

if (ModelState.IsValid)

{

return RedirectToAction("Index");

}

else

{

return RedirectToAction("Index",model);

}

}

(4)結(jié)果

ok,如果覺(jué)得這樣就結(jié)束了，那么就不算TagHelper高級(jí)應(yīng)用，那只能充其量在翻譯MS的文檔罷了。

那么，重點(diǎn)來(lái)了，既然MS能讓我們創(chuàng)建自定義TagHelper，那我為什么不能在TagHelper當(dāng)中使用Model的值呢？于是我開(kāi)始在asp.net core開(kāi)源github項(xiàng)目中尋找，終于是找到了ImputTagHelper的源碼。

在源碼中，由三個(gè)對(duì)象一起來(lái)完成標(biāo)簽的生成

protected IHtmlGenerator Generator { get; }

[HtmlAttributeNotBound]

[ViewContext]

public ViewContext ViewContext { get; set; }

///

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

///

[HtmlAttributeName(ForAttributeName)]

public ModelExpression For { get; set; }

三個(gè)對(duì)象均是通過(guò)依賴注入的方式來(lái)實(shí)現(xiàn)對(duì)象的生成。

(1)其中Generator為發(fā)生器，負(fù)責(zé)生成各種類型的標(biāo)簽

(2)ViewContext為視圖上下文，獲取視圖上下文相關(guān)信息

(3)For獲取到當(dāng)前Model的相關(guān)信息，包括Required等關(guān)鍵信息

有了這三個(gè)標(biāo)簽，我們也可以在自定義的標(biāo)簽助手中獲取你想要的Model信息，比如我可以向form中填入Model信息，讓標(biāo)簽助手自動(dòng)生成form表單中的所有內(nèi)容；也可以向ul標(biāo)簽中填入樹(shù)信息，讓其自動(dòng)生成樹(shù)列表等等

如下就是我編寫(xiě)的自動(dòng)生成表單

//自定義標(biāo)簽助手名為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);

//將原有的內(nèi)容添加到標(biāo)簽內(nèi)部

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

}

}

只要在html加入

即可自動(dòng)生成表單

Over，今天關(guān)于TagHelper就分享到這

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html表格标签高级应用,asp.net core标签助手的高级用法TagHelper+Form的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。