Visual Studio IDE

Certify and Increase Opportunity.
Govt. Certified ASP.NET Programmer

Visual Studio IDE

An integrated development environment (IDE), also known as integrated design environment and integrated debugging environment, is a type of computer software that assists computer programmers to develop software. In the case of Visual Basic .NET, that IDE is Visual Studio.

Figure 1-4

Referenced Screen
IDE Contents
The Visual Studio IDE consists of several sections, or tools, that the developer uses while programming. As you view the IDE for a new project you generally have three sections in view:

  • The Toolbox on the left
  • The Solution Explorer on the right
  • The Code / Design view in the middle

The Toolbox is a palette of developer objects, or controls, that are placed on forms or web pages, and then code is added to allow the user to interact with them. An example would be TextBox, Button and ListBox controls. With these three controls added to a Windows Form object the developer could write code that would take text, input by the application user, and added to the ListBox after the button was clicked.

Solution Explorer
This is a section that is used to view and modify the contents of the project. A Visual Studio Windows Application Project will generally have a Form object with a code page, references to System components and possibly other modules with special code that is used by the application.

Properties Windows
The properties windows shows all the control (like textbox) properties to be change at design time. Most of this properties can be change at run time with some code, but basically most of this properties change the way the control is display on your application.

Code / Design view
This is where the magic takes place. Forms are designed graphically. In other words, the developer has a form on the screen that can be sized and modified to look the way it will be displayed to the application users. Controls are added to the form from the Toolbox, the color and caption can be changed along with many other items.

This center window of the IDE is also where developers write the code that makes everything in the application work. The code is written in modules, or files, that are either connected to an object (Forms) or called specifically when needed.



VWD is by far the most extensive and feature-rich integrated development environment (IDE) for building ASP.NET web pages. The abbreviation IDE refers to the way all the separate tools you need to build complex web applications are integrated in a single environment. Instead of writing code in a text editor, compiling code at the command line, writing HTML and CSS in a separate application, and managing your database in yet another, VWD enables you to perform all of these tasks, and more, from the same environment. Besides the efficiency this brings because you don’t have to constantly switch tools, this also makes it much easier to learn new areas of VWD, because many of the built-in tools work in the same way.

The Main Development Area

To get familiar with the many tools that are packed in VWD’s interface, take a look at Figure 1-8. It shows the same screen you got after you created your first web site in VWD, but now it highlights some of the most important screen elements. If you are already familiar with a previous version of Visual Web Developer, you could skip this section and pick up again at the next Try It Out exercise later in this chapter.

If you had a previous version of Visual Studio installed, your screen may look different, because Visual Studio 2010 is able to import settings from older versions.


Figure 1-8
Referenced Screen

Choosing Your Development Profile

Because Visual Web Developer Express targets people new to ASP.NET development as well as seasoned web developers, you can choose among different developer profiles: Basic Settings, Code Optimized, and Expert Settings. In Basic Settings mode, many menu items you don’t frequently use have been hidden or are placed in their own sub menu. The Code Optimized profile is great for pure coding sessions where you’re not interested in many of the design features of VWD. It hides items like the Toolbox and the Properties Grid, both shown in Figure 1-8. Expert Settings mode gives you access to the full functionality of VWD. You can switch between settings using the Tools | Settings menu. This book assumes you are using Expert Settings mode right from the beginning. You may not need all features you see right from the start but you sure will use most of them by the end of the book. Since the menu items change location depending on the profile you choose, I decided to use Expert Settings mode right away, to make it easier to refer to a specific menu item or feature.

The Main Menu

At the top of the application, right below the Windows title bar, you see the main menu. This menu bar contains familiar items you find in many other Windows applications, like the File, Edit, and Help menus as well as menus that are specific to VWD, such as the Website and Debug menus. The menu changes dynamically depending on the task you’re working on, so you’ll see menu items appear and disappear as you work your way through the application. You can use the Help | Manage Help Settings menu to configure online and offline help. Offline helps needs to be installed first, while online help requires a connection to the Internet.

