adding a class to EditorFor - razor c#

Question

(The editor is for a DateTime property called "ADate"

I am trying this but it does not work.

@Html.EditorFor(model => model.ADate, new { cssClass = "date" } )

So I tried this:

@Html.TextBoxFor(model => model.ADate, new { @class = "date" })

but it outputs type = text.. ofcourse it does.

So I tried a template... I added a folder in shared:

Shared/EditorTemplates

and then I created a .cshtml partial view called Date.cshtml

Now what on earth do I put inside it :O...

I have tried to understand lots of posts and stack overflow entries but it's not sinking in.

The goal is to attach a datepicker to the class ".date" across the entire app where ".date" class is used... The TextBoxFor works with my adding class part... but as I said, the type changes from date to text :(

@FilipEkberg - I need a bit more help buddy.. totally don't get it :) — Jimmyt1988
– Jimmyt1988, Commented Dec 10, 2013 at 2:50

Dimitar Dimitrov · Accepted Answer · 2013-12-10 03:05:53Z

7

Ok so this is what you can do:

In your EditorTemplates folder create a template called DateTime.cshml (the name will resolve automatically if you use it for dates, otherwise you have to specify it when using it). Then in it:

@model System.DateTime

@Html.TextBox(
   string.Empty, 
   Model.ToString("yyyy-MM-dd"),
   new { @class="datepicker", @type = "date"})

Using the last parameter you can specify any html attribute (class, data, type etc.).

Then you use it like this:

@Html.EditorFor(x => x.ADate)

In case you chose to name your template with a different name you can specify it by invoking another overload:

@Html.EditorFor(x => x.ADate, "MyOtherAwesomeTemplate")

edited Dec 10, 2013 at 3:05

answered Dec 10, 2013 at 2:55

Dimitar Dimitrov

15.2k9 gold badges55 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimmyt1988 Over a year ago

For some reason the template is not being called when the name is "DateTime.cshtml", instead I have to explicitly call it with the overloaded string? any ideas? My property is definetly DateTime type

Dimitar Dimitrov Over a year ago

@JamesT Hey James, not sure what the issue might be. Are you sure you don't have multiple templates ? Also, is your template located in Views/Shared/EditorTemplates/ ? Could you perhaps show how you're using it (and how you've defined it) ? I've tried testing it here with every scenario I can think of and I couldn't reproduce it.

ataravati · Accepted Answer · 2013-12-10 03:02:44Z

The EditorFor html helper does not render a date picker for your DateTime attributes (if that's what you want to do). The default EditorFor for DateTime is a text input. If you want to use a date picker, you'll have to use jQuery DatePicker (or any other third party date picker).

Also, the EditorFor helper does not have a parameter for html attributes. If you want to assign a class, you'll have to use TextBoxFor.

In your main View, use the EditorFor like this:

@Html.EditorFor(model => model.ADate)

Then, in your Editor Template (Date.cshtml), you'll have:

@model System.DateTime

<script type="text/javascript">
    $(function () {
        $(".date").datepicker();
    });
</script>

@Html.TextBox("", Model.ToString("d"), new { @class = "date" })

You can download the jQuery UI from here: Download jQuery UI

And, you can learn more about the jQuery DatePicker here: jQuery DatePicker

Bilal · Accepted Answer · 2016-12-09 12:40:15Z

0

You can do this

@Html.EditorFor(model => model.ADate)

<style type="text/css">

#ADate
{
 @* your css properties goes here *@
}
</style>

this works fine for MVC3 Razor

answered Dec 9, 2016 at 12:40

Bilal

413 bronze badges

Collectives™ on Stack Overflow

adding a class to EditorFor - razor c#

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related