Exercise 1: Using Page Inspector in ASP.NET MVC Projects
In this exercise, you will learn how to preview and debug an ASP.NET MVC 4 solution using Page Inspector. First, you will perform a brief lap around the tool to learn the features that facilitate the Web debugging process. Then, you will work in a web page that contains styling issues. You will learn how to use Page Inspector to find the source code that generates the issue and fix it.
Task 1 – Exploring Page Inspector
In this task, you will learn how to use the Page Inspector in the context of an ASP.NET MVC 4 project that shows a photo gallery.
- Open Visual Studio 11 and open the PageInspector-MVC-Begin.sln solution located in Source\Ex1-MVC4\Begin from this lab’s folder. You will use this solution for exploring Page Inspector.
In the Solution Explorer, locate Index.cshtml view under the /Views/Home project folder, right-click it and select View in Page Inspector.
Figure 1
Selecting a file to preview in Page Inspector
You will notice that Visual Studio will prompt for permission before enabling the tool in your project. Click YES.
Figure 2
Enabling Page Inspector in a Visual Studio project
To generate the metadata that is required for some of its features, Page Inspector must instrument the project by adding the following setting to the <appSetting> element in the Web.config file. You can use Page Inspector even if this setting is disabled or it is missing. However, some features like the source selection mapping will not work under these conditions.
<add key="VisualStudioDesignTime:Enabled" value="true" />
The Page Inspector window will show the /Home/Index URL mapped to the source View you selected.
Figure 3
The first contact with Page Inspector
The Page Inspector tool is integrated in your Visual Studio environment. The inspector contains an embedded browser, together with a powerful HTML profiler. Notice that you do not have to run the solution to see how your pages look.
When the width of Page Inspector browser is less than the width of the opened page, you will not see the page properly. If that happens, adjust the width of the Page Inspector.
Click the Files tab in Page Inspector.
You will see all the source files that are composing the Index page. This feature helps to identify all the elements at a glance, especially when you are working with partial views and templates. Notice that you can also open each of the files if you click the links.
Click the Toggle Inspection Mode button, located at the left of the tabs.
This tool will let you select any element of the page and see its HTML and Razor code.
Figure 5
Toggle Inspection Mode button
In the Page Inspector browser, move the mouse pointer over the page elements. While you move the mouse pointer over any part of the rendered page, the element type is displayed and the corresponding source markup or code is highlighted in the Visual Studio editor.
Figure 6
Inspection mode in action
Do not maximize the Page Inspector window or you will not be able to see the preview tab showing the source code. If you click the element in Page Inspector when it is maximized, the source code of the selection will appear but it will hide the Page Inspector window.
If you pay attention to the Index.cshtml file, you will notice that the portion of source code that generates the selected element is highlighted. This feature facilitates the editing of long source files, providing a direct and fast way to access the code.
Figure 7
Inspecting elements
- Click the Toggle Inspection Mode button () to disable the cursor.
- Select the HTML tab to display the HTML code rendered in the Page Inspector browser.
In the HTML markup, locate the list item with the Koala link and select it.
Notice that when you select the code, the corresponding output is automatically highlighted in the browser. This feature is useful to see how an HTML block is rendered on the page.
Figure 8
Selecting HTML element in the page
Click the Toggle Inspection Mode button to enable Inspection Mode and click the navigation bar. On the right of the HTML code, in the Styles pane, you will see a list with the CSS styles applied to the selected element.
Since the header is a part of the site layout, Page Inspector will also open _Layout.cshtml file and highlight the segment of code affected.
Figure 9
Discovering styles and source files of a selected element
With the toggle inspection pointer enabled, move the mouse pointer below the menu bar and click the blank half circle.
Figure 10
Selecting an element
In the Styles pane, locate the background-image item under the .main-content group. Uncheck the background-image and see what happens. You will notice that the browser will reflect the changes immediately and the circle is hidden.
The changes you apply on the Page Inspector Styles tab do not affect the original stylesheet. You can uncheck styles or change their values as many times as you want, but they will be restored after refreshing the page.
Figure 11
Enabling and disabling CSS styles
- Now, click the’ your logo here’ text on the header using the inspection mode.
In the Styles tab, locate the font-size CSS attribute under the .site-title group. Double-click the attribute value and replace the 2.3em value with 3em, and then press ENTER. Notice that the title looks bigger.
Figure 12
Changing CSS values in the Page Inspector
Click the Trace Styles tab, located in the right pane of Page Inspector. This is an alternative way to see all the styles applied to the selection, ordered by attribute name.
Figure 13
CSS styles tracing of the selected element
Another feature of Page Inspector is the Layout pane. Using the inspection mode, select the navigation bar and then click the Layout tab on the right pane. You will see the exact size of the selected element, as well as its offset, margin, padding and border size. Notice that you can also modify the values from this view.
Figure 14
Element layout in Page Inspector
Task 2 – Finding and Fixing Style Issues in the Photo Gallery
How would you diagnose Web pages issues with previous versions of Visual Studio? You are likely familiar with web debugging tools that run outside the Visual Studio IDE, like Internet Explorer Developer Tools or Firebug. Browsers only understand HTML, scripting and styles, while an underlying framework generates the HTML that will be rendered. For that reason, you often need to deploy the whole site to see how web pages look like.
You had probably followed these steps when you wanted to detect and fix an issue in your web site:
- Run the Solution from Visual Studio, or deploy the page on the web server.
- In the browser, open the developer tools you use, or simply open the source code and the styles and try to match the issue.
- To find the files involved, you would have used the “Search” or “Search in files” features with the name of the style classes.
- Once the error is detected, stop the Web browser and the server.
- Clear the browser cache.
- Return to Visual Studio to apply a fix. Repeat all the steps to test.
As there is no real WYSIWYG in ASP.NET MVC, most of the style issues are detected on a later stage, after running or deploying the web application. Now, with Page Inspector, it is possible to preview any page without running the solution.
In this task, you will use the Page inspector and fix some issues the Photo Gallery application.
Using Page Inspector, locate the Register and the Log on links at the left side of the header.
Notice that the links are not displayed at the expected place on the right, and they are shown like a bulleted list. You will now align the links to the right and restyle them accordingly.
Figure 15
Locating the Register and Log on links
With Toggle Inspection Mode selected, click close to, but not on, the Register link to open its code.
Notice that the source code of the links is located in the _LogOnPartial.cshtml file, not the Index.cshtml nor the _Layout.cshtml, which are the places you might look in first place. You have been placed directly in the correct source file. In the Styles tab, locate and click the <section> #login item, which is the HTML container for these links.
Notice that the #login style is automatically located in Site.css after you click. Moreover, the code is now highlighted.
Figure 16
Selecting the CSS styles
Uncomment the text-align attribute in the highlighted code by removing the opening and closing characters (/* */) and save the Site.css file.
Page Inspector is aware of all the different files that compose the current page, and it can detect when any of these files change. It alerts you whenever the current page in browser is not in sync with the source files. In the Page Inspector browser, click the bar located below the address bar to reload the page.
Figure 17
Reloading the page
The links are now at the right, but they still look like a bulleted list. Now, you will remove the bullets and align the links horizontally.
Figure 18
Reloading the page
Using the inspection mode, select any of the <li> items that contain the “Register” and “Log On” links. Then, click the <section> #login item to access Styles.css code.
Figure 19
Finding the style
In Style.css, uncomment the code for #login li items. The style you are adding will hide the bullet and display the items horizontally.
Figure 20
Restyling the login links
Save Style.css file and click once on the bar located below the address to reload the page. Notice that the links appear correctly.
Figure 21
Links aligned to the right side
- Finally, you will change the header title. Use the inspection mode to click your logo here text and get to the source code that generates it.
Now you are in _Layout.cshtml, replace ‘your logo here’ text with ‘Photo Gallery’. Save and update the Page Inspector browser.
Figure 22
Assigning a new title
Figure 23
Photo Gallery page updated
- Finally press F5 to run the app. Check out all the changes work as expected.
|
|