Skip to main contentgo deploy

M55340A | Module 5



M55340A | Module 5
 Home
 Lab Guide

Lab Guide

Module 5: Developing Views

Lab: Developing Views
Scenario

To construct the user interface of a city's web application, your development team
decided to add views. You have been asked to create the views to render a response to
a browser.
Exercise 1: Adding Views to an MVC Application

Scenario

To construct the user interface of a web application, views should be added to the web
application. In this exercise you will add two views to the web application: Index and
Details. The Index view will show a list of cities, and the Details view will show the
details of a city.

The main tasks for this exercise are as follows:

 Add a view to show all the cities

 Run the application
 Add a view to show data for a city
 Add a Back link to a view
 Add a city name as a link to each city
 Run the application

Task 1: Add a view to show all the cities

1. Navigate to D:\Allfiles\Mod05\Labfiles\01_CitiesWebsite_begin, and then

double-click CitiesWebsite.sln.
 Note: If a Security Warning for CitiesWebsite dialog box appears, verify that
the Ask me for every project in this solution check box is cleared, and then
click OK.
2. In the How do you want to open this file? window, select Visual Studio
2022 and ensure the checkbox for Always use this app to open .sln files is
selected then click OK.
3. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
expand Services, and then click CityProvider.cs.
4. In the CityProvider.cs code window, locate the following code:
5. public CityProvider()
6. {
7.
8. }
9. Place the cursor within the CityProvider constructor code block, and then type
the following code:
10. _cities = CityInitializer();
11. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
expand Models, and then click City.cs.
12. In the City.cs code window, locate the following code:
13. public City(string country, string cityName, string timeZone, CityPopulation
population)
14. {
15.
16. }
17. Place the cursor within the City constructor code block, and then type the
following code:
18. Country = country;
19. Name = cityName;
20. TimeZone = timeZone;
21. Population = population;
22. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
under Models, click CityPopulation.cs.
23. In the CityPopulation.cs code window, locate the following code:
24. public CityPopulation(int year, int city, int urban, int metro)
25. {
26.
27. }
28. Place the cursor within the CityPopulation constructor code block, and then
type the following code:
29. Year = year;
30. City = city;
31. Urban = urban;
32. Metro = metro;
33. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
expand Controllers, and then click CityController.cs.
34. In the CityController.cs code window, locate the following code:
35. public class CityController : Controller
36. {
37. Place the cursor at the end of the located code, press Enter, and then type the
following code:
38. private ICityProvider _cities;
39. In the CityController.cs code window, select the
following CityController constructor code:
40. public CityController()
41. {
42.
43. }
 44. Replace the selected code with the following code:
45. public CityController(ICityProvider cities)
46. {
47. _cities = cities;
48. }
49. In the CityController.cs code window, locate the following code:
50. public IActionResult ShowCities()
51. {
52. Place the cursor after the { (opening brackets) sign, press Enter, and then type
the following code:
53. ViewBag.Cities = _cities;
54. In the CityController.cs code window, right-click the following code, and then
click Add View....
55. public IActionResult ShowCities()
56. In the Add New Scaffolded Item dialog box, ensure that the Razor
View template (not the Empty template) is selected and click Add.
57. In the Add Razor View dialog box, ensure that the View name textbox contains
the name ShowCities.
58. In the Add Razor View dialog box, ensure that both the Create as a partial
view and Use a layout page check boxes are cleared, and then click Add.
59. In the ShowCities.cshtml code window, locate the following code:
60. <title>ShowCities</title>
61. Place the cursor at the end of the located code, press Enter, and then type the
following code:
62. <link rel="stylesheet" type="text/css" href="~/css/style.css" />
63. In ShowCities.cshtml code window, in the BODY element, type the following
code:
64. <h1>Select City</h1>
65. @foreach (var item in ViewBag.Cities)
66. {
67. <p>@item.Key</p>
68. }
Task 2: Run the application

1. In the CitiesWebsite - Microsoft Visual Studio window, on the File menu,

click Save All.
2. In the CitiesWebsite - Microsoft Visual Studio window, on the Debug menu,
click Start Without Debugging.

Note: The browser displays a Select City title and a list of cities below
it: Madrid, London, and Paris.

1. In Microsoft Edge, click Close.

Task 3: Add a view to show data for a city

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

under Controllers, click CityController.cs.
2. In the CityController.cs code window, select the following code:
3. public IActionResult ShowDataForCity()
4. Replace the selected code with the following code:
5. public IActionResult ShowDataForCity(string cityName)
6. Place the cursor after the { (opening brackets) sign, press Enter, and then type
the following code:
 7. ViewBag.City = _cities[cityName];
8. In the CityController.cs code window, right-click anywhere in
the ShowDataForCity method, and then click Add View....
9. In the Add New Scaffolded Item dialog box, ensure that the Razor
View template (not the Empty template) is selected, and then click Add.
10. In the Add Razor View dialog box, ensure that the value in the Name: textbox
is ShowDataForCity.
11. In the Add Razor View dialog box, ensure that the Create as a partial
view and Use a layout page check boxes are cleared, and then click Add.
12. In the ShowDataForCity.cshtml code window, locate the following code:
13. <title>ShowDataForCity</title>
14. Place the cursor at the end of the located code, press Enter, and then type the
following code:
15. <link rel="stylesheet" type="text/css" href="~/css/style.css" />
16. In the ShowDataForCity.cshtml code window, in the BODY element, type the
following code:
17. <div>
18. <h2>@ViewBag.City.Name</h2>
19. <p>Country: @ViewBag.City.Country</p>
20. <p>Time zone: @ViewBag.City.TimeZone</p>
21. <span><img src="@Url.Action("GetImage", new { cityName =
ViewBag.City.Name })" /></span>
22. </div>
23. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
under Controllers, click CityController.cs.
24. In the CityController.cs code window, select the following code:
25. return Content(cityName);
26. Replace the selected code with the following code:
27. return File($@"images\{cityName}.jpg", "image/jpeg");
Task 4: Add links to the views by using tag helpers

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

right-click Views, point to Add, and then click New Item....
2. In the Add New Item -- CitiesWebsite dialog box, choose Razor View
Imports, and then click Add.
3. In the _ViewImports.cshtml code window, type the following code:
4. @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
5. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
expand Views, expand City, and then click ShowDataForCity.cshtml.
6. In the ShowDataForCity.cshtml code window, locate the following code:
7. <span><img src="@Url.Action("GetImage", new { cityName =
ViewBag.City.Name })" /></span>
8. Place the cursor at the end of the located code, press Enter, and then type the
following code:
9. <a asp-action="ShowCities">Back</a>
10. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
under Views, under City, click ShowCities.cshtml.
11. In the ShowCities.cshtml code window, select the following code:
12. <p>@item.Key</p>
13. Replace the selected code with the following code:
14. <h2>
15. <a asp-action="ShowDataForCity" asp-route-cityname="@item.Key">@item.Key</a>
16. </h2>
Task 5: Run the application
 1. In the CitiesWebsite - Microsoft Visual Studio window, on the File menu,
