Displaying a List with Razor

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