Exercise 6: Using Parameters in View

Article
12/22/2011

Exercise 6: Using Parameters in View

In Exercise 3 you learned how to pass parameters to the Controller. In this exercise, you will learn how to use those parameters in the View template. For that purpose, you will be introduced first to Model classes that will help you to manage your data and domain logic. Additionally, you will learn how to create links to pages inside the ASP.NET MVC application without worrying of things like URL paths encoding.

Task 1 – Adding Model Classes

Unlike ViewModels, which are created just to pass information from the Controller to the View, Model classes are built to contain and manage data and domain logic. In this task you will add two model classes to represent these concepts: Genre and Album. In the next Hands-on Lab, these classes will be hooked to a database, mapping each one of them to a table.

If not already open, start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex06-UsingParametersInView\Begin, select MvcMusicStore.sln and click Open. Alternatively, you may continue with the solution that you obtained after completing the previous exercise.
Add a Genre Model class. To do this, right-click the Models folder in the Solution Explorer, select Add and then the Class option. Name the file Genre.[cs|vb] and click Add.

Figure 47
Add Genre Model Class – C#

Figure 48
Add Genre Model Class - VB
Add a Name property to the Genre class. To do this, add the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 Genre – CSharp)
C#
```
using System;
```
FakePre-a1cb91f240924c9bb45e746566a1697d-5b87048528cd4ba7a0d39248e8123f9eFakePre-0692570b075744d59805c4c449c4f1c9-1215e7b6aa174dc698bc75f0d4a476abFakePre-12fa1284dcfc440b90ae0e33348a8f6f-5fb7a5999da6455eb0338452cebf1ce1FakePre-6062dc7eb8dd45a098b3627df6c371ff-bc4e52260db8489ab2f2a1bcdc6088f3FakePre-6ae696d7a9844d96bbfe276a5855a3fd-9693e03301d248f696c61cf3a47473daFakePre-fc074171ebe441c1b0f5a4b2d65247cc-d2a152abe39a47bb9b823f2a82ca768bFakePre-0c690af0ed3b4344a907a5834e72eec9-6888ea2cd3aa4ff8a38dc017449ead4fFakePre-b581ac40c95f4df2b757a2ed59efab68-80955e75222340998e90b13168122fef public string Name { get; set; }FakePre-06ec8aa7b9db4f3ab5857f6cd5e0a0dc-6578f265ec5345468e6ebf4ed76f361dFakePre-2213f4ee8ba647c690731160f36bea59-5cfcc0c31cfe4b78b5b60530f9f31d00
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 Genre – VB)
Visual Basic

Public Class Genre Public Property Name As String End Class
```
FakePre-246191b1f97341c8adcd21536d5cd643-42c8607156ec4a09ae2e7fee6a79f7f9
```
Following the same procedure as before, add an Album class. To do this, right-click the Models folder in the Solution Explorer, select Add and then the Class option. Name the file Album.[cs|vb] and click Add.
Add two properties to the Album class: Genre and Title. To do this, add the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 Album – CSharp)
C#
```
using System;
```
FakePre-d860e1269a1946dfabfdaf8af2cd878f-b979512fd138473d92c1223caf18e0d0FakePre-958037658d9f48569141f4502dec9199-597f92899f9b4477b45c521591ed1a5bFakePre-36241c4285444c32854bff9aa830b541-7396f849e37e466499beaf8aaa92a23eFakePre-ce5828dea8b04b97bf7bdcbb7cdd7270-099db8a26d0d47b38be179d1499d6aeeFakePre-dfe3f6845285486f92c81ec025df2d42-3a3b620dfd6746ab9c4f0d7643bdd167FakePre-5ea0be8985fd47e7b06fcc9e572ed245-58bfdb01d00144c99b9a360276dba966FakePre-b9d156493fab426db79eff55071ab605-7b73f624fd5444bc9404d7abac0e2d6bFakePre-ed81dff866b74fe093380258459df6ee-8549eabefbae4c429737cfadb47c435a public string Title { get; set; } public Genre Genre { get; set; }FakePre-aa974428f05b4f8ab944b0d2608985a2-f1bb820fe0914e66a9879477005bd650FakePre-2504c75aebb348339e49c4f471af5a5d-b715c4bb70964dc48efc302177c39010
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 Album – VB)
Visual Basic

Public Class Album Public Property Title As String Public Property Genre As Genre End Class
```
FakePre-cb5b7e54adca458c9b0de18e80c43e23-74ba8d15e5154ec28fa529459a104d07
```

Task 2 – Adding a StoreBrowseViewModel