The Toolbar Area

Right below the menu, you see the toolbar area that is capable of showing different toolbars that give you quick access to the most common functions in VWD. In Figure 1-8, only two of the toolbars are enabled, but VWD comes with many other toolbars that you can use in specific task-oriented scenarios. Some toolbars appear automatically when you’re working on a task that requires a particular toolbar’s presence, but you can also enable and disable toolbars to your liking. To enable or disable a toolbar, right-click an existing toolbar or the menu bar and choose the toolbar from the menu that appears.

The Toolbox

On the left of the main screen, tucked away at the border of VWD, you see the tab for the Toolbox. If you hover your mouse over the tab, the Toolbox folds out, giving you a chance to see what it contains. If you click the little pin icon in the upper-right corner of the Toolbox (or any of the other panels that have this pin icon), it gets pinned to the IDE so it remains open.

Just as with the menu bar and the toolbars, the Toolbox automatically updates itself to show content that is relevant to the task you’re working on. When you’re editing a standard ASPX page, the Toolbox shows the many controls you have available for your page. You can simply drag an item from the Toolbox and drop it on a location of your page where you want it to appear. These controls are discussed in great detail in Chapter 4.

The Toolbox contains multiple categories with tools that can be expanded and collapsed as you see fit to make it easier to find the right tool. You can also reorder the items in the list, add and remove items from the Toolbox, and even add your own tools to it. Customizing the IDE is discussed later in this chapter.

If the Toolbox is not visible on-screen, press Ctrl+Alt+X to open it or choose View | Toolbox, provided you have chosen the Expert Settings option in the Tools | Settings menu.

The two additional tabs below the Toolbox tab, CSS Properties and Manage Styles, are discussed extensively in Chapter 3.

The Solution Explorer

At the right of the screen, you see the Solution Explorer. The Solution Explorer is an important window because it gives you an overview of the files that comprise your web site. Instead of placing all your files in one big folder, the Solution Explorer enables you to store files in separate folders, creating a logical and organized site structure. You can use the Solution Explorer to add new files to your site, move existing files around using drag and drop or cut and paste, rename files and delete them from the project, and more. Much of the functionality of the Solution Explorer is hidden behind its right-click menu, which changes depending on the item you right-click.

At the top of the Solution Explorer, you see a small toolbar that gives you quick access to some functionality related to your web site, including opening the Properties Grid for the selected item, refreshing the Solution Explorer window, an option to nest related files, and two buttons that allow you to copy and configure your web site. Most of this functionality is discussed later in the book.

You can access the Solution Explorer by choosing View | Solution Explorer from the main menu or by pressing Ctrl+Alt+L.

The Database Explorer

This window, hidden behind the Solution Explorer in Figure 1-8, enables you to work with your databases. If you have a commercial version of Visual Studio, such as Visual Studio 2010 Professional, this window is called the Server Explorer and may be located at the left of your screen.

The Database Explorer is discussed in more detail in the chapters about databases, starting with Chapter 12.

The Properties Grid

With the Properties Grid, you can view and edit the properties of many items in Visual Studio, including files in the Solution Explorer, controls on a web page, properties of the page itself, and much more. The window constantly updates itself to reflect the selected item. You can quickly open the Properties Grid by pressing F4. This same shortcut can be used to force the Properties Grid to show the details of a selected item.

The Document Window

The Document Window is the main area in the middle of the application. This is where most of the action takes place. You can use the Document Window to work with many different document formats, including ASPX and HTML files, CSS and JavaScript files, code files for VB and C#, XML and text files, and even images. In addition, you can use the same window to manage databases, create copies of your site, view the pages in your site in the built-in mini-browser, and much more.