click Save All.
2. In the CitiesWebsite - Microsoft Visual Studio window, on the Debug menu,
click Start Without Debugging.
3. In Microsoft Edge, click London.

Note: The browser displays the city's name, details, mini map, and a Back link.
4. In Microsoft Edge, click Back.
5. In Microsoft Edge, click Close.

Result: At the end of this exercise, you have added views to an MVC application,
passed data from a controller to a view using ViewBag, and navigated between pages
by using helpers.
Exercise 2: Adding a Partial View

Scenario

You have been asked to display the population of each city. To do this, you have been
asked to add a partial view. In this exercise, you will create a partial view and embed it
in the ShowDataForCity view.

The main tasks for this exercise are as follows:

 Add a partial view

 Use the partial view in the ShowDataForCity view
 Run the application

Task 1: Add a partial view

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

right-click Views, point to Add, and then click New Folder.
2. In the NewFolder box, type Shared, and then press Enter.
3. In Solution Explorer, right-click Shared, point to Add, and then click View....
4. In the Add New Scaffolded Item dialog box, ensure that the Razor
View template (not the Empty template) is selected, and then click Add.
5. In the Add Razor View dialog box, in the Name: textbox, type _CityPopulation.
6. In the Add Razor View dialog box, ensure that the Create as a partial
view check box is selected, and then click Add.
7. In the _CityPopulation.cshtml code window, replace all the content with the
following code:
8. @inject CitiesWebsite.Services.ICityFormatter cityFormatter
9.
10. @{
11. CitiesWebsite.Models.CityPopulation population = ViewBag.City.Population;
12. }
13.
14. <h3>City Population (@population.Year)</h3>
15. <p>City: @cityFormatter.GetFormattedPopulation(@population.City)</p>
16. <p>Urban: @cityFormatter.GetFormattedPopulation(@population.Urban)</p>
17. <p>Metro: @cityFormatter.GetFormattedPopulation(@population.Metro)</p>
Task 2: Use the partial view in the ShowDataForCity view
 1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
