Asp.Net Core 2 复杂标签助手

Question

我是 Asp.Net Core 的新手，我在使用 Tag Helpers 时遇到了问题。

我正在尝试为 2 个场景创建标签助手： - 输入组 - 复选框

当我从 asp-for 标签开始构建其他标签时没有问题，但我不知道如何构建 "intelligent" 标签，例如带有 [= 的输入标签41=]-用于字段和所有验证。

这是我要构建的内容：

输入组

<div class="input-group">
    <input class="form-control" placeholder="Search" type="text" data-val="true" data-val-maxlength="Max value" data-val-maxlength-max="5" id="SearchText" name="SearchText" value="" maxlength="5">
    <span class="input-group-append"><button class="btn btn-light" id="myButtonId" type="button">Search</button></span>
</div>

这就是我现在拥有的：

<div class="input-group">
    <input asp-for="SearchText" class="form-control" placeholder="Buscar" add-on-button="myButtonId" add-on-append="true" />
</div>

这是标签助手

[HtmlTargetElement("input", Attributes = "add-on-button,add-on-append", ParentTag = "div")]
public class TextBoxButtonHelper : TagHelper
{
    public string AddOnButton { get; set; }
    public bool AddOnAppend { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var tagAddOn = new TagBuilder("span");
        tagAddOn.AddCssClass(AddOnAppend ? "input-group-append" : "input-group-prepend");

        var tagButton = new TagBuilder("button");
        tagButton.Attributes.Add("id", AddOnButton);
        tagButton.Attributes.Add("class", "btn btn-light");
        tagButton.Attributes.Add("type", "button");
        tagButton.InnerHtml.Append(context.AllAttributes["placeholder"]?.Value.ToString());

        tagAddOn.InnerHtml.AppendHtml(tagButton);

        if (AddOnAppend)
            output.PostElement.AppendHtml(tagAddOn); 
        else
            output.PreElement.AppendHtml(tagAddOn);
    }
}

我想要的是这样的：

<input-tag asp-for="SearchText" class="form-control" placeholder="Buscar" button="myButtonId" append="true" />

所以只有一个标签可以生成所有代码，但我不知道如何在 Tag Helper 中生成 "TextBoxFor"。

复选框 chechbox 也有同样的问题，我只需要从一个标签创建它：

<div class="custom-control custom-control-primary custom-checkbox">
    <input class="custom-control-input" data-val="true" data-val-required="The SearchActive field is required." id="SearchActive" name="SearchActive" type="checkbox" value="true">
    <label class="custom-control-label" for="SearchActive">Solo activos</label>
    <input name="SearchActive" type="hidden" value="false">
</div>

感谢您的帮助...

Answer 1

要根据当前模型计算的表达式。

[HtmlAttributeName("asp-for")]
public ModelExpression For { get; set; }

使用命名空间

using Microsoft.AspNetCore.Mvc.ViewFeatures;

完整代码：

[HtmlTargetElement("input", Attributes = "add-on-button,add-on-append", 
ParentTag = "div")]
public class TextBoxButtonHelper : TagHelper
{
    public string AddOnButton { get; set; }
    public bool AddOnAppend { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput 
    output)
    {
      //Your code
    }

  [HtmlAttributeName("asp-for")]
  public ModelExpression For { get; set; }
}

Answer 2

看起来你可以使用 output.Content.SetHtmlContent() - 当然是为了让复选框踢出 html 的负载如此处所述：

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore-2.1#pass-a-model-to-a-tag-helper

Answer 3

感谢您的回答，但是您提供的 none 个解决方案回答了我的问题，但帮助找到了解决方案。

这是两者的标签助手，它工作正常，以防有人想使用它。

带按钮的输入组 + 输入

我们要找的html是：

<div class="input-group">
    <input placeholder="Search" class="form-control" type="text" data-val="true" data-val-maxlength="Max" data-val-maxlength-max="5" id="SearchText" name="SearchText" value="" maxlength="5">
    <span class="input-group-append">
        <button class="btn btn-light" id="btnSearch" type="button">Search</button>
    </span>
