Exercise 1: Creating the Store Manager controller and its Index view

In this exercise, you will learn how to create a new controller to support CRUD operations, customize its Index action method to return a list of albums from the database and finally generating an Index View template taking advantage of ASP.NET MVC’s scaffolding feature to display the albums’ properties in an HTML table.

Task 1 – Creating the StoreManagerController

In this task, you will create a new controller called StoreManagerController to support CRUD operations.

1. Start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
2. In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex01-CreatingTheStoreManagerController\Begin, select MvcMusicStore.sln and click Open.

3. Add the new controller. To do this, right-click the Controllers folder within the Solution Explorer, select Add and then the Controller command. Change the ControllerName to StoreManagerController and make sure that the checkbox Add action methods for Create, Update, Delete, and Details scenarios is checked. Click Add.

   Figure 1

   Add Controller Dialog

4. A new Controller class is generated. Since you indicated to add action methods for Create, Update, Delete, and Details scenarios, stub methods for those, common CRUD actions are created with TODO comments filled in, prompting to include the application specific logic.
5. Since you don’t need the Details Controller action, delete that method.

Task 2 – Customizing the StoreManager Index

In this task, you will customize the StoreManager Index action method to return a View with the list of albums from the database.

1. If you are using C#, add a using directive to MvcMusicStore.Models:

   (Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex1 using MvcMusicStore – CSharp)

   C#

   using System.Web.Mvc;

   using MvcMusicStore.Models;

2. Add a field to the StoreManagerController to hold an instance of MusicStoreEntities.

   (Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex1 MusicStoreEntities – CSharp)

   C#

   public class StoreManagerController : Controller

   FakePre-26f9640a64f04246b9cfb832a5bb217e-1540bc80224f45dda1fadb8fcab3045a MusicStoreEntities storeDB = new MusicStoreEntities();

   (Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex1 MusicStoreEntities – VB)

   Visual Basic

   Public Class StoreManagerController

   FakePre-30d75e3d7d6b4b1290883ea74a28f31b-bb27c2c6b5d64eda8870d7e9c4084570FakePre-5226c163f6c146fc879445b0f7cb7694-c1c4195cb3344382a25aa1c2502a89e3 Dim storeDB As New MusicStoreEntities

3. Implement the StoreManagerControllerIndex action to return a View with the list of albums. The Controller action logic will be very similar to the StoreController’s Index action written earlier. Use LINQ to retrieve all albums, including Genre and Artist information for display.

   (Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex1 StoreManagerController Index – CSharp)

   C#

   //

   FakePre-883de492c51845dc87f51e45560365ad-8ba2bde9ca044641bdef0383d36b85f6FakePre-29a6b823550a4dbd94d347b07a90f443-aca9beae7d814a36a385e201ee17dad2FakePre-70ffe93df24c47b1a690ed3d7b81bd4d-fb5ce5f717ae4f77b732b1c3a74b0399FakePre-34517ecaa63a40a4b43ecc2caa3ca109-1188bbf4182545c4b1b57d6a4d1a9eec var albums = storeDB.Albums .Include("Genre").Include("Artist") .ToList(); return View(albums);FakePre-c29805767f374d25b9f6716963047713-63cf984d754047a89f1ec2e144c90311FakePre-21bd15f546a9452c96db5911e1b68ce1-85b2e4d894b3463798cbf759fd1b7b83

   (Code Snippet – ASP.NET MVC 3 Helpers and Forms and Validation – Ex1 StoreManagerController Index – VB)

   Visual Basic

   '

   FakePre-91304beaf69d4e1abe6b341b9cc6b17d-8ab8ecd840424063bc6fec0d86323a86FakePre-16d53af57d5e46268f2f8a6869eeef15-fc99004e68b344be82bcff7e089b9ee1FakePre-b85d2f89728e493e8c23c2b268e77ddf-016a788427fb4ae6b167f45ccba785e0 Dim albums = storeDB.Albums.Include("Genre").Include("Artist").ToList() Return View(albums)FakePre-b9f7bf37c4ba43b59a735e15c8df0094-098c742ad7864a00b126cdb0ba2ad7f0FakePre-3507d1fd744f4cfe819cb15bc4e5b91b-e9672ff5c2d84c1089efe244834ad89b

Task 3 – Creating the Index View

In this task, you will create the Index View template to display the list of albums returned by the StoreManager Controller.

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

   Figure 2

   Building the project

2. Right-click inside the Index action method and select Add View. This will bring up the Add View dialog.

   Figure 3

   Adding a View from within the Index method

