Question

I am fairly new to MVC3, and am building a SQL 2008 R2, EF4 website with it. In the last 36 hours, I have attempted to add Telerik’s MVC extensions to the project in the hopes of using the DatePicker, Menu, etc. I believe that my configuration & installation are good, and some small tests (panel bar example) that I’ve done seem to confirm that, and my edits to the _layout.cshtml file also seem like they are good.

Where I’m stuck is attempting to integrate the Razor code examples for the Datepicker ( http://demos.telerik.com/aspnet-mvc/razor/datepicker ) to my existing project. I would like to add a Datepicker to a “date of birth” (DOB) field in my application’s Profile page. The Profile has a table in the database, a model (profile.cs), a controller (ProfileController.cs) and some views in a Views/Profile directory (Index, Edit, etc.) All of the examples seem to focus on creating entirely new projects, new models, new controllers, etc. and because of my relative inexperience, I’m a little stuck on how to use the demo code outlined in my existing project.

I am assuming that I can place this partial class into my ProfileController.

public partial class DatePickerController : Controller
{
    public ActionResult FirstLook(FirstLookModelView viewModel)
    {
        viewModel.DatePickerAttributes.SelectedDate = viewModel.DatePickerAttributes.SelectedDate ?? DateTime.Today;
        viewModel.DatePickerAttributes.MinDate = viewModel.DatePickerAttributes.MinDate ?? new DateTime(1900, 1, 1);
        viewModel.DatePickerAttributes.MaxDate = viewModel.DatePickerAttributes.MaxDate ?? new DateTime(2099,
            12, 31);
        viewModel.DatePickerAttributes.ShowButton = viewModel.DatePickerAttributes.ShowButton ?? true;
        viewModel.DatePickerAttributes.OpenOnFocus = viewModel.DatePickerAttributes.OpenOnFocus ?? false;
        return View(viewModel);
    }
}

And that I can put the View elements into my Edit.cshtml where my @Html.EditorFor(model => model.DOB) is now

@(Html.Telerik().DatePicker()
        .Name("DatePicker")
        .HtmlAttributes(new { id = "DatePicker_wrapper" })
        .Min(Model.DatePickerAttributes.MinDate.Value)
        .Max(Model.DatePickerAttributes.MaxDate.Value)
        .ShowButton(Model.DatePickerAttributes.ShowButton.Value)
        .Value(Model.DatePickerAttributes.SelectedDate.Value)
)

@using (Html.Configurator("The date picker should...")
              .PostTo("FirstLook", "DatePicker")
              .Begin())
   { 
    <ul>
        <li>
            @Html.CheckBox("DatePickerAttributes.ShowButton", Model.DatePickerAttributes.ShowButton.Value)
            <label for="DatePickerAttributes_ShowButton">show a popup button</label>
        </li>
   <snip>

But I am fairly confused about where to put the section of code for the model…

public class FirstLookModelView
{
    public FirstLookModelView()
    {
        DatePickerAttributes = new DatePickerAttributes();
    }
    public DatePickerAttributes DatePickerAttributes { get; set; }
}

Does that go into my current model Profile.cs? Any guidance would be appreciated.

PS I’m asking on the Telerik forums as well: http://www.telerik.com/community/forums/aspnet-mvc/documentation/difficulty-with-existing-project-and-adding-telerik-mvc-to-it.aspx

Answer 1

Thanks to a good friend of mine helping me out, and some support from Telerik, I got my answers. It could just be me, or perhaps their MVC support examples are actually confusing. Anyone who is trying to use Telerik’s MVC for the first time, that is an MVC newbie, I hope this helps you.

I will assume that you have followed the tutorials on setting up Telerik MVC to work in your project, and are now where I was, struggling to implement one of their tools for the first time.

First step, do not take the code examples here (http://demos.telerik.com/aspnet-mvc/razor/datepicker) like “view” “controller” and “_layout.cshtml” as the definitive code you will need to implement. Click on “edit template” (at least for this DatePicker example) and you will see much more code in the Razor examples: http://demos.telerik.com/aspnet-mvc/razor/datepicker/edittemplate

You will have to adjust my examples to your actual code, but I’m going to stick to the example code that I posted in my original question. In your model (Profile.cs) file, amend the datetime field thusly:

    [UIHint("MyCustomEditorTemplate")]
    public Nullable<System.DateTime> DOB { get; set; }

HINT: in your Using at the top of the model file, add this:

      using System.ComponentModel.DataAnnotations;

The code snippets from my question for public partial class DatePickerController : Controller and also public class FireLookModelView go into the ProfileController (or rather, your controller.)

Now make a new controller, called DatePickerController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MySite.Controllers
{
public class DatePickerController : Controller
{

}
public class DatePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinDate
    {
        get;
        set;
    }

    public DateTime? MaxDate
    {
        get;
        set;
    }

    public bool? ShowButton
    {
        get;
        set;
    }

    public bool? OpenOnFocus
    {
        get;
        set;
    }
}

public class TimePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinTime
    {
        get;
        set;
    }

    public DateTime? MaxTime
    {
        get;
        set;
    }

    public bool? ShowButton
    {
        get;
        set;
    }

    public int? Interval
    {
        get;
        set;
    }

    public bool? OpenOnFocus
    {
        get;
        set;
    }
}

public class DateTimePickerAttributes
{
    public DateTime? SelectedDate
    {
        get;
        set;
    }

    public DateTime? MinDate
    {
        get;
        set;
    }

    public DateTime? MaxDate
    {
        get;
        set;
    }

    public int? Interval
    {
        get;
        set;
    }
}
}

Under your Views, in the Shared directory, create a new sub-directory called EditorTemplates. Create an empty file there, call it DateTime.cshtml:

@model DateTime?

@(Html.Telerik().DateTimePicker()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
    .HtmlAttributes(new { id = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty) + "_wrapper" })
    .Value(Model > DateTime.MinValue? Model : DateTime.Today)
)

Now go to the page where you want the datepicker to appear, in my case it was: Views/Profile/Edit.cshtml:

Replace the HTML.EditorFor with this:

@Html.Telerik().DatePickerFor(model => model.DOB)

..and those are actually all the pieces you need (I believe) to setup your first actual working tool with Telerik MVC. Hope this helps whomever finds this!

Ed