</div>

最终的帮助标签为：

<input asp-for="SearchText" placeholder="Search" add-on-button="btnSearch" add-on-button-text="Search" add-on-button-icon="ti-search" add-on-append="true" class="form-control" />

如您所见，我们可以指示按钮的名称、文本 and/or 图标（我们可以构建一个带有图标、文本或两者的按钮），我们还可以指示按钮是否位于开头还是结尾。

这是标签助手：

[HtmlTargetElement("input", Attributes = "add-on-button,add-on-button-text,add-on-button-icon,add-on-append")]
public class TextBoxButtonTag : TagHelper
{
    public string AddOnButton { get; set; }
    public string AddOnButtonText { get; set; }
    public string AddOnButtonIcon { get; set; }
    public bool AddOnAppend { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var tagSpan = new TagBuilder("span");
        tagSpan.AddCssClass(AddOnAppend ? "input-group-append" : "input-group-prepend");

        var tagButton = new TagBuilder("button");
        tagButton.Attributes.Add("id", AddOnButton);
        tagButton.Attributes.Add("class", "btn btn-light");
        tagButton.Attributes.Add("type", "button");

        if (!string.IsNullOrEmpty(AddOnButtonIcon))
        {
            var tagButtonIcon = new TagBuilder("i");
            tagButtonIcon.Attributes.Add("class", string.Concat("ti-search", string.IsNullOrEmpty(AddOnButtonText) ? "" : " pr-1"));
            tagButtonIcon.Attributes.Add("style", "vertical-align: middle");
            tagButton.InnerHtml.AppendHtml(tagButtonIcon);
        }

        tagButton.InnerHtml.AppendHtml(AddOnButtonText);


        tagSpan.InnerHtml.AppendHtml(tagButton);

        output.PreElement.AppendHtml(@"<div class='input-group'>");
        if (AddOnAppend)
            output.PostElement.AppendHtml(tagSpan); 
        else
            output.PreElement.AppendHtml(tagSpan);
        output.PostElement.AppendHtml("</div>");
    }
}

具有特殊设计的复选框

我们要找的html是：

<div class="custom-control custom-control-primary custom-checkbox">
    <input type="checkbox" data-val="true" data-val-required="The SearchActive field is required." id="SearchActive" name="SearchActive" value="true" class="custom-control-input">
    <label class="custom-control-label" for="SearchActive">Only active</label>
    <input name="SearchActive" type="hidden" value="false">
</div>

最终的帮助标签为：

<input asp-for="SearchActive" add-on-checkbox="Only active" />

这是标签助手：

[HtmlTargetElement("input", Attributes = "add-on-checkbox")]
public class CheckBoxTag : TagHelper
{
    [HtmlAttributeName("asp-for")]
    public ModelExpression Source { get; set; }

    public string AddOnCheckbox { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.Add("class", "custom-control-input");

        var tagLabel = new TagBuilder("label");
        tagLabel.AddCssClass("custom-control-label");
        tagLabel.Attributes.Add("for", Source.Name);
        tagLabel.InnerHtml.Append(AddOnCheckbox);

        var tagHidden = new TagBuilder("input");
        tagHidden.Attributes.Add("name", Source.Name);
        tagHidden.Attributes.Add("type", "hidden");
        tagHidden.Attributes.Add("value", "false");

        output.PreElement.AppendHtml(@"<div class='custom-control custom-control-primary custom-checkbox'>");
        output.PostElement.AppendHtml(tagLabel);
        output.PostElement.AppendHtml(tagHidden);
        output.PostElement.AppendHtml("</div>");
    }
}

为了工作，对于这两种情况，您需要指明所有属性。有一种方法可以使这些属性成为可选的，但我没有在这里实现。

我希望这对某人有所帮助，因为我还没有找到任何文章告诉您如何做到这一点。

感谢您的帮助。

Asp.Net Core 2 复杂标签助手

Asp.Net Core 2 Complex Tag Helper

asp.net

asp.net-core

asp.net-core-tag-helpers