Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Displaying a List with Razor

4:16 with James Churchill

In the previous video we resolved the issue with the description in our view, but the array of artists is still not rendering properly. Let’s see how to use Razor to display a list of values.

Follow Along

To follow along commiting your changes to this course, you'll need to fork the aspnet-comic-book-gallery repo. Then you can clone, commit, and push your changes to your fork like this: 

git clone <your-fork>
cd aspnet-comic-book-gallery
git checkout tags/v3.3 -b displaying-a-list-with-razor

Additional Learning

Here’s an introduction to the Razor syntax on the official ASP.NET website.

Here’s a great blog post from Phil Haack containing a Razor syntax quick reference. Very handy!

Keyboard Shortcuts

  • CTRL+K+C - Comment selection
  • CTRL+K+U - Uncomment selection
  • 0:00

    In the previous video we started updating our view to display information

  • 0:04

    about a comic book.

  • 0:06

    We ran into an issue displaying the comic book's description and artists.

  • 0:11

    We resolved the issue with the description, but

  • 0:13

    the array of artists is still not rendering properly.

  • 0:16

    MVC clearly doesn't understand what to do with the array value.

  • 0:21

    It just calls to string on the array object

  • 0:24

    which returns the value System.String followed by a pair of brackets.

  • 0:29

    Let's switch to Visual Studio.

  • 0:32

    Here's where we are rendering our artist variable value to the detail view.

  • 0:36

    We need to be more explicit with MVC by looping over the array and

  • 0:41

    writing the individual array values to the view.

  • 0:45

    We can do that by typing an @ symbol followed by a foreach loop.

  • 0:52

    Let's use artist for the value variable name and artists for the loop source.

  • 1:01

    Inside of the loop, we can use the text element to let Razor know that we want to

  • 1:05

    switch from writing code back to writing text content.

  • 1:09

    Within the text element, let's render an asterisk followed by the artist value.

  • 1:15

    Let's save the view, switch back to the browser, and refresh the page.

  • 1:19

    Okay, that's looking better.

  • 1:21

    But let's improve the layout by putting the artist values

  • 1:24

    in an HTML unordered list.

  • 1:27

    Razor makes this really easy to do.

  • 1:30

    Just surround the foreach loop with an unordered list element.

  • 1:36

    Then update the inside of the loop to write a line item element containing

  • 1:40

    the artist value.

  • 1:44

    Save the view and refresh the page.

  • 1:46

    That looks much better now.

  • 1:49

    What were to happen if our artists array didn't have any values?

  • 1:53

    Let's switch back to Visual Studio and comment out our array values.

  • 1:58

    We could comment out each line of code one by one.

  • 2:03

    But a more efficient way of commenting out multiple lines of code

  • 2:06

    is to select the lines, hold down the Ctrl key, and

  • 2:10

    press the letter K followed by the letter C.

  • 2:13

    Again, save the view and refresh the page.

  • 2:17

    Well, we didn't get an error, which is good.

  • 2:21

    But having the artists heading visible when there aren't any artists to display

  • 2:25

    is less than desirable.

  • 2:26

    Let's see what we can do about that.

  • 2:29

    The solution is simple.

  • 2:31

    Just like we're able to use Razor to include a foreach loop, we can

  • 2:35

    easily include an if statement around the HTML elements for our artists section.

  • 2:40

    Let's start by adding an if statement just above our artists heading.

  • 2:45

    Then we can select, cut, and

  • 2:50

    paste the artist related code inside of the if statement code block.

  • 2:54

    For our if statement's condition,

  • 2:56

    we can check if the artists array length property is greater than zero.

  • 3:01

    Now this part of the view will only render when the artists array has elements.

  • 3:07

    Let's save the view and refresh the page.

  • 3:10

    Great, now we're not seeing the artists heading.

  • 3:13

    Let's make sure that when we have artists to display,

  • 3:16

    that our if statement works correctly.

  • 3:18

    Let's uncomment the artist values in the array.

  • 3:21

    Select the lines, hold down the Ctrl key, and

  • 3:24

    press the letter K followed by the letter U.

  • 3:28

    Save the view and refresh the page.

  • 3:31

    And here's our artists.

  • 3:33

    Everything is working as expected.

  • 3:36

    Go ahead and close Chrome and stop the website.

  • 3:41

    If you're using GitHub, let's commit our changes.

  • 3:44

    Enter a commit message of,

  • 3:47

    Fixed artists on the Comic Book Detail view,

  • 3:52

    and click the Commit All button.

  • 3:58

    Our view is coming along nicely.

  • 4:01

    I hope you're finding Razor as enjoyable to use as I do.

  • 4:05

    Go ahead and take a short break before watching the next video.

  • 4:08

    When you come back, we'll take a closer look at how we can use our controller

  • 4:13

    to provide the data for our view.

  • 4:15

    See you then.

You need to sign up for Treehouse in order to download course files.

Sign up