CODEWITHSUNDEEP
htmlrazorrazor-2
Franva
Franva

Reputation: 7067

how to force Razor not to generate extra html attributes

Update 1:

As someone mentioned below to turn off the jQuery unobtrusive validation, I have moved those js files onto a cshtml page. 

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

But the issue remains.

I'm using Razor (Version 2 I guess) + Twitter Bootstrap

I have a date-time picker on my page and it requires a textbox input.

As pure html cannot bind the user inputted value to the related property, so I have to use Razor Html helper. Below is the 2 ways to have a textbox input on the page.

  <input type='text' class="form-control" />

  @Html.TextBoxFor(m => m.event_date_time, new { @class = "form-control", placeholder = "Enter date and time" })

But it seems that the Razor helper generates extra html attributes for its own validation purpose and those attributes disturb the Boottrap to correctly display the date-time picker.

Please have a look about the html code generated by the Razor Html helper.

<input class="form-control valid" data-val="true" data-val-date="The field event_date_time must be a date." data-val-required="The event_date_time field is required." id="event_date_time" name="event_date_time" placeholder="Enter date and time" type="text" value="1/1/0001 12:00:00 AM">

Now my question is : how to force Razor Helper not to generate the extra html attributes?

Many thanks

Upvotes: 4

Views: 254

Answers (1)

Franva
Franva

Reputation: 7067

I have found a work-around and weird solution.

Just keep both my html control and Razor helper, then set the html control : display: none; then the Razor generated textbox will work with the date-time picker. I know it's weird and I have no idea why it works.

So here is the code:

 <input type='text' class="form-control" style="display:none;"/>

  @Html.TextBoxFor(m => m.event_date_time, new { @class = "form-control", placeholder = "Enter date and time" })

I will leave the answer here for a couple of days to see whether someone can figure out why it works in this way and what's the proper way to do it.

Many thanks.

Upvotes: 0

Related Questions