1

[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.

2
  • Put it at the bottom and see what happens. Aug 1, 2012 at 11:44
  • I don't see a reference to the actual jQuery library. You have referenced the jQuery UI Core, as well as datepicker, but where is jQuery?
    – Joshua
    Aug 1, 2012 at 11:51

3 Answers 3

0

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.

0
0

Here is a simple working demo, Read this

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="datepicker"></div>

</body>
</html>
0

@Html.TextBoxFor() second argument is object htmlAttributes
@Html.EditorFor() second argument is object additionalViewData

So the new { @class = "date" } does not have the desired effect on @Html.TextBoxFor()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.