Covert ASP.net 2.0 to ASP.net MVC C# 3.0 (C#)

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. :)

Is your problem with converting the code or getting validations and such to work? jQuery UI has a good date picker that can handle min/max days, you could hide Sundays with CSS, etc. — Nick Bork
– Nick Bork, Commented Feb 2, 2012 at 21:11
Conversion is my main problem. I didn't think about jQuery UI's ability to handle the min/max. — REMESQ
– REMESQ, Commented Feb 2, 2012 at 21:31
You're on the right track. You would want a Model and use the BeginForm and EditorFor tags. You can rely on the Component Model to add required validators, range valaidators and compare validators. By enabling the Client Validation you can handle most of your validation in the HTML before the form gets post. Since you don't have any specific questions I don't have any specific answers. — Nick Bork
– Nick Bork, Commented Feb 2, 2012 at 21:52

StanK · Accepted Answer · 2012-02-02 22:58:04Z

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.

Thanks for this @StanK. Great set-up and searching for some MVC 3 custom validators helped.

Sebastian Siek · Accepted Answer · 2012-02-02 22:19:20Z

1

For the calendar itself you could use JQuery Calendar. You can do pretty much everything you want - restrict days, set min or max date etc http://jqueryui.com/demos/datepicker/#min-max

With regards to validation, decorate properties on your model with DataAnnotations There's a really nice article on Scott's blog about validation in MVC http://weblogs.asp.net/srkirkland/archive/2011/02/23/introducing-data-annotations-extensions.aspx

Hope that helps

answered Feb 2, 2012 at 22:19

Sebastian Siek

2,07518 silver badges16 bronze badges

1 Comment

REMESQ Over a year ago

StanKs answer helped best, but I wish I could give you credit as well. How about a BEER!?! :)

Collectives™ on Stack Overflow

Covert ASP.net 2.0 to ASP.net MVC C# 3.0 (C#)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related