asp.Netcore高度応用:TagHelper+Form

6080 ワード

asp

TagHelperは、元の@Htmlヘルプクラスのいくつかの機能、例えばform、aなどのラベルに代わることができ、htmlコードに書くとより快適で、htmlの文法に合致します.

@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を書いたことがあります.Netmvcの開発者はこのような検証方法をよく知らないに違いない~~
(2)TagHelperタグの作成
Htmlと区別するために両者の比較バージョンを書きました






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

(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にいました.Netcoreオープンソースgithubプロジェクトで探して、やっとインプットTagHelperのソースコードを見つけました.

ソースコードでは、3つのオブジェクトが一緒にラベルの生成を完了します

        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; }

3つのオブジェクトはいずれも注入に依存してオブジェクトの生成を実現する.p>

(1)ジェネレータであり、各種タイプのラベルを生成する責任を負う

(2)View Contextはビューコンテキストであり、ビューコンテキストに関する情報を取得する

(3)Forは、Requiredなどのキー情報を含む現在のModelに関する情報を取得する

この3つのラベルがあれば、カスタムのラベルアシスタントであなたが望む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に

を加える限り

フォームを自動的に生成できます

リモートでASPを閉じる方法NET Coreアプリ?

Firefox 3の悩ましいキャッシュ