Nov 25, 2011

Fun Project: DotNetNuke module views

Last time I showed you how to create, build, package, upload and use a simple DNN module, developed in C# using Visual Studio
2010. Let’s get started by thinking (and writing down Smile) some requirements.

Requirements

Non-functional

R-NFR1 DotNetNuke 05.06
R-NFR2 ASP.NET 4
R-NFR3 local testability without DNN installation

Use Cases

As a client I want to:

R-U1 – Create an online account on the site
R-U2 – Log in and out
R-U3 – Choose a treatment
R-U4 – Choose a time/date
R-U5 – Book a massage 
R-U6 – Got sent an email confirmation
R-U6.1 with an outlook appointment attached to it
R-U7 – get shown my booked treatments in detail

As an administrator I want to:

R-A1 – Define treatments (duration, title, description)
R-A2 – Define time windows (opening or working hours)
R-A3 – Show (todays, etc.) bookings
R-A4 – Got sent an email with a client booking information
R-A5 – Manage accounts (list, add, edit, delete)

New Web Project

To separate DotNetNuke module stuff from booking web functionality I added a new ASP.NET web project to the solution

image

remove the generated pages, sub folders and strip down the web.config file to a minimum.

Now add a web user control to the BookingViews project

image

Telerik

Writing an outlook style schedule/calendar control in ASP.NET seems like a huge effort. Let’s get a commercial control library suite including a schedule control. As DNN already contains Telerik controls the evaluation was short. They have an excellent reputation when talking to colleagues.

Data Model

First let’s show the data access layer where the massage bookings and treatment offerings are persisted. Using the Entity Framework 4.0 model first approach, I create the following model:

image

The BookingEntry and Treatment entities were added in the model edmx in VS design view. However, the User entity was imported from the existing DotNetNuke database (table first). Adding some relations and I can take advantage of the DNN register/login/user functionality in my bookings.

View

Learning and configuring the module view took more effort. This is the resulting aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BookingForm.aspx.cs" Inherits="BookingViews.BookingForm" %>

 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div style="height: 527px; width: 827px">

        <telerik:RadScheduler ID="RadScheduler1" runat="server" Culture="de-CH" DayEndTime="19:00:00"

            DayStartTime="07:00:00" FirstDayOfWeek="Monday" Height="558px" SelectedView="WeekView"

            ShowViewTabs="False" Skin="Forest" Width="800px" WorkDayEndTime="19:00:00" WorkDayStartTime="07:00:00"

            SelectedDate="2011-11-01" DataEndField="End" DataKeyField="Id"

            DataStartField="Start" DataSubjectField="Subject"

            onappointmentcommand="RadScheduler1_AppointmentCommand"

            ontimeslotcreated="RadScheduler1_TimeSlotCreated"

            DataSourceID="BookingEntryDataSource" DataDescriptionField="Remarks"

            EnableDescriptionField="True">

            <ResourceTypes>

                <telerik:ResourceType DataSourceID="TreatmentDataSource"

                    ForeignKeyField="TreatmentId" KeyField="Id" Name="TreatmentResource"

                    TextField="Name" />

            </ResourceTypes>

            <WeekView DayEndTime="19:00:00" DayStartTime="07:00:00" HeaderDateFormat="dd.MM.yyyy"

                WorkDayEndTime="19:00:00" WorkDayStartTime="07:00:00" />

            <AppointmentTemplate>

                <span style        ="font-weight: bold; font-size: small">

                    <%# Eval("Subject") %>

                </span>

                <br />

                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Calendar.png" OnClick="ExportOutlook" CommandName="ExportOutlook" />

            </AppointmentTemplate>

        </telerik:RadScheduler>

    </div>

    <telerik:RadAjaxManager runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadScheduler1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

    <asp:ObjectDataSource ID="BookingEntryDataSource" runat="server"

        DataObjectTypeName="My.DotNetNuke.Modules.BookingModule.BookingEntry"

        DeleteMethod="Delete" InsertMethod="Add" SelectMethod="GetAll"

        TypeName="My.DotNetNuke.Modules.BookingModule.Data.BookingEntryDataRepository"

        UpdateMethod="Update"></asp:ObjectDataSource>

    <asp:ObjectDataSource ID="TreatmentDataSource" runat="server"

        DataObjectTypeName="My.DotNetNuke.Modules.BookingModule.Treatment"

        DeleteMethod="Delete" InsertMethod="Add" SelectMethod="GetAll"

        TypeName="My.DotNetNuke.Modules.BookingModule.Data.TreatmentDataRepository"

        UpdateMethod="Update"></asp:ObjectDataSource>

    </form>

</body>

</html>

The control’s data sources are of type ObjectDataSource. BookingEntryDataSource and TreatmentDataSource both implement the IRepository<T> interface. This hides the EF stuff behind a façade and allowed better testability than the EntityDataSource:

    /// <summary>

    /// Interface to decouple entities from data access.

    /// </summary>

    public interface IRepository<T> where T: class

    {

        void Add(T entity);

        void Delete(T entity);

        ICollection<T> GetAll();

        T GetById(T entryWithKeyOnly);

        void Update(T entity);

    }

Note that I added the telerik rad scheduler, configured a week view, added some appointment resources and DataSources to be bound in the scheduler control.

And this is the final result:

image

Double clicking shows or edits the details of the appointment

image

I hope this 3-part series of my (hobby project) development “minutes” gave you some insight around DotNetNuke module development in Visual Studio using C#.

3 comments:

  1. Nice project! Can you post the source code package?

    Scippy

    ReplyDelete
  2. Sorry Markus but i am unable to implement this package, can you explain it in more details.

    ReplyDelete