Using HTML 5 data attributes with ASP.NET MVC
Join the DZone community and get the full member experience.
Join For FreeHTML 5 data attributes are a way to store data on a DOM element. Check out the spec for more information. For example we have a list of users and want to store the id of the user on the client side for later use. Here is a sample markup.
<ul> <li data-id=”4” data-role=”admin”>thorsteinsson</li> <li data-id=”23” data-role=”user”>john</li> </ul>
On the server side we have a class for the user.
public class User { public int Id { get; set; } public string Role { get; set; } public string Username { get; set; } public string Password { get; set; } }
To make it more simple to make these data attributes, I made a extension method for HtmlHelper.
<ul> <% foreach (var user in Model.Users) { %> <li <%= Html.ToDataAttributes(user) %>><%=user.Username%></li> <% } %> </ul>
If we don’t want to write the username and password to the markup we can choose to skip it.
<%= Html.ToDataAttributes(user, new { “Username”, “Password” }) %>
Here is the complete code for this extension method.
public static string ToDataAttributes(this HtmlHelper helper, object obj) { return helper.ToDataAttributes(obj, new string[] {}); } public static string ToDataAttributes(this HtmlHelper helper, object obj, IEnumerable<string> skip) { StringBuilder builder = new StringBuilder(); Type t = obj.GetType(); foreach (var field in t.GetProperties()) { if (skip.Contains(field.Name)) continue; var value = field.GetValue(obj, null); if (value != null) { builder.Append(" data-").Append(field.Name.ToLower()).Append("=\"").Append(helper.AttributeEncode(value)).Append("\""); } } return builder.ToString(); }
Published at DZone with permission of Ægir Þorsteinsson, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments