43

How to pass an object to HTML attributes? For example I have the following code:

var attrs = new { id = "myid", style = "color: Red;" };

How to convert attrs to string like this to embed them into an HTML markup: 

id="myid" style="color: Red;"

Thanks in advance :)

0lukasz0
  • 3,155
  • 1
  • 24
  • 40
Hieu Nguyen Trung
  • 1,624
  • 5
  • 21
  • 32

3 Answers3

72

This functionality is, surprisingly enough, provided by the RouteValueDictionary class:

IDictionary<string, object> htmlAttributes = new RouteValueDictionary(attrs);

You can then use this dictionary in conjunction with a TagBuilder, which you will probably be using anyway:

var tagBuilder = new TagBuilder("input");
tagBuilder.MergeAttributes(htmlAttributes);
tagBuilder.ToString(TagRenderMode.Normal);

You can see this done in the ASP.NET MVC source code itself; one of the simpler examples is in TextAreaExtensions.cs.

EDIT:

In order to properly convert "data_attr" to "data-attr", use the AnonymousObjectToHtmlAttributes static method.

IDictionary<string, object> htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(attrs);
Joel
  • 19,175
  • 2
  • 63
  • 83
Domenic
  • 110,262
  • 41
  • 219
  • 271
  • 2
    Just tries this with the attribute data_bind and the output was data_bind as opposed to the expected, data-bind - any ideas? – SimonGates May 22 '13 at 12:07
  • Unfortunately Url to TextAreaExtensions is no longer valid :) Just letting you know. – slawek Jul 01 '13 at 13:02
  • 12
    There's an alternative, System.Web.Mvc.HtmlHelper.AnonymousObjectToHtmlAttributes(), that may be more appropriate; it replaces underscores with hyphens in the same manner as the standard MVC Html helpers – Adrian Wragg Jul 29 '13 at 15:13
  • 3
    This answer is obsolete. The correct approach should be `HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)` which will properly handle `data_blah` type attributes. – Joel Aug 22 '14 at 14:30
23

You do not need to convert to a string. The last paramater for HTML Helpers is an Object. You just give it the object like you have written above:

For exmample 

@Html.TextBoxFor(x => x.Foo, new { size = 10, maxlength = 10 }) 
@Html.TextAreaFor(x => x.Notes, new { @class = "additionalInfo" })
@Html.TextBoxFor(x=>x.Registration.Address.Postcode, new {type="number", @class="postcode numeric", size=5, maxlength=5})

on a side note you probably should not be setting styles directy inline with your HTML and use a CSS class/selector instead with a seperate style sheet. Also the ID of each DOM element should automatically be set when you use MVC HTML helpers

Daveo
  • 19,018
  • 10
  • 48
  • 71
6

Here's how to do this conversion :

var htmlAttributes = new { id="myid", @class="myclass" };

string string_htmlAttributes = "";
foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(htmlAttributes))
{
  string_htmlAttributes += string.Format("{0}=\"{1}\" ", property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
}

PropertyDescriptor belong to the class System.ComponentModel

Chtioui Malek
  • 11,197
  • 1
  • 72
  • 69