<p>If I have an HTML helper like so:</p>

<pre><code>Name:&lt;br /&gt;
&lt;%=Html.TextBox("txtName",20) %&gt;&lt;br /&gt;
</code></pre>

<p>How do I apply a CSS class to it? Do I have to wrap it in a span? Or do I need to somehow utilize the HtmlAttributes property of the helper?</p>

[{'answer_id': 40846, 'author': 'Dale Ragan', 'author_id': 1117, 'author_profile': 'https://Stackoverflow.com/users/1117', 'pm_score': 6, 'selected': True, 'text': '<p>You can pass it into the TextBox call as a parameter.</p>\n\n<pre><code>Name:&lt;br/&gt;    \n&lt;%= Html.TextBox("txtName", "20", new { @class = "hello" }) %&gt;\n</code></pre>\n\n<p>This line will create a text box with the value 20 and assign the class attribute with the value hello.  I put the @ character in front of the class, because class is a reserved keyword.  If you want to add other attributes, just separate the key/value pairs with commas.</p>\n'}, {'answer_id': 40847, 'author': 'Matt Hinze', 'author_id': 2676, 'author_profile': 'https://Stackoverflow.com/users/2676', 'pm_score': 2, 'selected': False, 'text': '<p>Use the <code>htmlAttributes</code> parameter with an anonymous type, like tihs:</p>\n\n<pre><code>&lt;%=Html.TextBox("txtName","20", new { @class = "test"}) %&gt;\n</code></pre>\n'}, {'answer_id': 40877, 'author': 'David Negron', 'author_id': 981, 'author_profile': 'https://Stackoverflow.com/users/981', 'pm_score': 2, 'selected': False, 'text': '<p>I did some research and came across this article that seems to have a solution to your question.</p>\n\n<p><strong>Ajax Control Toolkit with ASP.NET MVC#</strong></p>\n\n<p>source: jimzimmerman</p>\n\n<p><strong>ARTICLE LINK</strong></p>\n\n<p><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330" rel="nofollow noreferrer">http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=330</a></p>\n\n<p><strong>QUOTE</strong></p>\n\n<blockquote>\n  <p>So basically if you put the class name\n  TextboxWatermark on any textbox input\n  with the title you like to show as the\n  watermark like this:</p>\n\n<pre><code>&lt;input type="text" class"TextboxWatermark" name="username" id="username" title="Must be at least 6 chars" /&gt;\n</code></pre>\n  \n  <p>or</p>\n\n<pre><code>&lt;%= Html.TextBox("username", new { @class = "TextboxWatermark", @title = "Must be at least 6 chars" }) %&gt;\n</code></pre>\n  \n  <p>What is nice about the second option\n  is that you get the added benefit of\n  getting the View Engine to fill out\n  the value of the textbox if there is\n  an item in ViewData of the\n  ViewData.Model that has a var named\n  \'username\'.</p>\n</blockquote>\n'}, {'answer_id': 456094, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '\n\n<p></p>\n\n<p>Is it that much more work? </p>\n'}, {'answer_id': 13659584, 'author': 'JGilmartin', 'author_id': 266552, 'author_profile': 'https://Stackoverflow.com/users/266552', 'pm_score': 4, 'selected': False, 'text': '<p>This is how to add a class and a style on the same element...</p>\n\n<p>"x" being the model passed to the view with a property of TextBoxID</p>\n\n<pre><code>@Html.TextBoxFor(x =&gt; x.TextBoxID, new { @class = "SearchBarSelect", style = "width: 20px; background-color: green;" })\n</code></pre>\n'}, {'answer_id': 52705298, 'author': 'Nelson Martins', 'author_id': 6410596, 'author_profile': 'https://Stackoverflow.com/users/6410596', 'pm_score': -1, 'selected': False, 'text': '<p>Theres no need to use span, because its not dynamic.</p>\n\n<p>Css:</p>\n\n<pre><code>.testClass {\ncolor: #1600d3;\n}\n</code></pre>\n\n<p>View (Index):</p>\n\n<pre><code>@Html.TextBox("expression", "Text to show.", new { @class = "testClass" })\n</code></pre>\n\n<p>if you need dynamic options you can use for example:</p>\n\n<p>CSS:</p>\n\n<pre><code>.test class{\nbackground: #ffffff;\n}\n</code></pre>\n\n<p>Controller (Index for test):</p>\n\n<pre><code>[HttpGet]\npublic ActionResult Index()\n{\nViewBag.vbColor = "#000000";\nreturn View();\n}\n</code></pre>\n\n<p>View (Index):</p>\n\n<pre><code>&lt;div&gt;\n&lt;span&gt;\n@Html.TextBox("expression", "Text to show.", new \n{ @class = "testClass", @style="color: " + \n@ViewBag.vbColor })\n&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>Hope it helps.</p>\n'}, {'answer_id': 52768400, 'author': 'Hamid Jolany', 'author_id': 555078, 'author_profile': 'https://Stackoverflow.com/users/555078', 'pm_score': 0, 'selected': False, 'text': '<p>the helper implementation </p>\n\n<pre><code>public static class LabelExtensioncs\n{\n    public static MvcHtmlString Alarm(this HtmlHelper helper, string target, string text)\n    {\n        return MvcHtmlString.Create(string.Format("&lt;p class=\'alert\' style=\'background-color: #b8f89d;border-radius: 5px;width: 100%;\'&gt;&lt;b&gt;{0}&lt;/b&gt;&lt;br /&gt;&lt;i&gt;{1}&lt;/i&gt;&lt;/p&gt;", target, text));\n    }    \n}\n</code></pre>\n\n<p>the usage in view section</p>\n\n<pre><code>@Html.Alarm("Title", "please unsure your card no is invisible in your authorized information")\n</code></pre>\n\n<p>the result\n<a href="https://i.stack.imgur.com/Jo8St.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jo8St.png" alt="enter image description here"></a></p>\n'}]
['https://Stackoverflow.com/questions/40816', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/230/']