[asp.net-mvc] How can I add a class attribute to an HTML element generated by MVC's HTML Helpers?

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.

This question is related to asp.net-mvc razor html-helper

The answer is


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" })

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.


Examples related to asp.net-mvc

Using Lato fonts in my css (@font-face) Better solution without exluding fields from Binding Vue.js get selected option on @change You must add a reference to assembly 'netstandard, Version=2.0.0.0 How to send json data in POST request using C# VS 2017 Metadata file '.dll could not be found The default XML namespace of the project must be the MSBuild XML namespace How to create roles in ASP.NET Core and assign them to users? The model item passed into the dictionary is of type .. but this dictionary requires a model item of type How to use npm with ASP.NET Core

Examples related to razor

Uncaught SyntaxError: Invalid or unexpected token How to pass a value to razor variable from javascript variable? error CS0103: The name ' ' does not exist in the current context how to set radio button checked in edit mode in MVC razor view @Html.DropDownListFor how to set default value Razor MVC Populating Javascript array with Model Array How to add "required" attribute to mvc razor viewmodel text input editor How to correctly use Html.ActionLink with ASP.NET MVC 4 Areas Multiple radio button groups in MVC 4 Razor How to hide a div element depending on Model value? MVC

Examples related to html-helper

How to add "required" attribute to mvc razor viewmodel text input editor URL.Action() including route values HTML.HiddenFor value set How to change the display name for LabelFor in razor in mvc3? Handling onchange event in HTML.DropDownList Razor MVC How to create a readonly textbox in ASP.NET MVC3 Razor Current date and time - Default in MVC razor How to remove the default link color of the html hyperlink 'a' tag? Set disable attribute based on a condition for Html.TextBoxFor ASP.NET MVC DropDownListFor with model of type List<string>