Version 1.0

In this lab you will create an MVC application to track events. Events can either be public or for the current user.

Skills Needed

  • C#
    • Attributes
    • Generic Types
    • Interfaces
    • Lists
  • ASP.NET
    • Controllers
    • Models
    • Routes
    • Views

Story 1 - Set Up the Project

Set up the ASP.NET project.

Description

Set up the ASP.NET project in preparation for later stories.

  • Create a new ASP.NET Web Application (NET Framework) project called EventPlanner.Mvc.
  • Add the provided EventPlanner project to the solution.
  • Add a reference to the EventPlanner project to the new ASP.NET project.

Clean up the existing web project.

  • Remove the App_Data folder.
  • Remove the Contact.cshtml view AND the corresponding action from the HomeController.

Update the About page (About.cshtml).

  • Remove existing h2, h3 and p elements.
  • Add h2 containing your name.
  • Add h3 containing the class name.
  • In HomeController.About remove the ViewBag.Message code.

Update the Layout page (_Layout.cshtml).

  • Remove the link to the Contact page.
  • Remove the Application Name link.
  • Change the title element to say Event Planner - @ViewBag.Title.
  • Change the footer element to say Event Planner instead of My ASP.NET Application.

Notes

  • ENSURE the view(s) render properly in the browser.

Acceptance Criteria

  • The layout page provides the options to go home and to the about page.
  • The layout page does not have an option to go to the contact page.
  • The title and footer on the layout page are correct.
  • The About page shows your information.

Story 2 - Set Up Data Store

Set up a data store to hold the events for the site.

Description

To work with the events the IEventDatabase is needed. This interface is already defined in the business layer.

There will be no database component for this lab so the database needs to be a "singleton".

  • Add a new, static class to the web project to hold the database (e.g. DatabaseFactory). The App_Start folder is a good place for this.
  • Create a private, static field to hold the IEventDatabase instance.
  • Expose a property or method from the class to provide access to the instance. DO NOT expose the field.
  • Ensure the database is initialized with a couple of public and private events.

Define a model to be used in the UI. This helps isolate business logic from view logic.

  • Create a new "model" class for the event under the Models folder.
  • Create auto properties to back each of the public properties on the business object.
  • Add validation to the model that mimics the business object.
    • Name is required and cannot be empty.
    • End date must be greater than or equal to start date.
  • Fix the display names for the start and end dates to include spaces.
    • Add the DisplayAttribute to the properties.

Notes

  • The simplest approach to creating a singleton is to define a static constructor that creates an instance of the class and then initializes it before assigning it to the field.
  • An alternative approach is to create a method that returns the initialized instance. When it is first called it sees the field set to null and initializes it. Subsequent calls use the initial version.
  • Yet another approach is to use Lazy.
  • The database MUST persist across web requests otherwise data will be lost as you navigate pages.
  • The database will be reset each time the web application is run.

Acceptance Criteria

  • Code compiles.
  • Events are persisted for the life of the application.

Story 3 - Show My Events

The user will be able to view their events.

Description

The user can view their events by using a link on the main page. The events should be ordered by most recent start date. Events that have passed should not be shown.

  • Add a new EventController controller to the web project. This controller will be responsible for managing events.
  • Add a new action called My.
    • Get the private events from the database.
    • Filter out the unneeded items.
    • Convert to the model type.
    • Pass the models to the view.

Define the UI for my events.

  • Right click the action and select Add View.
    • Use the List template.
    • Use the model type.
    • Do not use a partial view or reference the scripts.
    • Do use the layout page.
  • Clean up the view.
    • Remove the Description and IsPublic columns from the table. Note: Tables have a header row that must be modified in addition to the actual data row.
    • Change the title to My Events.
    • Change the header (h2) to match the title.

Add a link on the main page.

  • In the layout page add a new link called My Events between Home and About.
  • Ensure the controller name and action are correct.

Notes

  • Ensure past or public events are not displayed.
  • Ensure the ordering of the events.
  • Ensure the business object is not being passed to the view.
  • Be careful about running the debugger while in an HTML page. The debugger will automatically try to go to that page which can cause an error if the page expects a parameter.

Acceptance Criteria

  • Able to navigate to my events from main page.
  • Events are shown with option to edit or delete.
  • Past events are not shown.
  • Events are shown ordered by start date.
  • Page title and header are correct.
  • Only expected columns are shown.

Story 4 - Show Public Events

The user will be able to view public events.

Description

The user can view public events by using a link on the main page. The behavior of public events is identical to My events accept it only applies to events marked as public.

Acceptance Criteria

  • Able to navigate to public events from main page.
  • Events are shown with option to edit or delete.
  • Past events are not shown.
  • Events are shown ordered by start date.
  • Page title and header are correct.
  • Only expected columns are shown.

Story 5 - View Event

The user will be able to view an existing event.

Description

The user can view an existing event.

The user can view an existing event.

  • Add a new action called Details to the EventController class. The method is a GET method. It will require an integral parameter called id.
    • Get the event from the database.
    • If the event is not found then return a 404 (HttpNotFound).
    • Convert the event to a model and pass it to the view.