3. In the Add View dialog, verify that the View Name is Index. Check the Create a strongly-typed view checkbox and select Album (MvcMusicStore.Models) from the View data class drop-down. Select List from the View content drop-down. Leave the View Engine to ASPX (C#|VB) and the other fields with their default value and then click Add.

   Figure 4

   Adding an Index View

Task 4 – Customizing the scaffold of the Index View

In this task, you will adjust the simple View template created with ASP.NET MVC scaffolding feature to have it display the fields you want.

1. Review the code created. The generated list of fields will be part of the following HTML table that Scaffolding is using for displaying tabular data.

   HTML(C#)

   <table> <tr> <th></th> <th> GenreId </th> <th> ArtistId </th> <th> Title </th> <th> Price </th> <th> AlbumArtUrl </th> </tr> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) %> | <%: Html.ActionLink("Details", "Details", new { id=item.AlbumId }) %> | <%: Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) %> </td> <td> <%: item.GenreId %> </td> <td> <%: item.ArtistId %> </td> <td> <%: item.Title %> </td> <td> <%: String.Format("{0:F}", item.Price) %> </td> <td> <%: item.AlbumArtUrl %> </td> </tr> <% } %> </table>

   HTML(Visual Basic)

   <table> <tr> <th></th> <th> GenreId </th> <th> ArtistId </th> <th> Title </th> <th> Price </th> <th> AlbumArtUrl </th> </tr> <% For Each item In Model %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new with { id=item.AlbumId }) %> | <%: Html.ActionLink("Details", "Details", new with { id=item.AlbumId }) %> | <%: Html.ActionLink("Delete", "Delete", new with { id=item.AlbumId }) %> </td> <td> <%: item.GenreId %> </td> <td> <%: item.ArtistId %> </td> <td> <%: item.Title %> </td> <td> <%: String.Format("{0:F}", item.Price) %> </td> <td> <%: item.AlbumArtUrl %> </td> </tr> <% Next %> </table>
   Note:

   the generated template is following the same coding practices you have seen at ASP.NET MVC Fundamentals Hands-on lab: <%: %> code nuggets to HTML encode values, and Html.ActionLink() helper method to generate links to other controller actions.

2. Display only the Album Title, Artist, and Genre fields. To do this, delete the AlbumId, Price and Album Art URL columns. Also, change GenreId and ArtistId columns to display their linked class properties of Artist.Name and Genre.Name. Finally, remove the Details link.

   To do this, replace the <table> code with the following:

   HTML(C#)

   <table> <tr> <th></th> <th>Title</th> <th>Artist</th> <th>Genre</th> </tr> <% foreach (var item in Model) { %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) %> | <%: Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })%> </td> <td><%: item.Title %></td> <td><%: item.Artist.Name %></td> <td><%: item.Genre.Name %></td> </tr> <% } %> </table>

   HTML(Visual Basic)

   <table> <tr> <th></th> <th>Title</th> <th>Artist</th> <th>Genre</th> </tr> <% For Each item In Model %> <tr> <td> <%: Html.ActionLink("Edit", "Edit", new with { id=item.AlbumId }) %> | <%: Html.ActionLink("Delete", "Delete", new with { id=item.AlbumId })%> </td> <td><%: item.Title %></td> <td><%: item.Artist.Name %></td> <td><%: item.Genre.Name %></td> </tr> <% Next %> </table>

3. Change the following descriptions.

   HTML

   <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

   Store Manager - All Albums <h2>Albums</h2>FakePre-1a41113043784c7581a08d151b532e6d-dac1402389c641e6a3a3d9af0b9d6f83FakePre-2d000d07a4164f30be64ef1e4ed0ce12-18d0e116171242f89359b1b59b6804f2FakePre-e470022772b74ff9a07ee39f744b3f02-b1f5459b1f0a45b384bc13799f57ce01FakePre-90b28dd6df514a35977a9baa6a82198c-f48d01e2eb504d1a9abf7dd485efaa08 Store Manager - All Albums <h2>Albums</h2>

4. Also update the link to create a new Album changing its text.

   HTML

   <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Store Manager - All Albums </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Albums</h2> <p> <%: Html.ActionLink("Create New Album", "Create") %> </p>

Task 5 – Running the Application

In this task, you will test that the StoreManagerIndex View template displays a list of albums according to the design of the previous steps.

1. Press F5 to run the Application.

2. The project starts in the Home page. Change the URL to /StoreManager to verify that a list of albums is displayed, showing their Title, Artist and Genre.

   Figure 5

   Browsing the list of Albums

Next Step

Exercise 2: Adding an HTML Helper