Add property with - in name

Question

In MVc I am using Html.TextboxFor() control

I have input type control as below.

<input id="phoneNumber" type="text" class="phoneNumber form-control" value="@actorPhone.PhoneNumber" data-phoneType ="@actorPhone.PhoneTypeTd" data-actorId ="@Model.ActorId" maxlength="30"/>

I want to change this intput control to MVC

@Html.TextBoxFor(m=>m.phoneNumber,new {@class = "phoneNumber", maxlength = "30"})

How I can add data-phoneType and data-actorId properties to the html control, as - is not allowed in the properties of HTML Attribute.

With all the answers here is another [link](http://stackoverflow.com/questions/4844001/html5-data-with-asp-net-mvc-textboxfor-html-attributes) using underscore. — Nilesh, Mar 24 '14 at 09:18

score 1 · Answer 1 · answered Mar 24 '14 at 09:16

1

You can set an underscore instead and Razor will render it like a minus/dash:

@Html.TextBoxFor(m => m.phoneNumber, 
      new { data_phoneType = "phone type",  
            @class = "phoneNumber", 
            maxlength = "30"})

answered Mar 24 '14 at 09:16

Andrei V

7,306
6
44
64

Mohammed Swillam · Accepted Answer · 2014-03-24T09:23:25.927

use an underscore _

the Razor engine is smart enough to render the underscore within the property name to the corresponding dash sign, resulting in your desired HTML5-like attributes

example:

    @Html.TextBoxFor(m=>m.phoneNumber,
    new {@class = "phoneNumber", maxlength = "30", 
    data_phoneType = YOUR_VALUE_HERE,    
    data-actorId=YOUR_VALUE_HERE })

and this should result in your desired output.

hope this helps :)

score 1 · Answer 3 · answered Mar 24 '14 at 09:16

1

Use data_* attributes like

@Html.TextBoxFor(m=>m.phoneNumber,
    new {
        data_phoneType=actorPhone.PhoneTypeTd, 
        @class = "phoneNumber", 
        maxlength = "30"
        })

answered Mar 24 '14 at 09:16

Satpal

132,252
13
159
168

Add property with - in name

3 Answers3