使用razor语法

Question

使用MVC 5和Razor 3我正在尝试使用razor语法动态创建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

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

Answer 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);
    }
}