简体   繁体   中英

ASP.NET-Core nested ASP TagHelper

I'm little bit new in ASP Core app developing. I have a page where I have many input.

<div class="form-group">
   <label asp-for="Animal.Name"></label>
   <input asp-for="Animal.Name" class="form-control" />
   <span asp-validation-for="Animal.Name" class="text-danger"></span>
</div>

<div class="form-group">
   <label asp-for="Animal.Age"></label>
   <input asp-for="Animal.Age" class="form-control" />
   <span asp-validation-for="Animal.Age" class="text-danger"></span>
</div>

And so on. I want to achive with TagHelpers something like that:

<input-helper value="Animal.Name" />
<input-helper value="Animal.Age" />

Which generate the same result like upper. Can I do this somehow?

According to your description, I suggest you could use IHtmlGenerator to generate the label asp-for , input asp-for , asp-validation-for taghelper's codes.

More details, you could refer to below codes:

Tag helper:

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;

namespace SecurityRelatedIssue
{
    [HtmlTargetElement("input-helper")]
    public class inputhelper : TagHelper
    {
        [HtmlAttributeName("asp-for")]
        public ModelExpression For { get; set; }

        private readonly IHtmlGenerator _generator;

        [ViewContext]
        public ViewContext ViewContext { get; set; }

        public inputhelper(IHtmlGenerator generator)
        {
            _generator = generator;
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            using (var writer = new StringWriter())
            {
                writer.Write(@"<div class=""form-group"">");

                var label = _generator.GenerateLabel(
                                ViewContext,
                                For.ModelExplorer,
                                For.Name, null,
                                new { @class = "control-label" });

                label.WriteTo(writer, NullHtmlEncoder.Default);

                var textArea = _generator.GenerateTextBox(ViewContext,
                                    For.ModelExplorer,
                                    For.Name,
                                    For.Model,
                                    null,
                                    new { @class = "form-control" });

                textArea.WriteTo(writer, NullHtmlEncoder.Default);

                var validationMsg = _generator.GenerateValidationMessage(
                                        ViewContext,
                                        For.ModelExplorer,
                                        For.Name,
                                        null,
                                        ViewContext.ValidationMessageElement,
                                        new { @class = "text-danger" });

                validationMsg.WriteTo(writer, NullHtmlEncoder.Default);

                writer.Write(@"</div>");

                output.Content.SetHtmlContent(writer.ToString());

            }

        }
    }
}

Register the tag helper in _ViewImports.cshtml

@addTagHelper *,{yourapplicationnamespace}

Usage:

<input-helper asp-for="@Model.str" ></input-helper>

Result:

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM