Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Using Page Inspector in ASP.NET MVC

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft ASP.net] [www.ASP.net] [Using Page Inspector in ASP.NET MVC] This video shows you how to use Visual Studio's Page Inspector feature to browse an ASP.NET MVC 4 web application, quickly locate sources of generated markup, and make changes to them. [1 - Create an ASP.NET MVC 4 Application] First, create an ASP.NET MVC 4 web application. Click File, New Project, and then select ASP.NET MVC 4 Web Application. In the MVC 4 Project dialog box select Internet Application. Leave Razor as the default view engine. [2 - Use Page Inspector to Browse to a View] To browse the MVC application, right click the project and select View in Page Inspector. Page Inspector calculates the correct route in the MVC application and displays the corresponding file and its built-in browser. [3 - Browser Tools] The bottom pane of Page Inspector contains browser tools similar to the F12 tools in Internet Explorer. However, you can use the Page Inspector tools without having to leave the Visual Studio environment. [4 - Inspection Mode] Page Inspector's Inspection Mode lets you quickly discover the source of rendered elements. To start, click the Inspect button. When you move the mouse pointer over an element in the browser, Page Inspector opens the file that generated the element and highlights the corresponding code or markup for you in source view. Click the element in the browser to select it. At the bottom of the Page Inspector window the HTML tab displays the markup for the selected element, the Styles tab shows you the CSS rules for the element, and the Trace Styles tab shows the style properties for the element in alphabetical order. [5 - Find and Make Changes to Markup] Now you will see how to use Page Inspector to find and make changes to markup whose location might be hard to find. Scroll the Page Inspector browser window to the bottom of the page. Click the Inspect button and place the mouse over the footer area. Page Inspector opens the layout.cshtml file in source view and highlights the footer section. You may have thought that the footer was on the index.cshtml page, but Page Inspector took you to the correct location in the layout file, saving you an extra step. [6 - Sample Edit] Now we'll make a sample edit using Page Inspector. Click the Inspect button. In the Page Inspector browser window, move your mouse pointer over the line with the copyright notice. Page Inspector highlights the corresponding line in the layout file. Add some text to the source. When you add some text, the update bar notifies you that the source has changed. Press Control-Alt-Enter to save the files and refresh the Page Inspector browser. Here you can see that the change has been made. [7 - Trace Styles Tab] Next you will see how you can use the Page Inspector Trace Styles tab to make and preview changes to CSS. In this sample template application, the logo text is orange instead of gray. To find where to make the change, click the Inspect button, click the orange text, and then open the Trace Styles tab. Expand the color property. Here you can change the color value temporarily and see the change immediately in the Page Inspector browser. [8 - Page Inspector Takes You to the Style Definition] To make the change permanent, double click the site-title class. Page Inspector opens the site.css file for you automatically in a temporary window on the right. When you click the site.css tab, Page Inspector conveniently highlights the definition of the style class where you need to make the change. When you are done, press Control-Alt-Enter to save the files and refresh the Page Inspector browser. The color of the logo text has been changed and saved. [9 - Final Tips] Here are a few final tips. You can browse any view in an MVC project by right clicking a view file and choosing View in Page Inspector. If you wish, you can also set Page Inspector to be the default web development browser by selecting it in the Visual Studio menu. This concludes our quick look at Page Inspector and how you can use it to be more productive when developing ASP.NET MVC web applications. [Microsoft ASP.net] [www.ASP.net]

Video Details

Duration: 6 minutes and 36 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 11
Posted by: neudesicasp on Apr 18, 2013

The videos explores the usage of Page Inspector in ASP.NET MVC web applications.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.