asp.net core标签助手的高级用法TagHelper+Form

上一篇博客我讲解了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-->
<form asp-controller="home" asp-action="index" class="form-horizontal" method="post">

</form>
<!--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区分，我写了两者的比较版本

<form asp-controller="home" asp-action="signup" method="post" class="form-horizontal">
 <div class="form-group">
 <label asp-for="username"></label>
 <input asp-for="username" />
 <span asp-validation-for="username"></span>
 </div>
 <div class="form-group">
 @html.labelfor(m=>m.password)
 @html.passwordfor(m=>m.password)
 @html.validationmessagefor(m=>m.password)
 </div>
 <div class="form-group">
 <label asp-for="description"></label>
 <textarea asp-for="description"></textarea>
 <span asp-validation-for="description"></span>
 </div>
 <div class="form-group">
 <input type="submit" value="提交" />
 <input type="reset" value="重置" />
 </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就分享到这

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。