Question

[EDIT: Working now. Just changed EditorFor into TextBox]

I am just started with MVC3 in C#. And I have stumbled upon this problem.

I have followed some tutorials on adding datepicker functionality to MVC3 project, but the datepicker is not showing on my web project. Here is what I have:

In my _Layout.chtml file I have included the required jQuery dependencies files :

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
    rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
    rel="stylesheet"  type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
    rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
    type="text/javascript"></script>

This is what I have in my View:

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Student</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.FullName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FullName)
        @Html.ValidationMessageFor(model => model.FullName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.DOB)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.DOB, new { @class = "date" })
        @Html.ValidationMessageFor(model => model.DOB)
    </div>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

and on the same file inside the View, I put the script to hook the datepicker into the editor at the top:

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

Many of the tutorials suggested to use the EditorTemplate for this, but I assume it is not necessary. Did I miss something? Appreciate all the helps folks.

Answer 1

I don’t believe you can use EditorFor and pass in a class. Instead, try:

<div class="editor-field">
    @Html.TextBoxFor(model => model.DOB, new { @class = "date" })
    @Html.ValidationMessageFor(model => model.DOB)
</div>

TextBoxFor will accept HTML Attributes.