使用标签助手在选择元素中选择一个选项

Question

这是我的情况：在 ASP.NET Core 应用程序中，我需要从模型实例在 Razor 视图中生成以下 HTML 代码：

<select name="CultureName">

    <option value="de-DE" data-summary="Deutsch (Deutschland)">* Deutsch (Deutschland)</option>

    <option value="de-AT" data-summary="Deutsch (Österreich)">* Deutsch (Österreich)</option>

    <option value="de-CH" data-summary="Deutsch (Schweiz)">* Deutsch (Schweiz)</option>

    <option value="en-GB" data-summary="Englisch (Großbritannien)" selected>Englisch (Großbritannien)</option>

                                                                   ^^^^^^^^- important!

    <option value="en-US" data-summary="Englisch (USA)">Englisch (USA)</option>

</select>

模型的属性CultureName值为“en-GB”。该模型还具有所有可用选项的列表。我使用的 Web 前端框架支持单独的data-summary属性，需要在每个元素上设置该属性<option>，以及为简洁起见而在此处省略的其他属性。选项之一由selected属性预先选择。

我无法使用预定义的SelectListItem类，因为它不支持附加属性。所以我创建了自己的SelectListOption类，它看起来相似但具有附加属性。我有一个标签助手，可以让我这样写：

<select asp-for="CultureName">

    @foreach (var culture in Model.Cultures)

    {

        <option item="@culture"></option>

    }

</select>

这是代码：

[HtmlTargetElement("option", ParentTag = "select", Attributes = "item")]

public class OptionTagHelper : TagHelper

{

    public SelectListOption Item { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)

    {

        if (Item != null)

        {

            output.Content.SetContent(Item.Text);

            output.Attributes.SetAttribute("value", Item.Value);

            if (Item.Summary != null)

                output.Attributes.SetAttribute("data-summary", Item.Summary);

            if (Item.HtmlText != null)

                output.Attributes.SetAttribute("data-html", Item.HtmlText);

            if (Item.HtmlSummary != null)

                output.Attributes.SetAttribute("data-summary-html", Item.HtmlSummary);

        }

    }

}

它填充<option>模型中元素的其他属性。这很好用，但渲染页面时会忽略选择。因此，用户将看到包含所有选项的列表，但缺少当前选择。

Answer 1

你没有对 做任何事情asp-for。这不是魔法。如果您查看其中一个内置标记帮助程序的代码，您将看到它们具有用于捕获此内容的属性，大致如下：[HtmlAttributeName("asp-for")] public&nbsp;ModelExpression&nbsp;For&nbsp;{&nbsp;get;&nbsp;set;&nbsp;}然后，您必须使用此属性通过读取值来实际设置所选选项。尽管如此，如果您简单地从 继承标签助手SelectTagHelper，然后重写Process以执行您自己的逻辑，您可能会得到更好的服务。base.Process不过也要记得打电话。