A StoreBrowseViewModel will be used in this task to show the Albums that match a selected Genre. In this task, you will create this class and then add two properties to handle the Genre and its Album’s List.

Add a StoreBrowseViewModel class. To do this, right-click the ViewModels folder in the Solution Explorer, choose Add and then Class. Name the file StoreBrowseViewModel.[cs|vb].

Figure 49
Adding StoreBrowseViewModel Class – C#

Figure 50
Adding StoreBrowseViewModel Class - VB
If you are using C#, add a reference to the Models in StoreBrowseViewModel class. To do this, add the following using namespace:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 UsingModel – CSharp)
C#
```
using System;
```
FakePre-3e6e20aabf134933abbab3364818aa0e-fcc299f626b24b3e817db35dccc3a244FakePre-d3cb8251d83f4348b53041919a0c5631-79b64d26fa5a452dada172e3130fa460FakePre-4e0884a914724726a98e22e79c99b165-eb75ba3cabbe45d483f41f5422d35cd5using MvcMusicStore.Models;FakePre-a18630d687c448af8c0d35a9000aeb16-e4b271c62f904448955516999ca609d3FakePre-6a7870d010e9439eaf91b4babe1225fa-7a0cde9745374921a632ce6ad7a9b7d2FakePre-562b8d469fcd4173bc57f162f1826928-aaf6333e2844425b962f1b27c41d4035FakePre-d709601f702d4a5f9387a21e637c8df0-a9085cd95b3b4e0bac5689ed918070c5FakePre-e0ac2a14a65547d086cb5319fc9d248c-c5315b7495b247c687f9101416e99709FakePre-0fc865243ef242d392b8c305e1615984-d822e24508b6493cb08d0161aeba10f3FakePre-5100b91fb70f477084333ec3f96f03f3-b1cd470eabd746bc8d173350ac330547
Add two properties to StoreBrowseViewModel class: Genre and Albums. To do this, add the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 ModelProperties – CSharp)
C#
```
using System;
```
FakePre-dd0046ad03034844bf673189e0a918d2-085063dffbb8458f9140b17416b04cd3FakePre-756256d6e35c4427b518674fba857f48-51121ec06edf4d4c90b271f77035847aFakePre-dca8e1c17105416d8dee2fb0b07a0e14-b92eef0ab7d2486bba807486b8433403FakePre-e256afa47fdf44eabfe86bb748fa8d54-b95080a1250945079ef6428e58cbeccbFakePre-b16ca815b740423f9bea458e759c6100-108d82bffdd549f0a6655bc170c0868cFakePre-9702e7aa3e964e50b9af258f3eba54c2-84c8650ffe7744d7af696ce25a3fbbf8FakePre-c2283ea4291741259135885b47afdfd3-357875ac25e544d8917d2f38f2e30eccFakePre-4253538774cc43f6a9a6a01adb7cf4cd-8684d90b63b9433da9f11b309e7852e0FakePre-2b24d327cb4d46259cefd6f67fac4876-6686eb998ddb43b08aa63fac1bcf4efe public Genre Genre { get; set; } public List<Album> Albums { get; set; }FakePre-f85c38e430bc4c118e2b1e12ff4d27f7-4a94089977f247abb7dfa64e6ff07106FakePre-e1e1f24d6b134c99a2a000ad9ca641f8-04ff20be30e844e199289354cb472f37
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 ModelProperties – VB)
Visual Basic
```
Public Class StoreBrowseViewModel
```
FakePre-fca1c237c85b4fa89718874bde7ba8f1-c063e82148834c91b357681c802cd154 Public Property Genre As Genre Public Property Albums As List(Of Album) FakePre-a2d03cb5a90e4357b61ace3976af8944-7038ee4335994f628ae121cac514e3b8FakePre-94c4e805bd1f4720be1adaa659aaf054-66181ebdfc6d4110a57ede884d3f6f02
Note:

What is List<Album> ?: This definition is using the List<T> type, where T constrains the type to which elements of this List belong to, in this case Album (or any of its descendants).
This ability to design classes and methods that defer the specification of one or more types until the class or method is declared and instantiated by client code is a feature of the C# language called Generics.
List<T> is the generic equivalent of the ArrayList type and is available in the System.Collections.Generic namespace. One of the benefits of using generics is that since the type is specified, you do not need to take care of type checking operations such as casting the elements into Album as you would do with an ArrayList.

Task 3 – Using the New ViewModel in the StoreController

In this task, you will modify the StoreController’s Browse and Details action methods to use the new StoreBrowseViewModel.

