使用razor语法定义HTML属性名称

Question

使用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.

剃刀:

输出:

我在这里运气不好吗？

Answer 1

我认为它不起作用的原因是,这@实际上是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>