Use the css selector in @Html.TextBoxFor

Question

User-1548796982 posted

hi

Can I use CSS Selector in @Html.TextBox?
For example, how can I write input below?

<input type="text" class="form-control text-center" id="Event_EndDateTime" name="Event_EndDateTime" data-datetimepicker="true" data-datetimepicker-counter="1" lang="en" value="@Model.Event_EndDateTime"/>

Answer 1

User-1038772411 posted

Hello, tadbirgaran

@Html.TextBoxFor(model => model.modelvalue, new { @class = "form-control", @id="myId" } )

*all your selector you can add in "new { }" with @ keyword

Thanks.

Answer 2

User-1548796982 posted

Hello, tadbirgaran
@Html.TextBoxFor(model => model.modelvalue, new { @class = "form-control", @id="myId" } )

*all your selector you can add in "new { }" with @ keyword

Thanks.

my code:

@Html.TextBoxFor(model => model.Event_EndDateTime, new { @class = "form-control text-center", @lang = "en", @data-datetimepicker-counter = "true" })

errors:

The name 'datetimepicker' does not exist in the current context

The name 'datetimepicker' does not exist in the current context

The name 'counter' does not exist in the current context

Answer 3

User475983607 posted

data-datetimepicker-counter not @data-datetimepicker-counter

Answer 4

User-1548796982 posted

data-datetimepicker-counter not @data-datetimepicker-counter

@data_datetimepicker_counter working...

Answer 5

User-474980206 posted
In c# anonymous objects, the minus is not allowed in a property name. By convention underscores are converted to hyphens with html attribute anonymous. Also the @ prefix is only required when the property name is a reserved word like “class”.

See c# syntax rules for variable and property names.

Answer 6

User1520731567 posted

Hi tadbirgaran,

As @bruce said,you could use underline(_) instead of minus(-),

tadbirgaran

<input type="text" class="form-control text-center" id="Event_EndDateTime" name="Event_EndDateTime" data-datetimepicker="true" data-datetimepicker-counter="1" lang="en" value="@Model."/>

According to your code,you could modify it,like:

@Html.TextBoxFor(model => model.Event_EndDateTime, new { @class = "form-control text-center",id="Event_EndDateTime",name = "Event_EndDateTime",data_datetimepickercounter = "true",....})

it generate html,like:

<input class="form-control text-center" data-datetimepickercounter="true" id="DataInfo" lang="en" name="Event_EndDateTime" type="text" value="dataInfor1".....>

More details,you could refer to this link:

https://stackoverflow.com/a/4515095/11741806

Best Regards.

Yuki Tao