If you are using C#, add a reference to the Models folder in StoreController class. To do this, expand the Controllers folder in the Solution Explorer and open the StoreController class. Then add the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 UsingModelInController – CSharp)
C#
```
using System;
```
FakePre-af1028dcb7784f9ab76406ef01de8672-d9a8801dcfb040768f401eedffc1d52fFakePre-ce2c3db839634895bc52b011cf2212a6-8fc83c6a547c4396b5b28bd6e0fb1bc5FakePre-50f345c6ec514e7fba691548ac67f71e-1072290bfb274dd49c8d96fdd0fe4021FakePre-b6b3c0ba231e46429345ae6236a8c446-4e5cd19d9452427e9d4a228d673acaa6FakePre-c2567e5b5b6048bba3ef7f099e4277fc-3db82dd72ed645cca163e29cfe0303e6FakePre-f99335b79682416c9efdd0e8a234756a-1623310b51f64f498901436f832ced87using MvcMusicStore.Models;
Replace the Browse action method to use the StoreViewBrowseController class. You will create a Genre and two new Albums objects with dummy data (in the next Hands-on Lab you will consume real data from a database). To do this, replace the Browse method with the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 BrowseMethod – CSharp)
C#

// // GET: /Store/Browse?genre=Disco public ActionResult Browse(string genre) { var genreModel = new Genre() { Name = genre }; var albums = new List<Album>() { new Album() { Title = genre + " Album 1" }, new Album() { Title = genre + " Album 2" } }; var viewModel = new StoreBrowseViewModel() { Genre = genreModel, Albums = albums }; return View(viewModel); }
```
FakePre-52f83c5efb0c49199c110ff380257016-a6b429dc0d174da9a982b683dda03728FakePre-1cc47ddb4587459b8b79a731aebb162d-acad1f9ed8834a62b46f41152625cac7FakePre-51f9101c22d242498d9e7949eeb88e35-69473fad92b740d98358cc02c782b3d4
```
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 BrowseMethod – VB)
Visual Basic

' 'GET: /Store/Browse?genre=Disco Public Function Browse(ByVal genre As String) As ActionResult Dim genreModel = New Genre With {.Name = genre} Dim albums = New List(Of Album) From {New Album With {.Title = genre & " Album 1"}, New Album With {.Title = genre & " Album 2"}} Dim viewModel = New StoreBrowseViewModel With {.Genre = genreModel, .Albums = albums} Return View(viewModel) End Function
```
FakePre-408b6e5e2cdb4eea89f88aee985e4f4e-243fdb0a7dcd45ee86d7bf06ba21b855FakePre-1cbad0a2edb54c8aab40898f9e83710f-382980bf97c043f592692e7accd4a925FakePre-ac14e5472f1c409589a3fd7521227791-1fa94e3c9fc64b27a0ce56c2a51eea80
```
Replace the Details action method to use the StoreViewBrowseController class. You will create a new Album object to be returned to the View. To do this, replace the Details method with the following code:

(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 DetailsMethod – CSharp)
C#

// // GET: /Store/Details/5 public ActionResult Details(int id) { var album = new Album { Title = "Sample Album" }; return View(album); }
```
FakePre-334b0a147b1741b8a6ffc3681585627e-dffeada57a2f403cbff015834a3df7f2
```
(Code Snippet – ASP.NET MVC 3.0 Fundamentals – Ex6 DetailsMethod – VB)
Visual Basic

' 'GET: /Store/Details/5 Public Function Details(ByVal id As Integer) As ActionResult Dim album = New Album With {.Title = "Sample Album"} Return View(album) End Function
```
FakePre-d043eaa390514fde933c4c0395097e4c-14f34a267f584b0a866b472f43838442
```

Task 4 – Adding a Browse View Template

In this task, you will add a Browse View to show the Albums found for a specific Genre.

Before creating the new View template, you should build the project so that the Add View Dialog knows about the ViewModel class to use. Build the project by selecting the Debug menu item and then Build MvcMusicStore.

Figure 51
Building the project in Visual Web Developer 2010

Figure 52
Building the project in Visual Studio 2010
Add a Browse View. To do this, right-click in the Browse action method of the StoreController and click Add View.
In the Add View dialog box, verify that the View Name is Browse. Check the Create a strongly-typed view checkbox and select StoreBrowseViewModel from the Model class dropdown. Leave the other fields with their default value. Then click Add.

Figure 53
Adding a Browse View – C#

