Exercise 2: Creating the Photo Gallery Web Application

In this exercise, you will work on a Photo Gallery application to display photos. You will start with the ASP.NET MVC 4 project template, and then you will add a feature to retrieve photos from a service and display them in the home page.

In the following exercise, you will update this solution to enhance the way it is displayed on mobile devices.

Task 1 – Creating a Mock Photo Service

In this task, you will create a mock of the photo service to retrieve the content that will be displayed in the gallery. To do this, you will add a new controller that will simply return a JSON file with the data of each photo.

1. Open Visual Studio 11 if not already opened.
2. Select the File | New | Project menu command. In the New Project dialog, select the Visual C# | Web template on the left pane tree, and choose ASP.NET MVC 4 Web Application. Name the project PhotoGallery, select a location (or leave the default) and click OK. Alternatively, you can continue working from your existing MVC 4 Internet Application solution from Exercise 1 and skip the next step.
3. In the New ASP.NET MVC 4 Project dialog box, select the Internet Application project template and click OK. Make sure you have Razor selected as the View Engine.
4. In the Solution Explorer, right-click the App_Data folder of your project, and select Add | Existing Item. Browse to the Source\Assets\App_Data folder of this lab and add the Photos.json file.

5. Create a new controller with the name PhotoController. To do this, right-click on the Controllers folder, go to Add and select Controller. Complete the controller name, leave the Empty controller template and click Add.

   Figure 19

   Adding the PhotoController

6. Replace the Index method with the following Gallery action, and return the content from the JSON file you have recently added to the project.

   (Code Snippet – MVC4 Lab - Ex02 - PhotoController)

   C#

   public class PhotoController : Controller

   FakePre-cff37972568b4a1889fe7ab9a762ab86-7413fd131c9b4f819a03dcbf58953d31 public ActionResult Gallery() { return this.File("~/App_Data/Photos.json", "application/json"); }

7. Press F5 to run the solution, and then browse to the following URL in order to test the mocked photo service: https://localhost:[port]/photo/gallery (the [port] value depends on the current port where the application was launched). The request to this URL should retrieve the content of the Photos.json file.

   Figure 20

   Testing the mocked photo service

Task 2 – Displaying the Photo Gallery

In this task, you will update the Home page to show the photo gallery by using the mocked service you created in the first task of this exercise. You will add model files and update the gallery views.

1. In Visual Studio, press SHIFT+F5 to stop debugging the application.
2. Create the Photo class in the Models folder. To do this, right-click on the Models folder, select Add and click Class. Then, set the name to Photo.cs and click Add.

3. Add the following members to the Photo class.

   (Code Snippet – MVC4 Lab - Ex02 - Photo model)

   C#

   public class Photo

   FakePre-97196d85db3341d3a1abfe4ff09fd477-39c4e1ae90ff4530a53acce96fe89aca public string Title { get; set; } public string FileName { get; set; } public string Description { get; set; } public DateTime UploadDate { get; set; }FakePre-011271fd151e4986bbb6f9b0ee034ef2-b02f94bbc1a74de181fe3c1fff315fccFakePre-bf5cfe6a117c4bff902da45c8031bce1-a84fbd8932d44b8c86be1bdc7f4635aeFakePre-b78c31f51b564971a5d3c24a0404b6bd-79addcd24fa54cb8ba413b034edbe827FakePre-bef71aab6b884af186dff54e4551c608-f2215604e30c4673bf66015c5238ce76

4. Open the HomeController.cs file from the Controllers folder.

5. Add the following using statements.

   (Code Snippet – MVC4 Lab - Ex02 - HomeController Usings)

   C#

   using System.Net; using System.Web.Script.Serialization; using PhotoGallery.Models;

6. Update the Index action to use WebClient to retrieve the gallery data, and then use the JavaScriptSerializer to deserialize it to the view model.

   (Code Snippet – MVC4 Lab - Ex02 - Index Action)

   C#

   public ActionResult Index()

   FakePre-4f8985c202a8427daab43b98f574ecf6-a761bfc613b5466f9258f3df6b5abe04 var client = new HttpClient(); var response = client.Get(Url.Action("gallery", "photo", null, Request.Url.Scheme)); var jss = new JavaScriptSerializer(); var result = jss.Deserialize<List<Photo>>(response.Content.ReadAsString()); return View(result);FakePre-5f629b99b3c54a148e788853eae4b73a-d87025d4d5d8421eb610ba7591fc3f47

7. Open the Index.cshtml file located under the Views\Home folder and replace all the content with the following code.

   This code loops through all the photos retrieved from the service and displays them into an unordered list.

   (Code Snippet – MVC4 Lab - Ex02 – Photo List)

   HTML

   @model List<PhotoGallery.Models.Photo> @{ ViewBag.Title = "Photo Gallery"; } <ul class="thumbnails"> @foreach (var photo in Model) { <li class="item"> <a href="@Url.Content("~/photos/" + photo.FileName)"> <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" /> </a> <span class="image-overlay">@photo.Title</span> </li> } </ul>

8. In the Solution Explorer, right-click the Content folder of your project, and select Add | Existing Item. Browse to the Source\Assets\Content folder of this lab and add the Site.css file. You will have to confirm its replacement. If you have the Site.css file open, you will have to confirm to reload the file also.
9. Open Windows Explorer and copy the entire Photos folder located under the Source\Assets folder of this lab to the root folder of your project in Solution Explorer.

10. Run the application. You should now see the home page displaying the photos in the gallery.

    Figure 21

    Photo Gallery

11. In Visual Studio, press SHIFT+F5 to stop debugging the application.