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:
Display the user’s name and skin type under their customer profile.
Display the appropriate facial treatments for their skin type.
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.
Fork and clone the starter code. Check out the project via Version Control in Visual Studio.
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
13.11.2. The Customer Profile¶
Controllers, we have a controller called
SpaController are three methods.
CheckSkinType()method: Contains the logic to determine which facial treatments are appropriate for which skin type.
Index()action method: Returns the
GETrequests are made to
Menu()action method: Returns the
POSTrequests are made to
Views/Spa, we have a Razor template called
Menu.cshtml, there are two
Let’s add some children to the
div with the id,
h3that says “Client profile”.
Next, display the value of the
nameparameter from the form.
This is a two step process.
In the controller, add a
ViewBagproperty to hold the
In the view, use that
ViewBagproperty to display the
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
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
Add the client’s
appropriateFacialslist as a
Now, head back to
Menu.cshtmland checkout the empty
divwith the id,
Pass in the
skintypevariable to the
Iteratively add the values in
appropriateFacialsto 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.
servicesMenu div, use
@if to determine if the value of
If the value of
"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.
If the value of
"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.
13.11.6. Bonus Mission¶
Try adding an element to the bottom of the page with square shaped
divelements. 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.cssfile inside of it to get some CSS practice. There are already a number of style rules present so remember to be give your
divelements class identifiers to give your elements specificity.
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
Work with routes and paths to display the spa menu page on a separate route from the form.