09-Step09.md

Step 9 - Updating Browse and Details Views

Oh no! We forgot to update our Browse view that opens when we click on the Genre link. Let's do that now!

1. In the StoreController.cs find the Browse method.
2. Change its return type to ActionResult.
3. Comment out or delete the existing code.
4. Ask Copilot to retrieve all the Genres from the database and to include their Albums.
5. If it doesn't do it for you, select just the matching Genre based on the parameter for the method.
6. Return this selection in a View.

Your resulting code will look something like the below.

var genres = _context.Genres.Include("Albums").Single(g => g.Name == genre);
return View(genres);

Note

Don't forget to make sure to parse the genre parameter to ensure it's safe to use in your code.

We also need to create the Browse View, so right-click in the Browse method and create a new blank View named Browse.cshtml. Use the same approach as in Step 5.

In the new view file use prompts to add these elements:

1. A model reference for a single Genre model.
2. A viewdata title of "Genre".
3. A DIV with CSS class "genre" and an unordered HTML list with CSS class "album-list".

Does Copilot help you out in any way beyond this? Can you just run the application at this point and it works?

Here's what your code might look like.

@model CopilotMvcMusicStore.Models.Genre
@{
    ViewData["Title"] = "Genre";
}
<div class="genre">
	<h3>@Model.Name</h3>
	<ul class="album-list">
		@* loop through each album in the genre and display the album title *@
		@foreach (var album in Model.Albums)
		{
			@* <li>@album.Title</li> *@
			@* provide a link to the Detail view for the Album, using the artwork as the item linked *@
            <li>
				@Html.ActionLink(album.Title, "Details", "Store", new { id = album.AlbumId }, new { @class = "album-link" })
				<img src="@album.AlbumArtUrl" alt="@album.Title" />
            </li>
		}
	</ul>
</div>

If you have a working solution, but no way to navigate to the album, see if you can get Copilot to help you out.

Use a prompt to create a new list item entry that provides a link to the Album which is rendered by the Details view. Here are the key items to tell Copilot:

1. Use the Details view.
2. Use the image / album art as the linked object.

Re-run your application. Does anything happen when you open the Details view? If you receive an error that's expected as we haven't updated the method yet to use our database.

In the StoreController.cs file modify the Details method to load the Album from the database using the id value as the key, and also ensuring your inlude Genre and Artist information.

Your resulting code should look something like this sample.

var album = _context.Albums.Include("Genre").Include("Artist").Single(a => a.AlbumId == id);

I guess we also need to update the CSHTML view that goes along with this so that it displays the Album as well!

Open the Details.cshtml file in the Views folder and update it as follows.

1. Modify the ViewData Title to be "Album - " with the name of Album.
2. The main page title is a <H2> that has the Album Title as well.
3. A paragraph that has the image for the album with the ALT tag being the Album title and the image reference using the AlbumArtUrl property.
4. A single DIV with the CSS class "album-details".
5. Inside the DIV list out the Genre and Artist Name properties, then showing the price formatted as a currency.

Finally, run your solution again and then browse down to an Album and view your handy work!

---

Previous - Wire up database and display data | Next - Add CRUD Operations