c# - RouteValueDictionary 到 HtmlAttributes

Question

我知道我可以通过执行以下操作将 html 属性添加到我的标签中:

var htmlAttributes = new RouteValueDictionary { { "data-foo", "bar" } };
var tag = new TagBuilder("div");
tag.MergeAttributes(htmlAttributes );
@tag

输出:

<div data-foo="bar"></div>

我想知道我是否可以通过使用标记而不是标签生成器以类似的方式添加属性。也许是这样的:

var htmlAttributes = new RouteValueDictionary { { "data-foo", "bar" } };
<div @htmlAttributes.ToHtmlAttributes() ></div>

预期输出:

<div data-foo="bar"></div>

显然，我无法以这种方式处理合并冲突。但是，我认为这是值得的，因为第二种方式可读性更高。

Answer 1

您可以编写自己的扩展方法:

namespace SomeNamespace
{
    public static class RouteValueDictionaryExtensions
    {
        public static IHtmlString ToHtmlAttributes(this RouteValueDictionary dictionary)
        {
            var sb = new StringBuilder();
            foreach (var kvp in dictionary)
            {
                sb.Append(string.Format("{0}=\"{1}\" ", kvp.Key, kvp.Value));
            }
            return new HtmlString(sb.ToString());
        }
    }
}

这将完全按照您的描述使用:

@using SomeNamespace    
@{
    var htmlAttributes = new RouteValueDictionary
        {
            {"data-foo", "bar"},
            {"data-bar", "foo"}
        };
}

<div @htmlAttributes.ToHtmlAttributes()> </div>

结果是:

<div data-foo="bar" data-bar="foo" > </div>

编辑:

如果你想使用 TagBuilder，你也可以编写另一个在内部使用它的扩展:

public static IHtmlString Tag(this HtmlHelper helper, 
                              RouteValueDictionary dictionary, 
                              string tagName)
{
    var tag = new TagBuilder(tagName);
    tag.MergeAttributes(dictionary);
    return new HtmlString(tag.ToString());
}

下面显示的用法给出了与之前相同的输出 html:

@Html.Tag(htmlAttributes, "div")