Figure 54
Adding a Browse View - VB
Modify the Browse.aspx to display the Genre’s information, accessing the StoreBrowseViewModel object that is passed to the view template. To do this, replace the Title Content and the Main Content with the following content:
HTML(C#)
```
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreBrowseViewModel>" %>
```
FakePre-cf571376fcda490a99e3e2c3fe9edf8e-ec9f56c6e9214747a4fd13ded0aa408aFakePre-409cac009b0a464c8cf82d16c28e0881-1ad8a6dbc7224990a7b2af9cda88f8b3 Browse Albums <h2>Browsing Genre: <%: Model.Genre.Name %></h2> <ul> <% foreach (var album in Model.Albums) { %> <li><%: album.Title %></li> <% } %> </ul>FakePre-73491e32040a47a3a65342e115f5313e-055abbe1e810494f9125d98e4474cbdbFakePre-2053864c17424f61b77b6b63a91448bd-0d621203791a4e3ea26bbebdb4a69033FakePre-613c1dc7b21c4f85b92aec7950efcbbf-bc4f93e0aebd42868fe3e428510cf709FakePre-44b4ca84fb424c07af92f30be3975627-10f88c84a873479f81bf9bb83c09223e Browse Albums <h2>Browsing Genre: <%: Model.Genre.Name %></h2> <ul> <% foreach (var album in Model.Albums) { %> <li><%: album.Title %></li> <% } %> </ul>FakePre-8b9e6473b8e34e42a6dee9a32d89aa75-825621e73cd14c4b90cae8ac7c106224FakePre-40b0a3207a444b9e9b76b58a15f71e69-d0698628b53d4cbe9485255b43e87022FakePre-edf0bbcc07c64dcfba1d6fd7d1aabbad-b03ddf915d3b4d7e9f110d15f21b1a24FakePre-09bbe073857841d2aaca22652fb9ba39-f9e55d23f789435b96314bf15364999c
HTML(Visual Basic)
```
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcMusicStore.StoreBrowseViewModel)" %>
```
FakePre-bb2eea195e3c4829b81aa6b8739c6647-1b4fe36aef774ac18b871317a3be5579FakePre-54acbe8b3ce84c12a14d5eb06837ac3a-7e9d8507918b4844be7ad3b1df4f7b3f Browse Albums <h2>Browsing Genre: <%: Model.Genre.Name %></h2> <ul> <% For Each album In Model.Albums %> <li><%: album.Title %></li> <% Next album %> </ul>FakePre-66b5e0bf93de4ea7bbf8e21c2e1cd050-dc00c169c3da4582a9be915e0483a137FakePre-64d2bfe5d11b4faf85cf66f665291142-60f8ccc4a3304716a337de0da039e444FakePre-5eb188984f4d401aa61d2aa991924f9e-0728066d19e448e1bfcd6f13f5851344FakePre-40209a4fbf884f19a050a6842db636c9-a1e7331863bc498e9c8d9612df880d55 Browse Albums <h2>Browsing Genre: <%: Model.Genre.Name %></h2> <ul> <% For Each album In Model.Albums %> <li><%: album.Title %></li> <% Next album %> </ul>FakePre-d15b471c88844c38ba39f0d3d52a9b22-22f715e775de488587ab67b31b86e27cFakePre-54001ee423094f5e8e3dc7e7d68881b7-9607ecaad35740d29cc2fa2e04ca02d6FakePre-2f0381055ed14b85ae01b95bd79889c3-831094961c724b529e4cd3feed2ec308FakePre-121dbaede0aa4306912a21cbf495cc04-e06f382f975241d09a62021d059913cf

Task 5 – Running the Application

In this task, you will test that the Browse method retrieves Albums from the Browse method action.

Press F5 to run the Application.
The project starts in the Home page. Change the URL to /Store/Browse?Genre=Disco to verify that the action returns two Albums.

Figure 55
Browsing Store Disco Albums

Task 6 – Displaying information About a Specific Album

In this task, you will implement the Store/Details view to display information about a specific album. In this Hands-on Lab, everything you will display about the album is already contained in the View template. So, instead of creating a StoreDetailsViewModel class you will use the current StoreBrowseViewModel template passing the Album to it.

Close the browser if needed, to return to the Visual Studio window. Add a new Details view for the StoreController’s Details action method. To do this, right-click the Details method in the StoreController class and click Add View.
In the Add View dialog view, verify that the View Name is Details. Check the Create a strongly-typed view checkbox and select Album from the Model class drop-down. Leave the other fields with their default value. Then click Add. This will create and open a \Views\Store\Details.aspx file.

Figure 56
Adding a Details View – C#

Figure 57

Adding a Details View - VB
Modify the Details.aspx file to display the Album’s information, accessing the Album object that is passed to the view template. To do this, replace the Main Content with the following content:

HTML(C#)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.Models.Album>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Details </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Album: <%: Model.Title %></h2> </asp:Content>

HTML(Visual Basic)

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcMusicStore. Album)" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Details </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Album: <%: Model.Title %></h2> </asp:Content>

Task 7 – Running the Application

In this task, you will test that the Details View retrieves Album’s information from the Details action method.

Press F5 to run the Application.
The project starts in the Home page. Change the URL to /Store/Details/5 to verify the album’s information.

Figure 58
Browsing Album’s Detail

Task 8 – Adding Links Between Pages

In this task, you will add a link in the Store View to have a link in every Genre name to the appropriate /Store/Browse URL. This way, when you click on a Genre, for instance Disco, it will navigate to /Store/Browse?genre=Disco URL.

Close the browser if needed, to return to the Visual Studio window. Update the Index page to add a link to the Browse page. To do this, in the Solution Explorer expand the Views folder, then the Store folder and double-click the Index.aspx page.
Add a link to the Browse view indicating the genre selected. To do this, replace the following code in the Index.aspx:
HTML(C#)
```
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreIndexViewModel>" %>
```
FakePre-d2dadc0cebcc45a3b38218d316e727da-858720cbc0d44850a1648a8653f0c997FakePre-b24c798decb44603b1c13446b993ae9d-b936af19dcce445194c59873ee61ccebFakePre-fd6ca946acd347498f4aa7f7e79bbe5f-b585b10f08af46d98a90d141a09351b4FakePre-a141f214d65e46b3bdabc97adacc33f8-b5a4a5ef0ec94f5b8aa2eceb0e79132bFakePre-d1d4aebc0c6c4e75865c5885d69269fb-ea3306397fc04bf1b7852a23299cbb12FakePre-33b00c1c0f6646bbbde87a4dee8762c9-c5539b7f799145a199339c470e437d5bFakePre-3595c9453da449698060265b0d9f6422-69d1d780d21a49878e0f56f6d4e35a0dFakePre-3650006d18e246a4ae3605f0c0705f84-5a82d7da4bd64d39ad471eeee5467f71FakePre-c27c87406788413e995b8c356de00204-40aafa33b4e54295b5ce3756eee848a6FakePre-912b4cdaedab4a6780dc1802afdcbd88-73b7050b802b40d59348f77a06c207d4FakePre-aa923e4d2d84415b8026120884f4d594-23878d68d6a9490cb543d984d3907088FakePre-fb7133bb3a2f4a99abceaa794bcc2225-a48f233522094db68c07735257f96481FakePre-722299cf66f54754aec60aeb93650305-176a2bd3fda44b34a36d3f4ef936b14eFakePre-5c01e3080aff457e936186ddaa588ce2-ebe58d5f748148038b35db5705e84f0bFakePre-9a06fe72412343a5b2e491504cf08c5a-8f31f569882f4d869358be92359c59bc <%: Html.ActionLink(genreName, "Browse", new { genre = genreName }, null) %>FakePre-f391fcbd5cd345dc84ea546ea2f8d384-718a8a6f4e914d9b92575da55eb34074FakePre-141127bfb2a44e0d9798305d9e5b979f-a3263b0d08064bb698d875a3f14d2d9dFakePre-ef65c9fee8c44c699acbf4150d19156b-680c53ac95bb492fb6bd837e38ce4e46FakePre-16234246ee6b41e3ada36669f5112d55-11fce998c64340f2855e137263641aadFakePre-88ddde028cf1450bb837af17573ca3f5-d70696a432924afbbe0ae6d0286bad8d
HTML(Visual Basic)
```
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcMusicStore. StoreIndexViewModel)" %>
```
FakePre-363063fd82fd4b1181faffca330e590d-1d3887f0e870462ba9ca49811a175df3FakePre-9e0a1b337dd345d798fd6a7b131e3a2c-01de19d443484f869e08753dc92de72eFakePre-0e4254ae8432437cb8b40f8e70332a12-919237c3d21244f8a9503e2e4694732fFakePre-a1314efb310b4c248159157927132fc3-302adc09a89c45ea8c18df8205f075b5FakePre-be2e1ada34f44369a0d991f460fa840d-f309c6c24d2947bb8a018d7e8e883282FakePre-a2025782a059432fb98f6c15ecccafd1-adb402d498a74227a62140d646c09f3eFakePre-3850fe8c92a1466289b70c0cf13ac3d6-6db96254a11643bc825e9dd2295b735bFakePre-a184c9e41373411dbabd85258d5d7a4c-940805fe1c5344a488449b80f25062daFakePre-4cb15fa2d9c34fe8821ba9b460e8c07b-3f3e7b07f20145c5bde137bafcfadd6dFakePre-691ec5e4007b41fd82bdc80a01530461-49d7593c89a741d5895779db03de853cFakePre-476cbe401a4c40fd838e5ad550f02bc7-c0c38a0bb16940248d427f4a6e002290FakePre-f805b562d6aa4cf6b3d6a5f675d52bf1-f832b83d16e54fa4a7755c0461d44ae0FakePre-6c2d5b917b444899af008fe1d9a11af6-d3fb2d683af04c04bb2e87cccdd80395FakePre-87ec15d229e84393a43e3b3c679bb6c7-478de41704894ddba4817e524c1c23eaFakePre-1e0a8cf497d04af68e67ef29f9f823ab-989a3d17398d4e0fadbb4259d39247dc <%: Html.ActionLink(genreName, "Browse", new With {Key .genre = genreName }, Nothing) %>FakePre-b19032d6748247e5a05f3739f80721ae-3851774fc7ad4eaf8eff1a5b79d52448FakePre-97e1ef2e2b984815bf89660460e590c0-4a98d8db8ff647ffab8fce86ade33dccFakePre-6df9c3d06983446e93ecad13b2e3bc90-8bc1a1802e414514bba90fedc7fc4832FakePre-1cba1b8fefe04f9ba60413c14465adb8-3a1a162fc9464798b188a8b96bc0ae2aFakePre-822cf5184ccb440391ebcf0709ff0d26-8dfad050601944238b67816806012429
Note:

Note: another approach would be linking directly to the page, with a code like the following:
<a href="/Store/Browse?genre=<%: genreName %>"><%: genreName %></a>
Although this approach works, it depends on a hardcoded string. If you later rename the Controller, you will have to change this instruction manually. A better alternative is to use an HTML Helper method. ASP.NET MVC includes an HTML Helper method which is available for such tasks. The Html.ActionLink() helper method makes it easy to build HTML <a> links, making sure URL paths are properly URL encoded.
Htlm.ActionLink has several overloads. In this exercise you will use one that takes three parameters:
1. Link text, which will display the Genre name
2. Controller action name (Browse)
3. Route parameter values, specifying both the name (Genre) and the value (Genre name)

Task 9 – Running the Application

In this task, you will test that each Genre is displayed with a link to the appropriate /Store/Browse URL.

Press F5 to run the Application.
The project starts in the Home page. Change the URL to /Store to verify that each Genre links to the appropriate /Store/Browse URL.

Figure 59
Browsing Genres with links to Browse page

Task 10 – Using Dynamic ViewModel Collection to Pass Values

In this task, you will learn a simple and powerfull method to pass values between the Controller and the View without making any changes in the Model. MVC 3 provides the collection “ViewModel” than can be assigned to any dynamic value and accessed inside controllers and views as well.

You will now use ViewBag dynamic collection to pass from the controller to the view a list of “Starred genres”. The Store Index view will access to ViewModel and display the information.

Close the browser if needed, to return to the Visual Studio window. Open StoreController.[cs|vb] and modify Index method to create a list of starred genres into ViewModel collection :
C#
```
public ActionResult Index()
```
FakePre-9ad37d7494f34ca3940856e5b918917c-bb7f340e58f844068d1a25bdaee484ceFakePre-13b2da39f01b4c11bdb0c48d741689c0-c7965fe545b24feea09b4306f068d479FakePre-2cf7bf9a0e1a44e38d2f8730cb61a329-41b04368f46a4b95b5d04afeb0abd10aFakePre-dd40021710e74149b38904fa074f7bd2-244094e62d744fd8906cfb57bdf4cc58FakePre-81b3681e958e49ef87762fb6e15831bc-1afe3e333ff94f9bb051da301ec28e74FakePre-ee27889d4a5743ed9d53c1f03c0b2723-666e57fedb0f4ee5827431bfc2b1e45dFakePre-6380937181014b379993c962c5f32ee3-f7c631a8146b474e8a087f29554bd69aFakePre-8341841fc25e463c8536a06cc0554b53-c4db591a20ed42ee91ea5106d1edc0a1FakePre-2d947dfcdba74beeb2ffd58e1df3699f-cdd27de4c1c84d9cb4c16b3a09181a8aFakePre-f7a8dff159714f988ea1fb13702ee522-cf4d48938b11434aa8eb650d71e5520bFakePre-f7be1fc4f41d4040a43065e6d36c609a-e4ef9e897f1847f0bac95a16f23c9112 ViewBag.Starred = new List<string> { "Rock", "Jazz" };FakePre-07c5238e0bd54b8db6b218b561f71874-c778aea6f78746a69b519b0863b52099FakePre-3d8b6e41a3724a14b4a4e0350b6412c3-ebafa10939254473a9c50401571cf556FakePre-504b12f1624f4255a1e55f9dc9df6073-ddfe7a1fb28a497d9da4ac5401a15f8f
Visual Basic
```
Public Function Index() As ActionResult
```
FakePre-bbba506e7b9247a0a8795c0dbc9d4add-20953a14bc1c40408427946b37ab9f53FakePre-26f26143d1324d958c368a97a6e9fcbc-696df352633341e48946925ebab8e43cFakePre-3e2c98c496e949ada4992a9484f5437f-ddac62847f834c5ab2355dbeae54e7c2FakePre-81c7375cb5b14996a808badd1dcb8264-67b2c6db05a0480689b1ca4cc91d121aFakePre-1c73ee1c412c4aa29532479e5b37bbde-189f559db2c64403bec063664bbfa902FakePre-d31fe41020434db792e091b8d2c135ad-a497fa47ccf747a789e1535f3502803cFakePre-d1d5821220a04b559120deee2b09f2cb-101fc6aeb0354ca89ac72bdeb14f3b79FakePre-a9a4805bd1674b4e8214520d1d2826e1-d460c3bd51324766b2f77b4324a05148 ViewBag.Starred = New List(Of String) From {"Rock", "Jazz"}FakePre-5c29646d1e7e4fee922176af2c87cc61-b1706b963c9a4b7697b3b6c4071ba773FakePre-aeb673b5e1ec4eb8acf628b4ab687212-ab326f04085a4d8c94595480b93812b2FakePre-e5dc3bf7e3ca459785a05299fa01f1f1-1c7aaa21adaf4221a2edb47f76cf228a
Note:

You could also use the syntax ViewBag[“Starred”] to access the properties.
The star icon “starred.png” is included in the Source\Assets\Images folder of this lab. In order to add them to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Web Developer Express, as shown below:

Figure 60
Adding star image to the solution
Open the view Store/Index.aspx and modify the content. You will read the “starred” property in the ViewBag collection, and ask if the current genre name is in the list. In that case you will show a star icon right to the genre link.
HTML(C#)
```
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreIndexViewModel>" %>
```
FakePre-86fd9d72aeb8452ba0d42641da35215e-7308e267d4a2413eb517d8f2c9befa58FakePre-7050b697a3104aa1bb18c09879c05e1d-0068a75dc230464699db552f5c787801FakePre-c185195668df4f25a2310020d769eabb-b7f59190647a40c1a146e8302dc99c9cFakePre-511c2d43c02f4569a09b52c2114ccca8-48c1d600fa704768bc892768bbe51f3bFakePre-19e2d4cc025148d2bf74af769c2481da-84a46fe8bbe8465f9ebe8eafd3964e49FakePre-22fb6a83dc3c4235b4d2629cac317c7e-d886e6734f2541dc8be85f4111d66013FakePre-abd306f71e1a4d26804e26ac65b42006-f34de0edb35b45ff9d16e84c3f611dd2FakePre-6e3b43705a1e4635993945e7d8cfff71-176ceb2bfe9240c288b17591c459e7bbFakePre-4e5363a3e954425989de2b014996f68c-943691ba972544b9a154e81829781f40FakePre-9495243b343e43fbb11205274f47b1af-89e0a90a7bf5421d88f23efd60c782adFakePre-1fa2ebd28043422d818d67caae55d4af-627630dbfa064609afba1a2bc3622b78FakePre-e4091ce756674a27893ac93be78473d9-ef17043711d54dee862095ae6835374fFakePre-ca5db1ec816e4cd0b0bc4674e32a2164-59edf97408e64eb0856060e05d8f19f8FakePre-683e73a0c4494cdb9585c7f81f48bde0-e5fe017993bb4712b7d422caefbad883FakePre-eaca279c660447aab04fae61de665890-9071934bbcb042aebc3482973b13ce19FakePre-1549a4578e3b48f7b73612ebc058413c-49be75d610134f818fdfa061734e8de0FakePre-24139c951c1b4dc6a67c5df240c77a20-e1bddb4911f94a35aac0fdb727df60cc <% if (ViewBag.Starred.Contains(genreName)) { %> <img src="../../Content/Images/starred.png" alt="Starred element" /> <% } %> <br/> <h5> <img src="../../Content/Images/starred.png" alt="Starred element" /> Starred genres 20% Off! </h5>FakePre-394d7ebc6e254dd8a4c29f4b59b5f280-5f957ea14bef49819652afbe106dbfdcFakePre-3efcf03755154f96b2e68fc7affb064c-b9da8814752a48fd8167e09d61691ce8FakePre-1cb88293a1a445669d1c8b15f9143ab4-265929b1c27849ed9a037aec816771d7 <% if (ViewBag.Starred.Contains(genreName)) { %> <img src="../../Content/Images/starred.png" alt="Starred element" /> <% } %> <br/> <h5> <img src="../../Content/Images/starred.png" alt="Starred element" /> Starred genres 20% Off! </h5>FakePre-57f8875947894627bfc727fb9c35d3dc-b78ed776f501460993ec4f863c155b67FakePre-a20ede9e5faf482aa49eecd4e5a41820-497004a63a6444b3ba6978e6f8240f64
HTML(Visual Basic)
```
<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcMusicStore. StoreIndexViewModel)" %>
```
FakePre-d28194014e2d4815b1b44a04544356d2-47665b25f1f742b590a29a6d535e42e8FakePre-fa529cca4f2846efb96f286b5d4c2dfd-35f20d76661a40da9c146f2285a2839fFakePre-ec85c853ad144785be1788fa2b7845bd-22586fb32a2f46d3b90457709a6bd602FakePre-6cdbe3d981dc41ce84c1266fbd7796e1-58fcd785bd8b4fcf8c81544d0e3e5e91FakePre-8cb21691983a4599b840fd7667f967fa-82ed1ec475c049f3b5345317d3ec7efbFakePre-04e996f42a1a4347b2f7705b5f512982-8185148864e943f2975ac4c32c15f75fFakePre-251a0e6023a44b6888f1b1f7dc2ec526-f6ae72595b754b5cb06cd80126721d68FakePre-cbeac652e6e7483788b8aaaebcfea3dd-705e5d5b68634168812e5d19faaa5a70FakePre-58c8e520c4644dfb8be4643ad074cc57-38ac6cd9bf5c4e46924e7c764b170da8FakePre-a9c60daafe7d450187d6d816eea26d27-4afe3eb30d304e0faf936bbafad4b6d2FakePre-711402b19fe642e49b678e6d08718227-23850dfdcd0c422094406944adaf73efFakePre-01d25975f4c04d6ba6c28fc420a7b86f-0bcd1025d7824a3cadd862f71562a823FakePre-9346d34b87924193af785671af6e0511-6f16f53c43294c5dbf075b794b448c71FakePre-a97dbc2f33f046639bd991d9fbb6a9b7-1b8f424ca6694544a556012b4b2541b2FakePre-2fd2b195e6a84d17aa543a95e86d5a36-19a54b412e1140ae947380c944b4be10FakePre-310286eee1d84608bb376280a5f5bc24-4c53c2612aa24fadab021581fd644ea8FakePre-957711584ae74ce6b1a2705cc4dd6044-1a6caf679b414133a57996ddd05c0d68 <% If ViewBag.Starred.Contains(genreName) Then%> <img src="../../Content/Images/starred.png" alt="Starred element" /> <% End If %> <br/> <h5> <img src="../../Content/Images/starred.png" alt="Starred element" /> Starred genres 20% Off! </h5>FakePre-1a7ad6db74704c6bb8353f8adfcb0330-7ca785ee68604d19b502ae5519578a25FakePre-e3ada62cdedf486a9966950786ed2e56-75be63f363f84f7b921c2daf5336c780FakePre-e77a8357e45345eabb3e381d8e67fb19-c3df58e24c904760b36aa777a6ee58f1 <% If ViewBag.Starred.Contains(genreName) Then%> <img src="../../Content/Images/starred.png" alt="Starred element" /> <% End If %> <br/> <h5> <img src="../../Content/Images/starred.png" alt="Starred element" /> Starred genres 20% Off! </h5>FakePre-fd5e8274990f48e2993b487f06bd0d5a-d7aa08895ce24a4b84ff6fab36419eefFakePre-aa86c8a3d35544d690675ca06dec74b9-08823e2b4371410783694f783dfdfde5

Task 11 – Running the Application

In this task, you will test that the starred genres display a star icon.

Press F5 to run the Application.
The project starts in the Home page. Change the URL to /Store to verify that each featured genre has the respecting label:

Figure 61
Browsing Genres with starred elements

Next Step

Summary

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files