Asp.NETCore2复杂标记帮助程序

我是Asp.NETCore的新手，在标记帮助程序方面遇到了问题

我正在尝试为两种场景创建标记帮助器： -输入组 -复选框

当我从asp for标记开始时，我构建其他标记没有问题，但我不知道如何构建“智能”标记，例如带有asp for字段的输入标记和所有验证

以下是我试图构建的内容：

输入组

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

我想要的是这样的：

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

因此，只有一个标记可以生成所有代码，但我不知道如何在标记帮助器中生成“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>

独唱

---

感谢您帮助…

根据当前模型计算表达式

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

---

看起来您可以使用output.Content.SetHtmlContent（）-当然可以使用复选框来清除html负载 如本文所述：

---

谢谢您的回答，但是您给出的解决方案没有一个能回答我的问题，而是帮助我找到了解决方案

这是两者的标记帮助器，如果有人想使用它，它可以很好地工作

带按钮+输入的输入组

我们正在寻找的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>

<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="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" />

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

如您所见，我们可以指示按钮的名称、文本和/或图标（我们可以使用图标、文本或两者构建按钮），还可以指示按钮是在开头还是结尾

这是标记帮助器：

[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>");
    }
}

[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>");
    }
}

[HtmlTargetElement（“输入”，Attributes=“加载项按钮，加载项按钮文本，加载项按钮图标，加载项附加”）]
公共类TextBoxButtonTag:TagHelper
{
公共字符串加载项按钮{get；set；}
公共字符串AddOnButtonText{get；set；}
公共字符串AddOnButtonNicon{get；set；}
公共bool AddOnAppend{get；set；}
公共覆盖无效进程（TagHelperContext上下文，TagHelperOutput输出）
{
var tagSpan=新标记生成器（“span”）；
tagSpan.AddCssClass（AddOnAppend？“输入组追加”：“输入组前置”）；
var tagButton=新标记生成器（“按钮”）；
tagButton.Attributes.Add（“id”，AddOnButton）；
tagButton.Attributes.Add（“类”、“btn btn灯”）；
tagButton.Attributes.Add（“type”，“button”）；
如果（！string.IsNullOrEmpty（addonButtonNicon））
{
var tagButtonIcon=新标记生成器（“i”）；
tagButtonIcon.Attributes.Add（“class”，string.Concat（“ti search”，string.IsNullOrEmpty（AddOnButtonText）？”“：“pr-1”）；
tagButtonIcon.Attributes.Add（“样式”，“垂直对齐：中间”）；
tagButton.InnerHtml.AppendHtml（tagButtonIcon）；
}
tagButton.InnerHtml.AppendHtml（AddOnButtonText）；
tagSpan.InnerHtml.AppendHtml（tagButton）；
output.PreElement.AppendHtml（@“”）；
if（AddOnAppend）
output.PostElement.AppendHtml（tagSpan）；
其他的
output.PreElement.AppendHtml（tagSpan）；
output.PostElement.AppendHtml（“”）；
}
}

特殊设计的复选框

我们正在寻找的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>

<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="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" />

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

这是标记帮助器：

[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>");
    }
}

[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>");
    }
}

[HtmlTargetElement（“输入”，Attributes=“添加到复选框”）]
公共类CheckBoxTag:TagHelper
{
[HtmlAttributeName（“asp for”）]
公共模型表达式源{get；set；}
公共字符串AddOnCheckbox{get；set；}
公共覆盖无效进程（TagHelperContext上下文，TagHelperOutput输出）
{
添加（“类”，“自定义控件输入”）；
var tagLabel=新标记生成器（“标签”）；
tagLabel.AddCssClass（“自定义控件标签”）；
tagLabel.Attributes.Add（“for”，Source.Name）；
tagLabel.InnerHtml.Append（AddOnCheckbox）；
var tagHidden=新标记生成器（“输入”）；
tagHidden.Attributes.Add（“name”，Source.name）；
tagHidden.Attributes.Add（“type”，“hidden”）；
tagHidden.Attributes.Add（“value”、“false”）；
output.PreElement.AppendHtml（@“”）；
output.PostElement.AppendHtml（tagLabel）；
output.PostElement.AppendHtml（tagHidden）；
output.PostElement.AppendHtml（“”）；
}
}

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

我希望这有助于别人，因为我还没有找到任何文章告诉如何做到这一点

---

谢谢你的帮助。

我不明白你是如何解决这个问题的。在旧的MVC5中，我使用Html助手来创建那些“元素组”，并避免一直编写这么多标记，在aspnet core中，什么是最佳实践？将标记帮助程序与html帮助程序结合使用？