under Views, under City, click ShowDataForCity.cshtml.
2. In the ShowDataForCity.cshtml code window, locate the following code:
3. <span><img src="@Url.Action("GetImage", new { cityName =
ViewBag.City.Name })" /></span>
4. Place the cursor at the end of the located code, press Enter, and then type the
following code:
5. @await Html.PartialAsync("_CityPopulation")
Task 3: Run the application

1. In the CitiesWebsite - Microsoft Visual Studio window, on the File menu,

click Save All.
2. In the CitiesWebsite - Microsoft Visual Studio window, on the Debug menu,
click Start Without Debugging.
3. In Microsoft Edge, click Madrid.

Note: The browser displays the city's name, details, mini map, population, and
a Back link.
4. In Microsoft Edge, click Close.

Result: At the end of this exercise, you will have used partial views, and used services
inside a view by using the @inject directive.
Exercise 3: Adding a View Component

Scenario

Currently, in the ShowCities view, for each city, you show a link with the name of the
city. You have been asked to show for each city in the ShowCities view, the country to
which the city belongs and a mini map of the city. To implement this you have been
asked to use a view component. In this exercise, you will create a view component and
embed it in the ShowCities view.

The main tasks for this exercise are as follows:

 Add a view component class

 Add a view component view
 Use the view component
 Run the application

Task 1: Add a view component class

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

right-click CitiesWebsite, point to Add, and then click New Folder.
2. In the NewFolder box, type ViewComponents, and then press Enter.
3. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
right-click ViewComponents, point to Add, and then click Class....
4. In the Add New Item -- CitiesWebsite dialog box, in the Name: box,
type CityViewComponent, and then click Add.
5. In the CityViewComponent.cs code window, select the following code:
6. public class CityViewComponent
7. Add a base class to the CityViewComponent class as follows:
 8. public class CityViewComponent : ViewComponent
9. In the CityViewComponent.cs code window, place the cursor within
the CityViewComponent code block, and then type the following code:
10. private ICityProvider _cities;
11.
12. public CityViewComponent(ICityProvider cities)
13. {
14. _cities = cities;
15. }
16.
17. public async Task<IViewComponentResult> InvokeAsync(string cityName)
18. {
19. ViewBag.CurrentCity = await GetCity(cityName);
20. return View("SelectCity");
21. }
22.
23. private Task<City> GetCity(string cityName)
24. {
25. return Task.FromResult<City>(_cities[cityName]);
26. }
Task 2: Add a view component view

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

under Views, right-click Shared, point to Add, and then click New Folder.
2. In the NewFolder box, type Components, and then press Enter.
3. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
right-click Components, point to Add, and then click New Folder.
4. In the NewFolder box, type City, and then press Enter.
5. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,
right-click the City folder you just created, point to Add, and then click View....
6. In the Add New Scaffolded Item dialog box, ensure that the Razor
View template (not the Empty template) is selected, and then click Add.
7. In the Add Razor View dialog box, in the Name: textbox, type SelectCity.
8. In the Add Razor View dialog box, ensure that the Create as a partial
view check box is selected, and then click Add.
9. In the SelectCity.cshtml code window, replace all the content with the following
code:
10. <div>
11. <h2>
12. <a asp-action="ShowDataForCity" asp-route-
[email protected]>@ViewBag.CurrentCity.Name (Capital of
@ViewBag.CurrentCity.Country)</a>
13. </h2>
14. <img src="@Url.Action("GetImage", new { cityName =
ViewBag.CurrentCity.Name })" />
15. </div>
Task 3: Use the view component

1. In the CitiesWebsite - Microsoft Visual Studio window, in Solution Explorer,

under Views, under City, click ShowCities.cshtml.
2. In the ShowCities.cshtml code window, select the following code:
3. <h2>
4. <a asp-action="ShowDataForCity" asp-route-cityname="@item.Key">@item.Key</a>
5. </h2>
6. Replace the selected code with the following code:
7. @await Component.InvokeAsync("City", item.Key)
Task 4: Run the application

1. In the CitiesWebsite - Microsoft Visual Studio window, on the File menu,

click Save All.
2. In the CitiesWebsite - Microsoft Visual Studio window, on the Debug menu,
click Start Without Debugging.

Note: The browser displays a list of cities. Each has a header link and mini map
image of the region.
3. In Microsoft Edge, click Madrid (Capital of Spain).
4. In Microsoft Edge, click Close.
5. In the CitiesWebsite -- Microsoft Visual Studio window, on the File menu,
click Exit.

Result: At the end of this exercise, you have created view components, and embeded
them in a view.
01:43:441 hour and 43 minutes remaining on your lab session
Keyboard released from VM