Hyphenated HTML Attributes with ASP.NET MVC

Hyphenated html attributes with asp.net mvc

Use an underscore in the data attribute name, and it'll magically handle it for you, converting it to a hyphen. It knows you want a hyphen rather than an underscore as underscores aren't valid in html attribute names.

<%= Html.TextBox("name", value, new { @data_foo = "bar"}) %>

Using hyphenated HTML attributes in MVC

Use an underscore _ - the Razor engine is smart enough to translate that to a data- attribute.

How do you create html attributes with dashes when declaring html helpers in MVC?

You can use underscores (_) for that, MVC will convert them to dashes:

@Html.TextBoxFor(model => model.SomeProperty, new { data_bind = "something" })

Notice the data_bind property.

Problem setting an html attribute containing hyphens in ASP.NET MVC

Try using underscores which should be automatically converted into dashes by the standard HTML helpers:

new { data_something_something = "value" }

How to add attributes with hyphen and colon to Html Helper methods in razor? (vuejs syntax)

You could use a Dictionary for htmlAttributes like this:

@Html.TextBoxFor(x => x.ItnScanCaseCode, htmlAttributes: new Dictionary<string, object> {
    { "v-on:click", "onchangeevent()" },
    { "id", "txtid" }
})

Hyphenated html attributes with asp.net mvc

Use an underscore in the data attribute name, and it'll magically handle it for you, converting it to a hyphen. It knows you want a hyphen rather than an underscore as underscores aren't valid in html attribute names.

<%= Html.TextBox("name", value, new { @data_foo = "bar"}) %>

Adding a hyphen to the html attribute name using MVC3 WebGrid helper

I am afraid that this is not possible. Unfortunately the WebGrid it doesn't support the same syntax as standard HTML helper such as TextBoxFor where you could:

@Html.TextBoxFor(x => x.SomeProp, new { data_test = "testdata" })

and the underscore would be automatically converted to dash.

How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

Update: MVC 3 and newer versions have built-in support for this. See JohnnyO's highly upvoted answer below for recommended solutions.

I do not think there are any immediate helpers for achieving this, but I do have two ideas for you to try:

// 1: pass dictionary instead of anonymous object
<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new Dictionary<string,Object> { {"class","prev"}, {"data-details","yada"} } )%>

// 2: pass custom type decorated with descriptor attributes
public class CustomArgs
{
    public CustomArgs( string className, string dataDetails ) { ... }

    [DisplayName("class")]
    public string Class { get; set; }
    [DisplayName("data-details")]
    public string DataDetails { get; set; }
}

<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new CustomArgs( "prev", "yada" ) )%>

Just ideas, haven't tested it.

ASP.net MVC support for URL's with hyphens

I have worked out a solution. The requestContext inside the MvcRouteHandler contains the values for the controller and action on which you can do a simple replace on.

Public Class HyphenatedRouteHandler
    Inherits MvcRouteHandler

    Protected Overrides Function GetHttpHandler(ByVal requestContext As System.Web.Routing.RequestContext) As System.Web.IHttpHandler
        requestContext.RouteData.Values("controller") = requestContext.RouteData.Values("controller").ToString.Replace("-", "_")
        requestContext.RouteData.Values("action") = requestContext.RouteData.Values("action").ToString.Replace("-", "_")
        Return MyBase.GetHttpHandler(requestContext)
    End Function

End Class

Then all you need to replace the routes.MapRoute with an equivalent routes.Add specifying the the new route handler. This is required as the MapRoute does not allow you to specify a custom route handler.

routes.Add(New Route("{controller}/{action}/{id}", New RouteValueDictionary(New With {.controller = "Home", .action = "Index", .id = ""}), New HyphenatedRouteHandler()))

Hyphenated html attributes with asp.net mvc

Use an underscore in the data attribute name, and it'll magically handle it for you, converting it to a hyphen. It knows you want a hyphen rather than an underscore as underscores aren't valid in html attribute names.

<%= Html.TextBox("name", value, new { @data_foo = "bar"}) %>

---

Related Topics