向razor元素添加css类

本文关键字：css 添加 元素 razor | 更新日期: 2023-09-27 18:09:53

如果我在razor中输入:

@Html.EditorFor(model => model.name)或偶数:@Html.CheckBoxFor(m => m.RememberMe)

我如何添加一个css类或id给他们?我一直在阅读关于helper的文章，但是我必须为每个元素创建一个helper吗?有没有简单的方法来添加类或id剃刀表单元素?

向razor元素添加css类

您不能使用EditorFor helper，因为您不知道将使用什么模板。您可以实现它，但您需要编写一个自定义编辑器模板。例如，这可以通过覆盖default editor template并考虑第二个参数来实现，该参数表示一个额外的视图数据。

下面是一个自定义编辑器模板如何查找字符串类型(~/Views/Shared/EditorTemplates/string.cshtml)的示例:

@Html.TextBox(
    "", 
    ViewData.TemplateInfo.FormattedModelValue,
    ViewData
)

然后你可以这样使用:

@Html.EditorFor(model => model.name, new { @class = "myclass" })

使用CheckBoxFor帮助器，您可以这样做:

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "myclass" })

CheckboxFor很简单，你可以这样做:

@Html.CheckBoxFor(m => m.RememberMe, new { @class="your_class", @id="the_id" })

使用EditorFor有点棘手，因为它不支持开箱即用。我的意思是你可以为每个类型创建一个模板，然后做一个TextBoxFor添加html属性(语法与CheckBoxFor相同)。您可能需要为您想要支持的每种类型都这样做。

因为EditorFor不是特定于类型的，所以你不能在那些上面使用它。

对于CheckBoxFor，您可以使用:

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "myClass", id = "myID" })

注意@在class之前，因为这是c#中的保留关键字

相关文章：