Merge pull request #153 from LaunchCodeEducation/chap13-updates

updated wording, formatting, and starter code
LaunchCode-Education-Archived · Oct 19, 2022 · a645140 · a645140
2 parents 6adf577 + 6db4825
commit a645140
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 192 deletions.
diff --git a/src/chapters/razor-views/create-template.rst b/src/chapters/razor-views/create-template.rst
@@ -87,22 +87,23 @@ string of HTML. In ``Views``, create a new subdirectory called ``Hello``.
 
 Within ``Hello`` create a new file of the *Razor View* file template. 
 
-**WINDOWS USERS:** Right click on the ``Views`` directory or any subdirectory and select *Add -> New Item*. 
-Avoid selecting *Add -> View* from your options. 
+**Windows Users:** 
+   * Right click on the ``Views`` directory or any subdirectory and select *Add -> New Item*. 
+   * The *Razor View - Empty* option is found in the *ASP.NET Core* menu. 
 
-**MAC USERS:** Right click on the ``Views`` directory or any subdirectory and select *Add -> New File*.
-
-**ALL USERS:** In the modal window that appears, look for the item labelled *Razor View*. 
-
-.. figure:: figures/razor-view-template-selection.png
-   :alt: User selects the Razor View file template.
-
-   Select the *Razor View* file template.
+**Mac Users:** 
+   * Right click on the ``Views`` directory or any subdirectory and select *Add -> New File*.
+   * The *Razor View* option is found in the *ASP.NET Core* menu.  
 
+**All Users:** 
+   * Once you have your *Razor View* or *Razor View - Empty* selected, name it ``Index``.
+   * We are naming our Views after there corresponding action methods. 
 
 Add the HTML form from the ``Index()`` method to your new template. Once you are done 
 with that, update the ``Index()`` method to return ``View()``.
 
+.. _layout.cshtml:
+
 ``_Layout.cshtml``
 ~~~~~~~~~~~~~~~~~~
 

diff --git a/src/chapters/razor-views/layout-pages.rst b/src/chapters/razor-views/layout-pages.rst
@@ -1,7 +1,7 @@
 The Shared Directory
 ====================
 
-Earlier in the lesson, we touched upon the role of ``_Layout.cshtml``. When we
+:ref:`Earlier in the lesson <layout.cshtml>`, we touched upon the role of ``_Layout.cshtml``. When we
 set ``Layout`` to ``null``, the header, footer, and Bootstrap disappear from
 our site and we are left with static HTML. ``_Layout`` is in the ``Shared``
 directory of the ``Views`` directory. Files inside this ``Shared`` directory
@@ -33,9 +33,9 @@ Let's assume that you want to add the same set of links to multiple pages within
 .. sourcecode:: HTML
    :linenos:
 
-   <a href = "https://www.launchcode.org">LaunchCode</a> <br/>
-   <a href = "https://www.lego.com">Play Well</a> <br/>
-   <a href = "https://www.webelements.com">Other Building Blocks</a>
+     <a href = "https://www.launchcode.org">LaunchCode</a> <br/>
+     <a href = "https://www.lego.com">Play Well</a> <br/>
+     <a href = "https://www.webelements.com">Other Building Blocks</a>
 
 Instead of pasting this code into every template, we will store the HTML in
 a separate file.
@@ -64,11 +64,11 @@ Now let's see how to pull a partial view into a template:
    .. sourcecode:: HTML
       :linenos:
 
-      <!-- template code -->
+        <!-- template code -->
+
+         <partial name="/Views/Shared/_LinkListPartial.cshtml" />
 
-      <partial name="/Views/Shared/_LinkListPartial.cshtml" />
-
-      <!-- more template code -->
+        <!-- more template code -->
 
 When the code runs, the ``name`` attribute in the ``<partial>`` tag helper gives the path to the partial view.
 In the example above, the partial view is named ``_LinkListPartial.cshtml`` and is in the ``Shared`` folder in the ``Views`` directory.
@@ -84,9 +84,9 @@ Check Your Understanding
    .. sourcecode:: HTML
       :linenos:
 
-      <a href = "https://www.launchcode.org">LaunchCode</a> <br/>
-      <a href = "https://www.lego.com">Play Well</a> <br/>
-      <a href = "https://www.webelements.com">Other Building Blocks</a>
+        <a href = "https://www.launchcode.org">LaunchCode</a> <br/>
+        <a href = "https://www.lego.com">Play Well</a> <br/>
+        <a href = "https://www.webelements.com">Other Building Blocks</a>
 
    Which of the following would place the partial view inside a
    ``<div>`` element in the template?

diff --git a/src/chapters/razor-views/template-conditionals.rst b/src/chapters/razor-views/template-conditionals.rst
@@ -39,18 +39,18 @@ Let's look at an example:
    .. sourcecode:: guess
       :linenos:
 
-      @if (ViewBag.userSelection == "Instant")
-      {
-         <p>Are you sure about that?</p>
-      } 
-      else if (ViewBag.userSelection == "French Roast")
-      {
-         <p>Oooh la la!</p>
-      } 
-      else
-      {
-         <p>Thanks for your order</p>
-      }
+        @if (ViewBag.userSelection == "Instant")
+        {
+           <p>Are you sure about that?</p>
+        } 
+        else if (ViewBag.userSelection == "French Roast")
+        {
+           <p>Oooh la la!</p>
+        } 
+        else
+        {
+           <p>Thanks for your order</p>
+        }
 
 The ``@if`` statement in line 1 compares a user's brew choice to the string
 ``"Instant"``. If they match, then Razor adds the paragraph element to the
