使用剃刀语法定义 HTML 属性名称答案

【问题标题】：Define HTML attribute name with razor syntax使用剃刀语法定义 HTML 属性名称
【发布时间】：2017-03-30 14:08:26
【问题描述】：

使用MVC 5 和Razor 3 我正在尝试使用剃刀语法动态创建HTML 属性名称，特别是data-* 属性。

所以这是关于属性的名称而不是值。

术语示例：

<div data-foo="bar">

属性名称：data-foo
属性值：bar

这是我正在尝试使用 Razor 语法：

<div data-search-@Model.Name="@view.Name">
<div data-search-@(Model.Name)="@view.Name">

Razor 无法识别这两个示例并按原样呈现。所以html 属性名输出的字面意思是：data-search-@Model.Name。

剃须刀：

输出：

我是不是运气不好？

【问题讨论】：

Using "nameof" operator in Razor views的可能重复
@PeterB 不，这不是重复的，因为nameof() 确实工作，因为我为我的项目配置了 roslyn 编译器。但为了清楚起见，我将编辑我的答案，以证明在 html 属性名称中根本无法识别剃刀语法。
请在浏览器中添加您为该 sn-p 获得的内容 -> 查看源代码？还是错误？
@PeterB 再次为您编辑了我的问题。没有错误，输出是as is。
我现在无法自己测试。也许将 cshtml 重写为 cs（由 Razor 引擎完成）正在丢掉一些东西。有一些方法可以查看它产生了什么，也许这可以帮助解释它：coding.abel.nu/2013/08/…（另外，nameof 现在在您的问题中的data-search- 之后丢失了）

标签： c# html asp.net-mvc razor

【解决方案1】：

我认为它不起作用的原因是，@ 实际上是valid character for an attribute in HTML5，因此 Razor 在这种确切情况下不会激活“代码模式”。您可以通过在 Razor 代码中完全构建属性名称来实现您想要做的事情，如下所示：

<div @("data-search-" + Model.Name)="@view.Name">

但是，这并不是特别漂亮，虽然它运行正常，但它可能会导致 Visual Studio 和 ReSharper 抱怨缺少属性名称。相反，我可能会创建一个辅助函数：

public class HtmlAttribute : IHtmlString
{
    public string Name { get; }
    public string Value { get; }

    public HtmlAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public string ToHtmlString()
    {
        return $"{Name}=\"{Value}\"";
    }
}

public class static HtmlHelperExtensions
{
    public static HtmlAttribute Attribute(this HtmlHelper helper, string name, string value)
    {
        return new HtmlAttribute(name, value);
    }
}

用法：

<div @Html.Attribute("data-search-" + Model.Name, view.Name)></div>

【讨论】：

【解决方案2】：

这是 ASP.NET Core 的版本

public class HtmlAttribute : IHtmlContent
{
    public string Name { get; }
    public string Value { get; }

    public HtmlAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public void WriteTo(TextWriter writer, HtmlEncoder encoder)
    {
        writer.Write($"{Name}=\"{Value}\"");
    }
}

public static class HtmlHelperExtensions
{
    public static HtmlAttribute Attribute(this IHtmlHelper helper, string name, string value)
    {
        return new HtmlAttribute(name, value);
    }
}

【讨论】：