Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using HTML 5 data attributes with ASP.NET MVC

DZone's Guide to

Using HTML 5 data attributes with ASP.NET MVC

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

HTML 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();
    }

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Ægir Þorsteinsson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}