At the bottom of the Document Window in Figure 1-8, you see three buttons called Design, Split, and Source. These buttons appear automatically when you’re working with a file that contains markup, such as ASPX and HTML pages. They allow you to open the Design View of a page (giving you an idea of how the page will look in the browser), its Markup View (the HTML and other markup), or both at the same time. How this works is explained in more detail in Chapter 2, but for now, it’s important to realize you can switch between Markup, Split, and Design View by clicking the appropriate buttons. The Markup View is also often called the Source View or Code View window. However, to avoid confusion with the code editor that is used to edit Code Behind files, this book uses the term Markup View exclusively.

The Document Window is a tabbed window by default, which means it can host multiple documents, each one distinguished by a tab with the file name at the top of the window. The right-click menu of each tab contains some useful shortcuts for working with the file, including saving and closing it and opening the file’s parent folder in Windows Explorer.

To switch between documents, you can press Ctrl+Tab or you can click the down arrow in the upper-right corner of the Document Window, next to the Solution Explorer, shown in Figure 1-8. Clicking the down arrow reveals a list of open documents so you can easily select one.

Another way to switch documents is to press Ctrl+Tab and then hold down the Ctrl key. On the window that pops ups, you can select a document you want to work with in the right-hand column. You can then use the cursor keys to move up and down in the list with open documents. This makes it super easy to select the correct file.

On the same dialog box, you see a list with all active tool windows. Clicking one of the windows in the list will show it on-screen, moving it in front of other windows if necessary.

The Start Page

Whenever you start up VWD, the Start Page is loaded in the Document Window. With the Start Page, you can quickly create new or open existing web sites and other projects. The Start Page also provides a number of links to related news and information about web development.

To get a feel for how you can use all these windows, the following Try It Out shows you how to build a simple web page that contains a few ASP.NET Server Controls.

This Try It Out exercise guides you through creating a new web site with a single page that contains a number of ASP.NET Server Controls. You see how to use windows like the Document Window and the Solution Explorer, and how to use the Toolbox and the Properties Grid to add ASP.NET Server Controls to the page and change their looks.

  1. Make sure Visual Web Developer 2010 is started.
  2. If you’re using the Express edition, choose Tools | Settings and choose Expert Settings to turn on the developer profile that gives you access to the full feature set of VWD.
  3. On the File menu choose New Web Site. If you are using a commercial version of Visual Studio, you may have to choose File | New | Web Site instead. This triggers the New Web Site dialog box.
  4. In this dialog, make sure that ASP.NET Empty Web Site is selected and not the ASP.NET Web Site item that you used in a previous exercise. Ensure that File System is chosen in the Web Location drop-down list. Click OK to create the new site.
  5. Next, right-click the new web site in the Solution Explorer. Make sure you click the uppermost element that says something likeC:\..\WebSite2\. It’s the highlighted element in Figure 1-4. From the context menu that appears, choose Add New Item.
  6. In the new window that appears, click Web Form and type ControlsDemo as the name. The ASPX extension is added for you automatically when you click the Add button. You can leave the other settings in the dialog box at their default settings. The page should open in Markup View, showing you the default HTML, like the <html>, <head>, <title>, and <body> elements that Visual Web Developer adds there for you automatically when you create a new page.
  7. Switch the page to Design View by clicking the Design button at the bottom of the Document Window.
  8. If the Toolbox isn’t open yet, press Ctrl+Alt+X to open it or hover your mouse over the Toolbox tab to show it and then click the pin icon to make the Toolbox visible at all times. Drag a TextBox and a Button from the Toolbox into the dashed area in the Design View of the page. You should end up with a Design View that looks similar to Figure 1-9.
    Figure 1-9Referenced Screen
  9. Right-click the button in Design View and choose Properties. In the Properties Grid, locate the Text property under the Appearance category (shown in Figure 1-10) and change it from Button to Submit Information. As soon as you press Tab or click somewhere outside the Properties Grid, the Design View of the page is updated and shows the new text on the button.     Figure 1-10Referenced Screen
  10. Press Ctrl+F5 to open the page in your default browser. Note that it’s not necessary to explicitly save the changes to your page (although it’s a good idea to do this often anyway using the shortcut Ctrl+S). As soon as you press Ctrl+F5 to run the page, VWD saves all changes to open documents automatically.
    Note Note
    If you don’t like this behavior, you can change it. Choose Tools | Options from the main menu. Then make sure that Show All Settings is checked, open the Projects and Solutions node, and choose Build and Run. In the Before Building list, you can change the way VWD behaves when you open a page in your browser.
  11. Type some text in the text box and click the button. Note that after the page has reloaded, the text is still displayed in the text box. Other than that, not much has happened because you didn’t write any code for the button yet.
