Tutorial: ASP.NET MVC 5 Hotel Room Booking

This tutorial shows how to create an ASP.NET MVC 5 web application for scheduling hotel room reservations. Includes C# and VB source and sample SQL Server database.
Feb 24, 2015
asp.net mvc hotel room booking

Features

  • ASP.NET MVC 5 Scheduler control
  • Room status (ready, dirty, cleanup)
  • Reservation status (new, confirmed, arrived, checked out, expired)
  • Drag and drop reservation scheduling
  • Reservation editing using a modal dialog
  • Sample SQL Server database
  • C# and VB version
  • Includes a trial version of DayPilot Pro for ASP.NET MVC

The source code of the tutorial is available for download.

Example: Reservation Status

asp.net-mvc-hotel-room-booking-reservation-status.png

The rules that determine the reservation status are implemented in the MVC controller on the server side. It will also change the color of the duration bar accordingly:

  • New reservation (orange)
  • Confirmed reservation (green)
  • The guest has arrived (blue)
  • The guest has checked out (gray)
  • Problem - late confirmation, no-show, late checkout (red)

C#

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html = String.Format("{0} ({1:d} - {2:d})", e.Text, e.Start, e.End);
  int status = Convert.ToInt32(e.Tag["ReservationStatus"]);

  switch (status)
  {
      case 0: // new
          if (e.Start < DateTime.Today.AddDays(2)) // must be confirmed two day in advance
          {
              e.DurationBarColor = "red";
              e.ToolTip = "Expired (not confirmed in time)";
          }
          else
          {
              e.DurationBarColor = "orange";
              e.ToolTip = "New";
          }
          break;
      case 1:  // confirmed
          if (e.Start < DateTime.Today || (e.Start == DateTime.Today && DateTime.Now.TimeOfDay.Hours > 18))  // must arrive before 6 pm
          {
              e.DurationBarColor = "#f41616";  // red
              e.ToolTip = "Late arrival";
          }
          else
          {
              e.DurationBarColor = "green";
              e.ToolTip = "Confirmed";
          }
          break;
      case 2: // arrived
          if (e.End < DateTime.Today || (e.End == DateTime.Today && DateTime.Now.TimeOfDay.Hours > 11))  // must checkout before 10 am
          {
              e.DurationBarColor = "#f41616"; // red
              e.ToolTip = "Late checkout";
          }
          else
          {
              e.DurationBarColor = "#1691f4";  // blue
              e.ToolTip = "Arrived";
          }
          break;
      case 3: // checked out
          e.DurationBarColor = "gray";
          e.ToolTip = "Checked out";
          break;
      default:
          throw new ArgumentException("Unexpected status.");
  }

  e.Html = e.Html + String.Format("<br /><span style='color:gray'>{0}</span>", e.ToolTip);


  int paid = Convert.ToInt32(e.DataItem["ReservationPaid"]);
  string paidColor = "#aaaaaa";

  e.Areas.Add(new Area().Bottom(10).Right(4).Html("<div style='color:" + paidColor + "; font-size: 8pt;'>Paid: " + paid + "%</div>").Visible());
  e.Areas.Add(new Area().Left(4).Bottom(8).Right(4).Height(2).Html("<div style='background-color:" + paidColor + "; height: 100%; width:" + paid + "%'></div>").Visible());
}

VB

Protected Overrides Sub OnBeforeEventRender(ByVal e As BeforeEventRenderArgs)
  e.Html = String.Format("{0} ({1:d} - {2:d})", e.Text, e.Start, e.End)
  Dim status As Integer = Convert.ToInt32(e.Tag("ReservationStatus"))

  Select Case status
    Case 0 ' new
      If e.Start < Date.Today.AddDays(2) Then ' must be confirmed two day in advance
        e.DurationBarColor = "red"
        e.ToolTip = "Expired (not confirmed in time)"
      Else
        e.DurationBarColor = "orange"
        e.ToolTip = "New"
      End If
    Case 1 ' confirmed
      If e.Start < Date.Today OrElse (e.Start = Date.Today AndAlso Date.Now.TimeOfDay.Hours > 18) Then ' must arrive before 6 pm
        e.DurationBarColor = "#f41616" ' red
        e.ToolTip = "Late arrival"
      Else
        e.DurationBarColor = "green"
        e.ToolTip = "Confirmed"
      End If
    Case 2 ' arrived
      If e.End < Date.Today OrElse (e.End = Date.Today AndAlso Date.Now.TimeOfDay.Hours > 11) Then ' must checkout before 10 am
        e.DurationBarColor = "#f41616" ' red
        e.ToolTip = "Late checkout"
      Else
        e.DurationBarColor = "#1691f4" ' blue
        e.ToolTip = "Arrived"
      End If
    Case 3 ' checked out
      e.DurationBarColor = "gray"
      e.ToolTip = "Checked out"
    Case Else
      Throw New ArgumentException("Unexpected status.")
  End Select

  e.Html = e.Html & String.Format("<br /><span style='color:gray'>{0}</span>", e.ToolTip)


  Dim paid As Integer = Convert.ToInt32(e.DataItem("ReservationPaid"))
  Dim paidColor As String = "#aaaaaa"

  e.Areas.Add((New Area()).Bottom(10).Right(4).Html("<div style='color:" & paidColor & "; font-size: 8pt;'>Paid: " & paid & "%</div>").Visible())
  e.Areas.Add((New Area()).Left(4).Bottom(8).Right(4).Height(2).Html("<div style='background-color:" & paidColor & "; height: 100%; width:" & paid & "%'></div>").Visible())
End Sub

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java