1
00:00:00,390 --> 00:00:04,710
In the previous video we started
updating our view to display information

2
00:00:04,710 --> 00:00:06,040
about a comic book.

3
00:00:06,040 --> 00:00:11,010
We ran into an issue displaying the comic
book's description and artists.

4
00:00:11,010 --> 00:00:13,250
We resolved the issue
with the description, but

5
00:00:13,250 --> 00:00:16,125
the array of artists is still
not rendering properly.

6
00:00:16,125 --> 00:00:21,580
MVC clearly doesn't understand
what to do with the array value.

7
00:00:21,580 --> 00:00:24,360
It just calls to string
on the array object

8
00:00:24,360 --> 00:00:29,760
which returns the value System.String
followed by a pair of brackets.

9
00:00:29,760 --> 00:00:31,150
Let's switch to Visual Studio.

10
00:00:32,310 --> 00:00:36,970
Here's where we are rendering our artist
variable value to the detail view.

11
00:00:36,970 --> 00:00:41,670
We need to be more explicit with
MVC by looping over the array and

12
00:00:41,670 --> 00:00:45,170
writing the individual
array values to the view.

13
00:00:45,170 --> 00:00:49,182
We can do that by typing an @
symbol followed by a foreach loop.

14
00:00:52,420 --> 00:00:59,520
Let's use artist for the value variable
name and artists for the loop source.

15
00:01:01,000 --> 00:01:05,500
Inside of the loop, we can use the text
element to let Razor know that we want to

16
00:01:05,500 --> 00:01:09,220
switch from writing code back
to writing text content.

17
00:01:09,220 --> 00:01:14,010
Within the text element, let's render
an asterisk followed by the artist value.

18
00:01:15,020 --> 00:01:19,610
Let's save the view, switch back to
the browser, and refresh the page.

19
00:01:19,610 --> 00:01:21,720
Okay, that's looking better.

20
00:01:21,720 --> 00:01:24,830
But let's improve the layout
by putting the artist values

21
00:01:24,830 --> 00:01:26,440
in an HTML unordered list.

22
00:01:27,820 --> 00:01:30,850
Razor makes this really easy to do.

23
00:01:30,850 --> 00:01:34,167
Just surround the foreach loop
with an unordered list element.

24
00:01:36,707 --> 00:01:40,892
Then update the inside of the loop to
write a line item element containing

25
00:01:40,892 --> 00:01:42,000
the artist value.

26
00:01:44,080 --> 00:01:46,710
Save the view and refresh the page.

27
00:01:46,710 --> 00:01:49,090
That looks much better now.

28
00:01:49,090 --> 00:01:53,455
What were to happen if our artists
array didn't have any values?

29
00:01:53,455 --> 00:01:57,820
Let's switch back to Visual Studio and
comment out our array values.

30
00:01:58,850 --> 00:02:03,170
We could comment out each
line of code one by one.

31
00:02:03,170 --> 00:02:06,620
But a more efficient way of
commenting out multiple lines of code

32
00:02:06,620 --> 00:02:10,530
is to select the lines,
hold down the Ctrl key, and

33
00:02:10,530 --> 00:02:13,740
press the letter K
followed by the letter C.

34
00:02:13,740 --> 00:02:16,810
Again, save the view and refresh the page.

35
00:02:17,980 --> 00:02:21,180
Well, we didn't get an error,
which is good.

36
00:02:21,180 --> 00:02:25,210
But having the artists heading visible
when there aren't any artists to display

37
00:02:25,210 --> 00:02:26,980
is less than desirable.

38
00:02:26,980 --> 00:02:29,040
Let's see what we can do about that.

39
00:02:29,040 --> 00:02:31,060
The solution is simple.

40
00:02:31,060 --> 00:02:35,010
Just like we're able to use Razor
to include a foreach loop, we can

41
00:02:35,010 --> 00:02:40,530
easily include an if statement around
the HTML elements for our artists section.

42
00:02:40,530 --> 00:02:43,660
Let's start by adding an if statement
just above our artists heading.

43
00:02:45,150 --> 00:02:50,070
Then we can select, cut, and

44
00:02:50,070 --> 00:02:54,420
paste the artist related code inside
of the if statement code block.

45
00:02:54,420 --> 00:02:56,150
For our if statement's condition,

46
00:02:56,150 --> 00:03:01,930
we can check if the artists array
length property is greater than zero.

47
00:03:01,930 --> 00:03:07,160
Now this part of the view will only render
when the artists array has elements.

48
00:03:07,160 --> 00:03:10,640
Let's save the view and refresh the page.

49
00:03:10,640 --> 00:03:13,650
Great, now we're not seeing
the artists heading.

50
00:03:13,650 --> 00:03:16,050
Let's make sure that when
we have artists to display,

51
00:03:16,050 --> 00:03:17,650
that our if statement works correctly.

52
00:03:18,710 --> 00:03:21,910
Let's uncomment the artist
values in the array.

53
00:03:21,910 --> 00:03:24,990
Select the lines,
hold down the Ctrl key, and

54
00:03:24,990 --> 00:03:27,310
press the letter K
followed by the letter U.

55
00:03:28,330 --> 00:03:30,640
Save the view and refresh the page.

56
00:03:31,740 --> 00:03:33,410
And here's our artists.

57
00:03:33,410 --> 00:03:36,250
Everything is working as expected.

58
00:03:36,250 --> 00:03:39,890
Go ahead and close Chrome and
stop the website.

59
00:03:41,150 --> 00:03:43,620
If you're using GitHub,
let's commit our changes.

60
00:03:44,650 --> 00:03:47,784
Enter a commit message of,

61
00:03:47,784 --> 00:03:52,963
Fixed artists on
the Comic Book Detail view,

62
00:03:52,963 --> 00:03:56,790
and click the Commit All button.

63
00:03:58,860 --> 00:04:01,490
Our view is coming along nicely.

64
00:04:01,490 --> 00:04:05,420
I hope you're finding Razor
as enjoyable to use as I do.

65
00:04:05,420 --> 00:04:08,670
Go ahead and take a short break
before watching the next video.

66
00:04:08,670 --> 00:04:13,010
When you come back, we'll take a closer
look at how we can use our controller

67
00:04:13,010 --> 00:04:15,100
to provide the data for our view.

68
00:04:15,100 --> 00:04:15,610
See you then.