Tip Tip
When you dragged the Button and the TextBox from the Toolbox on the page in Design View, VWD added the corresponding code for you in Markup View automatically. Similarly, when you changed the Text property of the button in the Properties Grid, VWD automatically updated the markup for the control in Markup View. Instead of using the Properties Grid, you could also have typed the text directly between the quotation marks of the Text property in Markup View.

After changing the Text property, your page should now contain this code in Markup View:

<asp:TextBox ID=”TextBox1” runat=”server”></asp:TextBox>
<asp:Button ID=”Button1” runat=”server” Text=”Submit Information” />

When you press Ctrl+F5 to view the page in the browser, the web server receives the request, the page is processed by the ASP.NET runtime, and the resulting HTML for the page is sent to the browser.

After you type in some text and click the button, the same process is more or less repeated: the web server receives the request, the page is processed, and the result gets sent back to the browser. When you click the button, you cause a postback to occur, where any information contained in the page — such as the text you typed in the text box — is sent back to the server. ASP.NET reacts to the postback by rendering the page again. However, this time it prepopulates controls, like the TextBox, with the values that were sent to the page.

Take a look at the resulting HTML for the page using the browser’s View Source command (rerun the page from VWD by pressing Ctrl+F5 if you already closed it). You should see code similar to this:

<input name=”TextBox1” type=”text” value=”Hello World” id=”TextBox1” />
<input type=”submit” name=”Button1” value=”Submit Information” id=”Button1” />

Just as with the earlier example, you can see that the resulting HTML is substantially different from the original ASPX markup.

Postbacks are an important concept in ASP.NET, and you see more about them in other chapters, including Chapters 4 and 9.

VWD hosts many more windows and tool panels than those you have seen so far. The next section briefly touches upon some of the windows you’ll most frequently use when building ASP.NET web pages. All of the windows mentioned are accessible from the main View menu in VWD if you’re using the Expert Settings mode.

Informational Windows

In addition to the windows that are visible by default when you start VWD, many more windows are available in VWD. You see most of them in action in the remainder of this book, but some are worth highlighting now. You access all windows that are discussed next from the main View menu.

The Error List

The Error List gives you a list of the things that are currently somehow broken in your site, including incorrect markup in your ASPX or HTML files and programming errors in VB or C# files. This window can even show you errors in XML and CSS files. The Error List shows its messages in three categories — Errors, Warnings, and Messages — that signify the severity of the problem. Figure 1-11 shows the error list for a page that has some problems with its CSS and XHTML.

Beginning ASP.NET4 in C# and Visual BasicFigure 1-11

The Output Window

When you try to build your site using the Build menu, the Output window tells you whether or not the build succeeded. If the build failed, for example because you have a programming error, it tells you why the build failed. In the commercial versions of Visual Studio, the Output window is used for other information as well, including the status of external plug-in programs. Building — or compiling — web sites is discussed later in this book, including Chapter 19, which deals with deployment of your web site.

The Find Results Window

The Find and Replace features of VWD are invaluable tools when it comes to managing the content of your site. You will often need to replace some text in the current document or even in the entire site. Find in Files (Ctrl+Shift+F) and Replace in Files (Ctrl+Shift+H) both output their results in the Find Results window, as shown in Figure 1-12.
Referenced ScreenFigure 1-12

Because having several informational windows open at the same time may take up precious screen space, it’s often a good idea to dock them. This way, only one of them is visible at a time, while you still have quick access to the others. You learn how to customize the IDE, including the docking of windows, next.

Get industry recognized certification – Contact us