Define the UI for my events.

  • Right click the action and select Add View.
    • Use the Details template.
    • Use the model type.
    • Do not use a partial view or reference the scripts.
    • Do use the layout page.
  • Clean up the view.
    • Change the title to View Event.
    • Change the header (h2) to match the title.
    • Remove the h4 header with the model name.
    • Modify the Back to List link to return to the appropriate my/public page based upon the event's type.

Notes

  • It is important that the parameter name be id for edit otherwise the routing and existing views will not work.

Acceptance Criteria

  • Can view the details of an event from the My page.
  • Can view the details of an event from the Public page.
  • Can edit an event using the edit link.
  • Clicking Back to List returns to the appropriate page.

Story 6 - Add Event

The user will be able to add new events.

Description

The user can add new events.

  • Add a new action called Create to the EventController class. The method is a GET method.
    • Create an instance of the model.
    • Default the start and end dates to today.
  • Add a new action called Create to the EventController class that accepts the event being added. The method is a POST method.
    • Verify the event is valid and then add to the database.
    • If the event is invalid or the add fails then show the view again with the appropriate information.
    • If the add succeeds then redirect to the My action if the event was private or Public if the event was public.

Define the UI for my events.

  • Right click the action and select Add View.
    • Use the Create template.
    • Use the model type.
    • Do not use a partial view or reference the scripts.
    • Do use the layout page.
  • Clean up the view.
    • Change the title to Add Event.
    • Change the header (h2) to match the title.
    • Remove the h4 header with the model name.
    • Modify the Back to List link to return to the My Events page.

Notes

  • Remember that attributes (e.g. HttpGet, HttpPost) are used to indicate which verb an action is for.
  • Remember that action names determine the route that is used.
  • Remember that MVC can distinguish actions by their name and verb but the C# compiler cannot. Ensure no methods have the same signature.
  • Remember that AddModelError does not work correctly with exceptions so use the overload that accepts the key (empty) and the exception message.
  • The runtime will handle converting the date/time text to a valid value. Do not worry about adding validation around the formatting here.

Acceptance Criteria

  • Able to create an event from the My events page.
  • Event is validated and user is returned to page if invalid.
  • Attempting to add an event that already exists shows an error and returns user to page.
  • User is redirected to appropriate page after add.

Story 7 - Edit Event

The user will be able to edit existing events.

Description

The user can edit existing events.

  • Add a new action called Edit to the EventController class. The method is a GET method. It will require an integral parameter called id.
    • Get the event from the database.
    • If the event is not found then return a 404 (HttpNotFound).
    • Convert the event to a model and pass it to the view.
  • Add a new action called Edit to the EventController class that accepts the event being edited. The method is a POST method.
    • Verify the event is valid and then update in the database.
    • If the event is invalid or the update fails then show the view again with the appropriate information.
    • If the update succeeds then redirect to the My action if the event was private or Public if the event was public.

Define the UI for my events.

  • Right click the action and select Add View.
    • Use the Edit template.
    • Use the model type.
    • Do not use a partial view or reference the scripts.
    • Do use the layout page.
  • Clean up the view.
    • Change the title to Edit Event.
    • Change the header (h2) to match the title.
    • Remove the h4 header with the model name.
    • Modify the Back to List link to return to the My Events page.

Notes

  • It is important that the parameter name be id for edit otherwise the routing and existing views will not work.

Acceptance Criteria

  • Able to edit an exiting event from the My events or Public events pages.
  • Event is validated and user is returned to edit page if invalid.
  • Attempting to edit an event that already exists shows an error and returns user to page.
  • User is redirected to appropriate page after edit.
  • After making changes the updates appear in the UI properly.

Story 8 - Delete Event

The user will be able to delete an existing event.

Description

The user can delete an existing event.

  • Add a new action called Delete to the EventController class. The method is a GET method. It will require an integral parameter called id.
    • Get the event from the database.
    • If the event is not found then return a 404 (HttpNotFound).
    • Convert the event to a model and pass it to the view.
  • Add a new action called Delete to the EventController class that accepts the event being edited. The method is a POST method.
    • Delete the event from the database. In this case deletion should not fail but go ahead and capture any errors and redirect anyway.
    • If the delete succeeds then redirect to the My action if the event was private or Public if the event was public.

Define the UI for my events.

  • Right click the action and select Add View.
    • Use the Delete template.
    • Use the model type.
    • Do not use a partial view or reference the scripts.
    • Do use the layout page.
  • Clean up the view.
    • Change the title to Delete Event.
    • Change the header (h2) to match the title.
    • Remove the h4 header with the model name.
    • Modify the Back to List link to return to the appropriate my/public page based upon the event's type.

Notes

  • It is important that the parameter name be id for edit otherwise the routing and existing views will not work.

Acceptance Criteria

  • Can view the details of an event from the My page.
  • Can view the details of an event from the Public page.
  • Can edit an event using the edit link.
  • Clicking Back to List returns to the appropriate page.
Academic Honesty!
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly complete the form. Please provide a valid email address and we will get back to you within 24 hours. Payment is through PayPal, Buy me a Coffee or Cryptocurrency. We are a nonprofit organization however we need funds to keep this organization operating and to be able to complete our research and development projects.