Question

A while back I created a REAL BASIC appointment scheduling form (again, emphasis on REAL BASIC, as in “no-frills”) in an ASP.net 2.0 project using C# (and code-behinds).

Well, I dusted off that code but 2 years later I am using MVC 3.0 (again, C#), and I needed help converting the following code. I can set up a model, do a @using model.MyModel name in my view, then inside an Html.BeginForm do an @Html.EditorFor (or whatever I choose). The CSS is also not a problem. But when I look at the ASP.net 2.0 code I feel like I am looking at some alien language. I am no expert, so that’s my problem.

Any help is greatly appreciated.

In my old appointment.ascx:

<asp:TextBox runat="server" ID="txtCalendarAppointmentRequest1" SkinID="txt150" />
            <asp:ImageButton runat="Server" ID="imgbtnCalendarAppointmentRequest1" SkinID="calendar" AlternateText="Calendar" CausesValidation="false" ToolTip="Click here to pick a date." /><br />
            <ajaxToolkit:CalendarExtender ID="calextAppointmentRequest1" runat="server" TargetControlID="txtCalendarAppointmentRequest1" PopupButtonID="imgbtnCalendarAppointmentRequest1" />
            <asp:RequiredFieldValidator ID="rfv_txtCalendarAppointmentRequest1" runat="server" ControlToValidate="txtCalendarAppointmentRequest1" ErrorMessage="<b><u>No Date Selected</u></b><br/><br/>Select an appropriate FIRST date within the next 15 days.<br/><br/>" Display="None" />
            <ajaxToolkit:ValidatorCalloutExtender ID="vce_rfv_txtCalendarAppointmentRequest1" runat="server" Enabled="True" TargetControlID="rfv_txtCalendarAppointmentRequest1" CssClass="CustomValidatorCalloutStyle" WarningIconImageUrl="~/App_Themes/LOREMPLLC/Images/warning.jpg" CloseImageUrl="~/App_Themes/LOREMPLLC/Images/close.jpg" />
            <asp:CompareValidator ID="cv_txtCalendarAppointmentRequest1" runat="server" ControlToValidate="txtCalendarAppointmentRequest1" Operator="DataTypeCheck" Type="Date" ErrorMessage="<b><u>Incorrect Date</u></b><br/><br/>Select an appropriate FIRST date within the next 15 days.<br/><br/>" Display="None" />
            <ajaxToolkit:ValidatorCalloutExtender ID="vce_cv_txtCalendarAppointmentRequest1" runat="server" Enabled="True" TargetControlID="cv_txtCalendarAppointmentRequest1" CssClass="CustomValidatorCalloutStyle" WarningIconImageUrl="~/App_Themes/LOREMPLLC/Images/warning.jpg" CloseImageUrl="~/App_Themes/LOREMPLLC/Images/close.jpg" />
            <asp:RangeValidator ID="rv_txtCalendarAppointmentRequest1" runat="server" ControlToValidate="txtCalendarAppointmentRequest1" Type="Date" ErrorMessage="<b><u>Date Outside Range</u></b><br/><br/>Select a FIRST date within the next 15 days.<br/><br/>" Display="None" />
            <ajaxToolkit:ValidatorCalloutExtender ID="vce_rv_txtCalendarAppointmentRequest1" runat="server" Enabled="True" TargetControlID="rv_txtCalendarAppointmentRequest1" CssClass="CustomValidatorCalloutStyle" WarningIconImageUrl="~/App_Themes/LOREMPLLC/Images/warning.jpg" CloseImageUrl="~/App_Themes/LOREMPLLC/Images/close.jpg" />

And in my code-behind appointment.ascx.cs:

rv_txtCalendarAppointmentRequest1.MinimumValue = System.DateTime.Now.ToShortDateString();
        rv_txtCalendarAppointmentRequest1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString();

Basically, and again REAL BASIC, I was giving users an option to pick 3 future dates for an appointment and ALL with a max date of 15 days from the current date.

I will probably add a radio button list for time frames (morning, afternoon, evening).

Ideally, I would love to have a true scheduling ability. Things like Dxhtmlscheduler and DayPilot MVC are overkill AND too complicated right now for me to integrate.

If I was able, I’d block Sundays and times between 8pm and 8am. If I were truly able I’d love to be able to put blocks of time in over the next few weeks, but I’ll stick to the REAL BASIC part I mentioned. 🙂

Answer 1

Your old ASP.Net control basically consists of:

• a TextBox for recording the date
• an AjaxToolkit control to make a calendar picker and hook that up to the text box
• three validators which ensure that the date textbox has something entered in it (so is required) falls within the given range (the next 15 days) and is a valid date.
• 3 AjaxToolKit ValidatorCalloutExtenders – which basically make the validation messages look a bit fancier.

To recreate this in MVC, you’ll need a Model with a DateTime property. You don’t need to do anything special to the property to get the ‘required’ and ‘is a valid date’ validation (by default, the built in validation assumes that this property is required, as it is a not nullable property). You would need to create a custom validator to recreate the date range validation (google ‘asp.net mvc 3 custom validation’ for herlp).

You’d also need some sort of javascript calendar control – as others have mention, the JQuery UI one works well.

Then, in your View, you’d have something like this:

<script type="text/javascript">
    var minDate = new Date();
    var maxDate = new Date(dt.getTime()+15*24*60*60*1000);
    $(function () {
        $('input.date_control').datepicker( { minDate: minDate , maxDate: maxDate });
    });
</script>

@{ Html.EnableClientValidation();}
@using (Html.BeginForm("Add", "Something"))
{
     @Html.TextBoxFor(x => x.MyDatePropert, new { @class = "date_control" })
}

Note: – this is a ‘datepicker’ – not a ‘date/timepicker’ – so you can’t block ‘times between 8pm and 8am’ as this doesn’t make sense – but then your original control didn’t do that either 🙂

If that was a requirement – you’d need to look at a different javascript control – but the concept would remain the same.