Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
In the previous video we started
updating our view to display information
0:00
about a comic book.
0:04
We ran into an issue displaying the comic
book's description and artists.
0:06
We resolved the issue
with the description, but
0:11
the array of artists is still
not rendering properly.
0:13
MVC clearly doesn't understand
what to do with the array value.
0:16
It just calls to string
on the array object
0:21
which returns the value System.String
followed by a pair of brackets.
0:24
Let's switch to Visual Studio.
0:29
Here's where we are rendering our artist
variable value to the detail view.
0:32
We need to be more explicit with
MVC by looping over the array and
0:36
writing the individual
array values to the view.
0:41
We can do that by typing an @
symbol followed by a foreach loop.
0:45
Let's use artist for the value variable
name and artists for the loop source.
0:52
Inside of the loop, we can use the text
element to let Razor know that we want to
1:01
switch from writing code back
to writing text content.
1:05
Within the text element, let's render
an asterisk followed by the artist value.
1:09
Let's save the view, switch back to
the browser, and refresh the page.
1:15
Okay, that's looking better.
1:19
But let's improve the layout
by putting the artist values
1:21
in an HTML unordered list.
1:24
Razor makes this really easy to do.
1:27
Just surround the foreach loop
with an unordered list element.
1:30
Then update the inside of the loop to
write a line item element containing
1:36
the artist value.
1:40
Save the view and refresh the page.
1:44
That looks much better now.
1:46
What were to happen if our artists
array didn't have any values?
1:49
Let's switch back to Visual Studio and
comment out our array values.
1:53
We could comment out each
line of code one by one.
1:58
But a more efficient way of
commenting out multiple lines of code
2:03
is to select the lines,
hold down the Ctrl key, and
2:06
press the letter K
followed by the letter C.
2:10
Again, save the view and refresh the page.
2:13
Well, we didn't get an error,
which is good.
2:17
But having the artists heading visible
when there aren't any artists to display
2:21
is less than desirable.
2:25
Let's see what we can do about that.
2:26
The solution is simple.
2:29
Just like we're able to use Razor
to include a foreach loop, we can
2:31
easily include an if statement around
the HTML elements for our artists section.
2:35
Let's start by adding an if statement
just above our artists heading.
2:40
Then we can select, cut, and
2:45
paste the artist related code inside
of the if statement code block.
2:50
For our if statement's condition,
2:54
we can check if the artists array
length property is greater than zero.
2:56
Now this part of the view will only render
when the artists array has elements.
3:01
Let's save the view and refresh the page.
3:07
Great, now we're not seeing
the artists heading.
3:10
Let's make sure that when
we have artists to display,
3:13
that our if statement works correctly.
3:16
Let's uncomment the artist
values in the array.
3:18
Select the lines,
hold down the Ctrl key, and
3:21
press the letter K
followed by the letter U.
3:24
Save the view and refresh the page.
3:28
And here's our artists.
3:31
Everything is working as expected.
3:33
Go ahead and close Chrome and
stop the website.
3:36
If you're using GitHub,
let's commit our changes.
3:41
Enter a commit message of,
3:44
Fixed artists on
the Comic Book Detail view,
3:47
and click the Commit All button.
3:52
Our view is coming along nicely.
3:58
I hope you're finding Razor
as enjoyable to use as I do.
4:01
Go ahead and take a short break
before watching the next video.
4:05
When you come back, we'll take a closer
look at how we can use our controller
4:08
to provide the data for our view.
4:13
See you then.
4:15
You need to sign up for Treehouse in order to download course files.
Sign up