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