How can I add a class attribute to an HTML element generated by MVC's HTML Helpers?

asp.net MvcRazorHtml Helper

asp.net Mvc Problem Overview


ASP.NET MVC can generate HTML elements using HTML Helpers, for example @Html.ActionLink(), @Html.BeginForm() and so on.

I know I can specify form attributes by creating an anonymous object and pass that object for the (fourth in this case) htmlAttributes parameter where specifying an id for the element:

Html.BeginForm("Foo", "Bar", FormMethod.Post, new { id = "MyForm"})

But what about the class attribute? Obviously this does not work:

Html.BeginForm("Foo", "Bar", FormMethod.Post, new { class = "myclass"})

As that just throws random syntax errors when my view is requested, because it expects something else after encountering the C# keyword class.

I've also tried:

new { _class = "myclass"}

and

new { class_ = "myclass"}

But they also did not work, as the underscores get replaced by dashes.

I know that I can just as well write the HTML elements by hand or wrap the form inside a <div class="myClass">, but I'd still be interested to know how it is supposed to be done.

asp.net Mvc Solutions


Solution 1 - asp.net Mvc

In order to create an anonymous type (or any type) with a property that has a reserved keyword as its name in C#, you can prepend the property name with an at sign, @:

Html.BeginForm("Foo", "Bar", FormMethod.Post, new { @class = "myclass"})

For VB.NET this syntax would be accomplished using the dot, ., which in that language is default syntax for all anonymous types:

Html.BeginForm("Foo", "Bar", FormMethod.Post, new with { .class = "myclass" })

Solution 2 - asp.net Mvc

Current best practice in CSS development is to create more general selectors with modifiers that can be applied as widely as possible throughout the web site. I would try to avoid defining separate styles for individual page elements.

If the purpose of the CSS class on the <form/> element is to control the style of elements within the form, you could add the class attribute the existing <fieldset/> element which encapsulates any form by default in web pages generated by ASP.NET MVC. A CSS class on the form is rarely necessary.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdrian GrigoreView Question on Stackoverflow
Solution 1 - asp.net Mvcuser434917View Answer on Stackoverflow
Solution 2 - asp.net MvcTimView Answer on Stackoverflow