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. Add a using directive to MvcMusicStore.Models:
   

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

   C#	Copy Code
   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 2.0 Helpers, Forms and Validation – Ex1 MusicStoreEntities – CSharp)

   C#	Copy Code
   public class StoreManagerController : Controller { MusicStoreEntities storeDB = 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 2.0 Helpers, Forms and Validation – Ex1 StoreManagerController Index – CSharp)

   C#	Copy Code
   // // GET: /StoreManager/ public ActionResult Index() { var albums = storeDB.Albums .Include("Genre").Include("Artist") .ToList(); return View(albums); }

   
   

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#) 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

   Copy Code

   <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>

   
   

   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	Copy Code
   <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>

   
   
3. Change the following descriptions.
   

   HTML	Copy Code
   <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>

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

   HTML	Copy Code
   <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