@@ -78,15 +78,15 @@ Just as we can nest loops, we can nest any C# in Razor for advanced control flow
    .. sourcecode:: guess
       :linenos:
 
-      @if (ViewBag.coffeeOptions.Count > 1)
-      {
-         <ol>
-            @foreach(string coffeeType in ViewBag.coffeeOptions)
-            {
-               <li>@coffeeType</li>
-            }
-         </ol>
-      }
+        @if (ViewBag.coffeeOptions.Count > 1)
+        {
+           <ol>
+              @foreach(string coffeeType in ViewBag.coffeeOptions)
+              {
+                 <li>@coffeeType</li>
+              }
+           </ol>
+        }
 
 
 The conditional in line 1 checks that ``coffeeOptions`` contains more than one
@@ -136,12 +136,12 @@ the values in an unordered list.
 .. sourcecode:: html
    :linenos:
 
-   <ul>
-      @foreach(int number in ViewBag.numbers)
-      {
-         <li>@number</li>
-      }
-   </ul>
+     <ul>
+        @foreach(int number in ViewBag.numbers)
+        {
+           <li>@number</li>
+        }
+     </ul>
 
 .. admonition:: Question
 

diff --git a/src/chapters/razor-views/template-forms.rst b/src/chapters/razor-views/template-forms.rst
@@ -1,6 +1,13 @@
 Razor Forms
 ===========
 
+.. admonition:: Warning
+
+   Many changes have happened in the world of Visual Studio and ASP.NET since the original writing of this book.  
+   We reviewed the videos and instructions in the latest environment and framework and made notes to help you through any discrepancies.  
+   If you get stuck following along with a video, we suggest comparing the written instructions for the problematic area.
+   Notes have been added to the reading that will help you locate or code what is needed to complete each chapter project.
+
 Already we have seen that templates allow us to build generic forms.
 Using templates, you can reuse the structure by rendering the same form, but with different labels and data.
 Thus, a single form can serve different purposes, saving you extra effort.
@@ -36,10 +43,10 @@ CodingEvents Setup - Text
 
 #. In the ``Controllers`` directory, create a new controller named ``EventsController``.
 #. In the new controller, create an action method for ``GET`` requests. 
-#. Within the action method, create an empty list and add a few event names to it.
-#. Add the list to ``ViewBag``. Then return the corresponding view.
+#. Within the action method, create an empty ``List`` and add a few event names to it.
+#. Add the ``List`` to ``ViewBag``. Then return the corresponding view.
 #. Within the ``Views`` directory, create a new directory named ``Events``. Within this directory, create a new view named ``Index.cshtml``.
-#. Within the new template, loop over the list and display the name of each event.
+#. Within the new template, loop over the ``List`` and display the name of each event.  Make sure your template can handle an empty ``List``.
 
 Create and Render a Form - Video
 --------------------------------
@@ -61,14 +68,14 @@ The method for the form should be of type ``post``.
 .. sourcecode:: html
    :linenos:
 
-   <!-- Other HTML -->
+     <!-- Other HTML -->
 
-   <form method="post">
-      <input type="text" name="inputName">
-      <input type="submit" value="submitButtonText">
-   </form>
+     <form method="post">
+        <input type="text" name="inputName">
+        <input type="submit" value="submitButtonText">
+     </form>
 
-   <!-- Other HTML -->
+     <!-- Other HTML -->
 
 You can include as many inputs as you need in the form, and these can be of
 different types (e.g. text, email, checkbox, etc.). However, each different
@@ -79,13 +86,13 @@ To *render* the form in the view, add a method to the controller with an ``[Http
 .. sourcecode:: csharp
    :lineno-start: 26
 
-   [HttpGet]
-   public IActionResult Add()
-   {
-      // Any additional method code here
+     [HttpGet]
+     public IActionResult Add()
+     {
+        // Any additional method code here
 
-      return View();
-   }
+        return View();
+     }
 
 .. admonition:: Note
 
@@ -118,22 +125,22 @@ a method to the controller using the ``[HttpPost]`` annotation:
 .. sourcecode:: csharp
    :lineno-start: 31
 
-   [HttpPost]
-   [Route("/Events/Add")]
-   public IActionResult NewEvent(string name)
-   {
-      // Method code...
+     [HttpPost]
+     [Route("/Events/Add")]
+     public IActionResult NewEvent(string name)
+     {
+        // Method code...
 
-      return Redirect("/Events");
-   }
+        return Redirect("/Events");
+     }
 
 Some points to note:
 
-#. Line 2: For each piece of data that needs to be retrieved from the form,
+#. **Line 2:** For each piece of data that needs to be retrieved from the form,
    declare a parameter of the appropriate type.
 #. The method code performs any data manipulation required after the
    information gets submitted.
-#. Line 6: We may want to send the user to a different page after they
+#. **Line 6:** We may want to send the user to a different page after they
    successfully submit a form. Instead of re-rendering the form, we want
    to use ``Redirect()`` to *redirect* the user to a different template.