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. Setup ----- Fork and clone the `starter code `_. Check out the project via Version Control in Visual Studio. .. admonition:: 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 :ref:`vs-troubleshooting` 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. .. figure:: figures/startingform.png :scale: 40% :alt: 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``. The Customer Profile -------------------- In ``Controllers``, we have a controller called ``SpaController``. Inside ``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 ``Spa/Index`` view when ``GET`` requests are made to ``/spa/``. #. ``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``. #. Add an ``h3`` that says "Client profile". #. Next, display the value of the ``name`` parameter from the form. .. admonition:: Tip This is a two step process. #. In the controller, add a ``ViewBag`` property to hold the ``name`` value. #. 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. 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. #. Add the client's ``skintype`` and the ``appropriateFacials`` list as a ``ViewBag`` property. #. Now, head back to ``Menu.cshtml`` and checkout the empty ``div`` with the id, ``servicesMenu``. #. Pass in the ``skintype`` variable to the ``

`` tag. #. Iteratively add the values in ``appropriateFacials`` to an unordered list. If you need a quick reminder of the syntax, review the :ref:`@foreach section ` . 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"``. #. 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. #. 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! 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. .. figure:: figures/completedform.png :scale: 40% :alt: Form completed with the name, "Yolanda", combination skin and a preference for pedicures. A client completes the spa day form. .. figure:: figures/endresultprofilepage.png :scale: 35% :alt: Profile showing Yolanda's information, recommended facial treatments, and pedicure description. The client's service menu. Bonus Mission ------------- #. 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. #. 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. #. Work with routes and paths to display the spa menu page on a separate route from the form.