From ebd03b58fd49c1c4721f3dab7c6745bad5edbcab Mon Sep 17 00:00:00 2001 From: Courtney Frey Date: Fri, 14 Oct 2022 14:04:45 -0500 Subject: [PATCH 1/4] updated wording, formatting, and starter code --- src/chapters/razor-views/create-template.rst | 21 +-- src/chapters/razor-views/layout-pages.rst | 22 +-- .../razor-views/template-conditionals.rst | 54 +++--- src/chapters/razor-views/template-forms.rst | 44 ++--- .../razor-views/template-iteration.rst | 167 +++++++++--------- src/chapters/razor-views/using-templates.rst | 12 +- src/chapters/razor-views/why-templates.rst | 60 +++---- 7 files changed, 192 insertions(+), 188 deletions(-) diff --git a/src/chapters/razor-views/create-template.rst b/src/chapters/razor-views/create-template.rst index 2a85ee02..7d30c135 100644 --- 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 index cae4b079..a02d4b39 100644 --- 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 `, 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: - LaunchCode
- Play Well
- Other Building Blocks + LaunchCode
+ Play Well
+ Other Building Blocks 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: - + + + - - - + When the code runs, the ``name`` attribute in the ```` 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: - LaunchCode
- Play Well
- Other Building Blocks + LaunchCode
+ Play Well
+ Other Building Blocks Which of the following would place the partial view inside a ``
`` element in the template? diff --git a/src/chapters/razor-views/template-conditionals.rst b/src/chapters/razor-views/template-conditionals.rst index e4bab3c3..8e3c4460 100644 --- 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") - { -

Are you sure about that?

- } - else if (ViewBag.userSelection == "French Roast") - { -

Oooh la la!

- } - else - { -

Thanks for your order

- } + @if (ViewBag.userSelection == "Instant") + { +

Are you sure about that?

+ } + else if (ViewBag.userSelection == "French Roast") + { +

Oooh la la!

+ } + else + { +

Thanks for your order

+ } 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) - { -
    - @foreach(string coffeeType in ViewBag.coffeeOptions) - { -
  1. @coffeeType
    2. - } -
- } + @if (ViewBag.coffeeOptions.Count > 1) + { +
    + @foreach(string coffeeType in ViewBag.coffeeOptions) + { +
  1. @coffeeType
    2. + } +
+ } 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: -
    - @foreach(int number in ViewBag.numbers) - { -
  • @number
    • - } -
+
    + @foreach(int number in ViewBag.numbers) + { +
  • @number
    • + } +
.. admonition:: Question diff --git a/src/chapters/razor-views/template-forms.rst b/src/chapters/razor-views/template-forms.rst index 0c6510df..fe24dbdc 100644 --- a/src/chapters/razor-views/template-forms.rst +++ b/src/chapters/razor-views/template-forms.rst @@ -39,7 +39,7 @@ CodingEvents Setup - Text #. 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 +61,14 @@ The method for the form should be of type ``post``. .. sourcecode:: html :linenos: - + -
- - -
+
+ + +
- + 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 +79,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 +118,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. diff --git a/src/chapters/razor-views/template-iteration.rst b/src/chapters/razor-views/template-iteration.rst index 3251d117..e54b228c 100644 --- a/src/chapters/razor-views/template-iteration.rst +++ b/src/chapters/razor-views/template-iteration.rst @@ -9,12 +9,12 @@ hard-coded coffee options in a list. .. sourcecode:: html :linenos: -
    -
  1. French Roast
    2. -
  2. Espresso
    3. -
  3. Kopi Luwak
    4. -
  4. Instant
    5. -
+
    +
  1. French Roast
    2. +
  2. Espresso
    3. +
  3. Kopi Luwak
    4. +
  4. Instant
    5. +
If we want to add, remove, or edit the list items, we need to go in and change the individual tags, which is a poor use of our time. Fortunately, there is a @@ -37,12 +37,12 @@ collection. .. sourcecode:: guess :linenos: -
    - @foreach (type collectionItem in ViewBag.collectionProperty) - { -
  1. @collectionItem
    2. - } -
+
    + @foreach (type collectionItem in ViewBag.collectionProperty) + { +
  1. @collectionItem
    2. + } +
#. The ``@foreach`` loop is initiated inside of a list element (either ``
    `` or ``
      ``). #. ``ViewBag.collectionProperty`` represents any collection that has been assigned as a property on ``ViewBag``. @@ -59,12 +59,12 @@ the coffee names as strings in a ``List`` called ``ViewBag.coffeeOptions``. .. sourcecode:: guess :linenos: -
        - @foreach (string coffeeType in ViewBag.coffeeOptions) - { -
      1. @coffeeType
        2. - } -
      +
        + @foreach (string coffeeType in ViewBag.coffeeOptions) + { +
      1. @coffeeType
        2. + } +
      Some points to note: @@ -89,15 +89,15 @@ Some points to note: .. sourcecode:: guess :linenos: -
      -

      Coffee Types

      - @foreach (string coffeeType in ViewBag.coffeeTypes) - { -
        -
      1. @coffeeType
        2. -
      - } -
      +
      +

      Coffee Types

      + @foreach (string coffeeType in ViewBag.coffeeTypes) + { +
        +
      1. @coffeeType
        2. +
      + } +
      The final HTML produced is one heading, 4 ordered lists, and 4 coffee names. When this view is rendered, each coffee type is labelled with "1". @@ -105,21 +105,24 @@ Some points to note: .. sourcecode:: html :linenos: -
      -

      Coffee Types

      -
        -
      1. French Roast
        2. -
      -
        -
      1. Espresso
        2. -
      -
        -
      1. Kopi Luwak
        2. -
      -
        -
      1. Instant
        2. -
      -
      +
      +

      Coffee Types

      +
        +
      1. French Roast
        2. +
      + +
        +
      1. Espresso
        2. +
      + +
        +
      1. Kopi Luwak
        2. +
      + +
        +
      1. Instant
        2. +
      +
      .. index:: ! var @@ -139,35 +142,35 @@ Sample Razor template: .. sourcecode:: html :linenos: - @foreach (var coffeeShop in ViewBag.coffeeShops) - { - @*Each shop name*@ -

      @coffeeShop.Name

      -
        - @foreach(string coffeeType in coffeeShop.CoffeeOptions) - { - @*Each coffee type available*@ -
      • @coffeeType
        • - } -
      - } + @foreach (var coffeeShop in ViewBag.coffeeShops) + { + @*Each shop name*@ +

      @coffeeShop.Name

      +
        + @foreach(string coffeeType in coffeeShop.CoffeeOptions) + { + @*Each coffee type available*@ +
      • @coffeeType
        • + } +
      + } Sample HTML output: .. sourcecode:: html :linenos: -

      Central Perk

      -
        -
      • Espresso
        • -
      • Instant
        • -
      +

      Central Perk

      +
        +
      • Espresso
        • +
      • Instant
        • +
      -

      Brews Brothers

      -
        -
      • French Roast
        • -
      • Kopi Luwak
        • -
      +

      Brews Brothers

      +
        +
      • French Roast
        • +
      • Kopi Luwak
        • +
      Apart from the nested loops displayed above, here are some other items you may find useful @@ -217,15 +220,15 @@ Check Your Understanding .. sourcecode:: guess :linenos: -
      -

      Coffee Types

      -
        - @foreach (string coffeeType in ViewBag.coffeeTypes) - { -
      1. @coffeeType
        2. - } -
      -
      +
      +

      Coffee Types

      +
        + @foreach (string coffeeType in ViewBag.coffeeTypes) + { +
      1. @coffeeType
        2. + } +
      +
      #. One heading, 4 ordered lists, and 4 coffee names (each name labeled as “1”)? #. One heading, one ordered list, and 4 coffee names (with the names labeled "1", "2", "3"…)? @@ -241,15 +244,15 @@ Check Your Understanding .. sourcecode:: guess :linenos: - @foreach (string coffeeType in ViewBag.coffeeTypes) - { -
      -

      Coffee Types

      -
        -
      1. @coffeeType
        2. -
      -
      - } + @foreach (string coffeeType in ViewBag.coffeeTypes) + { +
      +

      Coffee Types

      +
        +
      1. @coffeeType
        2. +
      +
      + } #. One heading, 4 ordered lists, and 4 coffee names (each name labeled as “1”)? #. One heading, one ordered list, and 4 coffee names (with the names labeled "1", "2", "3"…)? diff --git a/src/chapters/razor-views/using-templates.rst b/src/chapters/razor-views/using-templates.rst index 91c52725..5bd6204c 100644 --- a/src/chapters/razor-views/using-templates.rst +++ b/src/chapters/razor-views/using-templates.rst @@ -16,13 +16,13 @@ These methods have a structure similar to: .. sourcecode:: c# :linenos: - public IActionResult ActionMethod() - { - // method code here + public IActionResult ActionMethod() + { + // method code here - ViewBag.property = Data; - return View(); - } + ViewBag.property = Data; + return View(); + } **ViewBag** is an object that passes data into a template. ``Data`` can be a variable of any type, a number, a collection of some sort, or an object. diff --git a/src/chapters/razor-views/why-templates.rst b/src/chapters/razor-views/why-templates.rst index 6d02307c..6a6e8583 100644 --- a/src/chapters/razor-views/why-templates.rst +++ b/src/chapters/razor-views/why-templates.rst @@ -46,23 +46,23 @@ and each ``
    • `` element, in addition to a couple of fun links. The CSS file .. sourcecode:: html :linenos: - -

      Java Types

      -
      -
        -
      1. French Roast
        2. -
      2. Espresso
        3. -
      3. Kopi Luwak
        4. -
      4. Instant
        5. -
      -
      -
      -
      -

      Links

      - LaunchCode
      - Coffee -
      - + +

      Java Types

      +
      +
        +
      1. French Roast
        2. +
      2. Espresso
        3. +
      3. Kopi Luwak
        4. +
      4. Instant
        5. +
      +
      +
      +
      +

      Links

      + LaunchCode
      + Coffee +
      + We could drastically improve the appearance and content of the page by playing @@ -81,19 +81,19 @@ hard-coding, since data can change based on a user's actions. .. sourcecode:: bash :linenos: - -

      {templateInstructions}

      -
      -
        -
      • -
      -
      -
      -
      -

      Links

      - -
      - + +

      {templateInstructions}

      +
      +
        +
      • +
      +
      +
      +
      +

      Links

      + +
      + This HTML looks similar to the previous example, but it replaces some of the From 8931c5a6a299721deca5671f7bb918d33d8c1b96 Mon Sep 17 00:00:00 2001 From: Courtney Frey Date: Fri, 14 Oct 2022 14:39:48 -0500 Subject: [PATCH 2/4] versioning note added --- src/chapters/razor-views/template-forms.rst | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/chapters/razor-views/template-forms.rst b/src/chapters/razor-views/template-forms.rst index fe24dbdc..1fb4ebd1 100644 --- 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 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. From 66edd6911f26209526ab946aa53e7e1cea570e07 Mon Sep 17 00:00:00 2001 From: Courtney Frey <66076696+speudusa@users.noreply.github.com> Date: Wed, 19 Oct 2022 09:16:11 -0500 Subject: [PATCH 3/4] Update src/chapters/razor-views/template-forms.rst Co-authored-by: Sally Steuterman --- src/chapters/razor-views/template-forms.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chapters/razor-views/template-forms.rst b/src/chapters/razor-views/template-forms.rst index 1fb4ebd1..46a2d5da 100644 --- a/src/chapters/razor-views/template-forms.rst +++ b/src/chapters/razor-views/template-forms.rst @@ -3,7 +3,7 @@ Razor Forms .. admonition:: Warning - Many changes have happened in the world of Visual Studio and ASP.NET since the writing of this book. + 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. From 73c15e7c00e486a96496bd9f9e45766f6a3c3331 Mon Sep 17 00:00:00 2001 From: Courtney Frey <66076696+speudusa@users.noreply.github.com> Date: Wed, 19 Oct 2022 09:16:33 -0500 Subject: [PATCH 4/4] Update src/chapters/razor-views/template-forms.rst Co-authored-by: Sally Steuterman --- src/chapters/razor-views/template-forms.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chapters/razor-views/template-forms.rst b/src/chapters/razor-views/template-forms.rst index 46a2d5da..15a2c3ec 100644 --- a/src/chapters/razor-views/template-forms.rst +++ b/src/chapters/razor-views/template-forms.rst @@ -46,7 +46,7 @@ CodingEvents Setup - Text #. 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. Make sure your template can handle an empty List. +#. 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 --------------------------------