13.11. Studio: Spa Day!

After all of the hard work we have put into learning about Razor templates, it is time for a spa day. Let’s make an application to select some spa services.

Our application needs to do the following:

  1. Display the user’s name and skin type under their customer profile.
  2. Display the appropriate facial treatments for their skin type.
  3. Display the description of the spa’s manicures or pedicures depending on the user’s interest.

As always, read through the whole page before starting to code.

13.11.1. Setup

Fork and clone the starter code. Check out the project via Version Control in Visual Studio.

Tip

Windows Users: You might need to change some solution settings if you pull down this demo repository and run it on your computer. Refer to Visual Studio Operational Tips for help.

Once you have the project opened in your IDE, and run it and click the SpaDay link that appears in the upper left of the home page. You should see a small form at the /Spa route.

Image showing an empty form with three fields for name, skin type, and whether the person wants a pedicure or manicure.

The form located at /Spa.

13.11.2. The Customer Profile

In Controllers, we have a controller called SpaController. Inside SpaController are three methods.

  1. CheckSkinType() method: Contains the logic to determine which facial treatments are appropriate for which skin type.
  2. Index() action method: Returns the Spa/Index view when GET requests are made to /spa/.
  3. Menu() action method: Returns the Spa/Menu view when POST requests are made to /spa/.

In Views/Spa, we have a Razor template called Menu. Inside Menu.cshtml, there are two div elements. Let’s add some children to the div with the id, clientProfile.

  1. Add an h3 that says “Client profile”.

  2. Next, display the value of the name parameter from the form.

    Tip

    This is a two step process.

    1. In the controller, add a ViewBag property to hold the name value.
    2. In the view, use that ViewBag property to display the name in a p tag.

Run the application and head to localhost:5001/spa to see the results. When we fill out the form, we should see a new page with the client profile heading and name at the top.

13.11.3. List All Appropriate Facial Treatments

To provide treatment suggestions, SpaController.Menu() uses the CheckSkinType() method and fills a list with facial treatments that benefit the user’s skin type. Now, we just need to use Razor to display the contents of the appropriateFacials list.

  1. Add the client’s skintype and the appropriateFacials list as a ViewBag property.
  2. Now, head back to Menu.cshtml and checkout the empty div with the id, servicesMenu.
  3. Pass in the skintype variable to the <p> tag.
  4. Iteratively add the values in appropriateFacials to an unordered list. If you need a quick reminder of the syntax, review the @foreach section .

13.11.4. Mani or Pedi?

We want to display a description for the nail service the user selects. Inside the servicesMenu div, use @if to determine if the value of manipedi is "manicure" or "pedicure".

  1. If the value of manipedi is "manicure", display this description:

    Our manicure is a great way to spend 30 minutes of your day! We use shea butter hand cream and the finest gel polish.

  2. If the value of manipedi is "pedicure", display this description:

    Relax for 45 minutes in pure luxury! Our massage chairs and experienced nail techs are here to get your feet in shape for sandal season!

13.11.5. End Result

After you are done with the studio, you should be able to fill out the form, click “Submit”, and see your profile page.

Form completed with the name, "Yolanda", combination skin and a preference for pedicures.

A client completes the spa day form.

Profile showing Yolanda's information, recommended facial treatments, and pedicure description.

The client’s service menu.

13.11.6. Bonus Mission

  1. Try adding an element to the bottom of the page with square shaped div elements. Each square should be a different color for different available nail polishes. At the base of the project is a folder called wwwroot. Inside of that is another folder called css. Modify the site.css file inside of it to get some CSS practice. There are already a number of style rules present so remember to be give your div elements class identifiers to give your elements specificity.
  2. Modify the form to allow the user to select either a manicure or pedicure or both. If the user selects both, display both the manicure and pedicure descriptions in the Menu view.
  3. Work with routes and paths to display the spa menu page on a separate route from the form.