Mt. San Jacinto College Computer Information Systems
Minimize header.

Tutorials: Programming: Tools

Visual Studio

Visual Studio

Tutorials In This Section


Visual Studio Basics

Introduction

Microsoft's Visual Studio is an integrated development environment (IDE) that can be used for many purposes including: writing, compiling, and deploying C++ and C# programs, developing and publishing ASP.NET Web applications, even creating applications which run on any device (server, workstation, tablet, phone, and other misc. embedded systems) and any operating system (Windows, Windows RTM, Android, Mac OS X, and iOS).

In order to build Web sites and apps you will be interacting with the Visual Studio (VS) graphical user interface (GUI) shown in the figure below. This tutorial will cover basic VS GUI operations to help familiarize you with components and features you will use throughout the Internet Authoring and CIS C# and C++ Programming courses you take here at MSJC.

Tip: Click the image below to view it at a larger size.

The Visual Studio GUI with its major components labeled.
The Visual Studio graphical user interface (GUI).
Table of Contents

The Visual Studio menu bar is a chameleon in that it dynamically changes the available options depending on what you are working on. In the three menu figures below you can see examples of the ever changing Visual Studio Menu bar.

If, when you open Visual Studio, a WEBSITE menu option does not appear on the menu bar as seen in figure 1. You must first open a Web site by using the keyboard shortcut Shift + Alt + O or by selecting Open Web Site from the FILE menu. Once you have a Web site open in Visual Studio you will see a WEBSITE menu option appear as shown in figure 2; also notice that a Format menu is added. In figure 3 you can see that the Visual Studio menu bar has changed again this time adding a Table menu; this menu appears when you are editing in the Design View of the Document window.

Menu bar when no Website is open.
Figure 1: The Visual Studio menu bar when no Website is open.
Menu bar when a Website is open.
Figure 2: The Visual Studio menu bar when a Website is open.
Menu bar when editing a Website in Design View.
Figure 3: The Visual Studio menu bar when editing a Website in Design View.
Table of Contents

Toolbars

The Standard toolbar
Visual Studio 2013 Standard toolbar. 
The Formatting toolbar
The Formatting Toolbar.
The HTML Source Editing toolbar
The HTML Source Editing toolbar.
The Layout toolbar
The Layout toolbar.
The Text Editor toolbar
The Text Editor toolbar.
The Web One Click Publish Toolbar

In order to open the Web One Click Publish toolbar first click and open the View menu, then select the Toolbars option, locate and click on the Web One Click Publish option from the flyout menu that appears. The Web One Click Publish toolbar should now be showing in the toolbar area at the top of your Visual Studio GUI under the Menu bar.

The Layout toolbar.
Figure 10: The Web One Click Publish toolbar.
Links of Interest:
Table of Contents

The Solution Explorer Window

Image of the Solution Explorer tab.

Once you have a Web site or a Project/Solution folder open in Visual Studio all of the files that are included in the Web site or Project/Solution will be listed in the Solution Explorer window. In a default configuration of Visual Studio the Solution Explorer is located on the right-side of the Visual Studio program window, usually it is closed and only displays as a tab. Click on the Solution Explorer tab to open it. Once it is open if you click elsewhere in the Visual Studio IDE, the Solution Explorer windows automatically closes to give you more room to work on your open document(s).

Image of the Solution Explorer window with the push pin in its pinned open position.

If you want the Solution Explorer window to remain open when you're clicking elsewhere in the IDE, then click the Push Pin icon in the Titlebar of the Solution Explorer window to "pin it" open. To change it back to where Solution Explorer automatically closes when not in use, just click the push pin again, it will twirl to a horizontally oriented push pin and the Solution Explorer window collapse immediately back to its tabbed position.

 Image of the Solution Explorer Toolbar and Search Box.

Just below the Solution Explorer Titlebar is the Solution Explorer Toolbar which has some handy tools that you can use to manipulate and locate files within the Solution Explorer window. The icon that looks like a house is the Home button. If you have scrolled up or down in the Solution Explorer and want to quickly go back to the last selected folder or file in the Solution Explorer, just click the Home button.

To the right of the Home button is the Pending Changes Filter button which lets you filter the list of files you are viewing in the Solution Explorer so that you will only see a list of the files currently open in the Document window or a list of files that have been modified and need to be published to the Web server where the Web site's files are being stored for public viewing. This is an important concept for Web developers to remember, if you make changes to one or more Web site files in Visual Studio those changes only exist locally on the computer where you are working; in order for the public (and your instructor) to see any changes you have made to your files, they need to be published to the Web server first (see the Visual Studio Publishing tutorial for more on this).

To the right of the Pending Changes Filter button is the Sync With Active Document button. Clicking this button quickly locates the file for the open document (the one you're editing in the Document window) in the Solution Explorer window.

To the right of the Sync With Active Document button is the Refresh button. This button will refresh the Solution Explorer window to display newly added files. The most common usage for this is if you add files to a Web site or Project/Solution outside of Visual Studio; e.g. while copying files from one folder to another using the Windows File Manager. By the way you can also copy files from your Windows File Manager directly into the Solution Explorer to add new files to your Website or Project/Solution if you like. This a very efficient method for quickly grabbing files from one Web site or Project/Solution and copying them into your currently open Web site or Project/Solution in Visual Studio.

The next three buttons in the Solution Explorer toolbar are used for Expanding, Collapsing, or Nesting files in the Solution Explorer window. An example of a nested file would be a code-behind file for a Web Forms or Windows Forms parent file. After that is the View Code button which will open the code-behind file for a Web or Windows Form file. The wrench icon next to it is the Properties button which will open up the Properties windows and display the properties for the selected file in Solution Explorer.

The final button is the Preview Selected Items toggle button. When it is toggled to the on state and you click a file in the Solution Explorer the file will be opened in a Preview window. To turn this option off, just click the Preview Selected Items button to turn it off and the next time you click a file in the Solution Explorer it will not be show in a Preview window. Finally, just below the Solution Explorer Toolbar is the Search Box which allows you to type a filename, press Enter on the keyboard or click the Magnifying Glass icon, and all matching instances of that file name will be displayed in the Solution Explorer window.

Can't Find The Solution Exploror Window?

If you do not see the Solution Explorer window it may have been closed accidentally. In this case you need to open the View menu from the Visual Studio Menu bar and choose Solution Explorer from the list of options that appear to re-open it.

The open View Menu with the Solution Explorer option highlighted.
Table of Contents

The Document Window

The Document Window is where you edit your open documents. Depending on which VS editor you're using at the time you may have the option of viewing your code in a Design View in addition to your Source View and you also have the option of viewing both views, Source View and Design View, simultaneously in a Split View which can also be configured to display the split vertically or horizontally which is the default split view. The Document Window also provides several other helpful features like line numbers, word wrap, automatic brace completion, and a navigation bar which helps in debugging and quickly locating sections of your code.

Changing Views

When editing a document in an editor which supports Design View you can change the current view by clicking on one of the View buttons at the bottom of the document window. The Design button displays only the Design view in the Document Window, the Source button changes the Document Window to display the Source Code view only, and Split view allows both the Design and the Source Code views to be displayed simultaneously in either a vertical or a horizontal split.

 The HTML (Web Forms) Editor View buttons.
Figure 11: The HTML (Web Forms) Editor View buttons are used for changing the view displayed in the Document Window
Editing Mode
Image showing the INS and OVR mode states shown in the VS Status bar.

If you find yourself typing in Source view or Design view and you are overwriting the existing characters, then you are editing in Overwrite mode. You can confirm what mode you are editing in by looking to the right end of the Status bar, it should read INS for insert mode, if it reads OVR then you are editing in overwrite mode. To change this mode press the Insert key on your keyboard. Each time you press the Insert key on the keyboard you will see the editing mode status change back and forth between Insert mode and Overwrite mode.

Table of Contents

Modifying the Visual Studio Graphical User Interface (GUI)

Here are a few helpful tips on options you can change in Visual Studio in order to help increase your Web development productivity.

Setting the HTML (Web Forms) Editor as the Default Editor for html Files

By default, Visual Studio opens HTML files with the extension of .htm or .html using its basic text editor, which means you have no Design view available while editing your HTML documents, initially. To change this default behavior you have two choices:

  1. Use the Solution Explorer Open With... menu option
  2. Changing the setting in the Tools --> Options dialog box
Solution Explorer Method
 Image of the Open With... menu in Solution Explorer.
Figure 2: The context menu that appears when you right click on an html file in the Visual Studio Solution Explorer.

Step 1: In the Solution Explorer window right-click on any file that has a file extension of .htm or .html.

Step 2:  From the menu that appears click on the Open With... option as shown in figure 2.

Step 3: When the Open With... dialog box opens you will see a list of editors appear. Click to select the HTML (Web Forms) Editor choice. Not the HTML (Web Forms) Editor with Encoding choice.

Step 4:  Once you have the HTML (Web Forms) Editor option selected, click on the Set As Default button. You should see the word Default show up next to your selected HTML (Web Forms) Editor choice in the list of options.

Step 5:  To finish the process click on the OK button, and your document should open in the HTML (Web Forms) Editor. You will know if it has opened in the HTML (Web Forms) Editor if you the three choices: Design, Split, and Source in the bottom-left corner under the Document window.

 Image of the Open With... dialog box.
Figure 3: The Open With dialog box with the HTML (Web Forms) Editor selected and set as the default editor.

Note: You can also change the split view from horizontal to vertical, read Configuring Split View to learn how.

Tools --> Options Dialog Box Method

Step 1: Open the Tools menu and click on Options.

Step 2: When the Options dialog box opens you will notice a Search box in the top left of the window, and underneath the Search box is a list of Visual Studio's configurable options organized into categories. The list of categories is called the Categories pane. In the Categories pane scroll down and click the triangle to the left of the Text Editor category to open its options list, then click on the File Extension option to select it. Your screen should now look like figure 4.

Image of the File Extexnsion option selected under the Text Editor category.
Figure 4: The Options dialog box showing the File Extension Editor screen selected.

The pane in the Options dialog box to the right of the category listings is the Settings pane. The settings in the Settings pane change depending on the option you have selected in the Category pane on the left. On the File Extension Settings pane you can assign which of the many Visual Studio text editors you want to open a particular file extension.

The File Extension Settings is a three-step process:

Step 1: Type in a file extension (in this case HTM or HTML) in the box under the heading Extension:

Step 2: Select the editor you want associated with that extension from the options in the drop-down-list box under the heading Editor:.

Step 3: Click the Add button to the right of the Editor selection to complete the mapping of the file extension to the selected editor. Figure 5 shows the File Extension settings pane with both .htm and .html mapped to the HTML (Web Forms) Editor.

Figures 5 and 6 below depict the three step process for assigning an extension to an editor and what the completed File Extension Settings pane should look like when you have completed the recommended changes for the CSIS 115A and CSIS 125A classes.

Image showing the three steps used to map a file extension to the HTML (Web Forms) Editor.
Figure 5: The three steps for assigning an extension to an editor
Image of the Text Editor File Extensions dialog box with htm and html mapped to the HTML (Web Forms) Editor.
Figure 6: The changes made to the File Extension settings
Configuring Split View

The HTML (Web Forms) Editor supports using the Design View to make changes to your HTML pages and it gives you have ability to split your Document window into two panes, a view known as Split View, displaying both Source View and Design View simultaneously. Figure 4 shows the Document window in Split View. Notice that the Source View and the Design View are arranged vertically side-by-side; to change how the HTML (Web Forms) Editor displays the Split View panes follow these steps:

Step 1: Open the Tools menu and select Options at the bottom of the menu.

Step 2: From the categorical list of options in the Options dialog box open the HTML Designer category and click on General.

Step 3: In the General settings pane under the heading Start Pages you can assign which view you see when first opening a document

Step 4: At the bottom of the HTML Designer General Settings pane is a check box allowing you to change your split view from the default horizontal view to vertical (side-by-side).

Image of the Split View option selected in the settings pane for the HTML Designer.

 

Table of Contents

How To Create a New Programming Project

The File/New Menu

When you want to create a new project, Website, or file in Visual Studio, click on the File menu in the menu bar, and choose the New option, you should see a context menu similar to the one shown in figure 12.

File --> New context menu displaying the options Project, Web Site, Repository, File, and Project From Existing Code.
Figure 12: The New context menu in Visual Studio 2017.
Creating a New Solution/Project

Visual Studio organizes projects into solutions. This means that if you don't already have a solution created previously where you are adding projects to, then in order to create a new project you will also need to create a new solution.

To begin the process of creating a new Solution/Project, as seen in figure 13, click on the Project option in the File-->New context menu or use the keyboard shortcut combination Ctrl+Shift+N.

File --> New --> Project menu selection.
Figure 13: Opening the New Project dialog box.
  1. Once the New Project dialog box appears (figure 14)
  2. Click on Visual C# under the heading Templates in the left column, if the Visual C# category is open and the Windows sub-category is selected, that's OK, just don't choose Universal, Windows 8, Classic Desktop or any of the other options from the Templates categorical options at this time.
  3. Next, click on Console Application in the middle column to select it as your project type.
  4. For the first project, change the Name: textbox to a meaningful project name or your current assignment name (no spaces in the name) - refer to assignment instructions for specific details of project names.
  5. Since this is the very first project your are creating, you are also creating a new solution folder on your storage device (most likely your C: hard disk drive) to contain one or more projects, so you may also need to change the Solution name to meet specific class assignment requirements (no spaces in the name).
  6. By default Visual Studio will save your solution to your Documents\Visual Studio version#\Projects folder, where version# represents the version of Visual Studio you are using. You can change the location of where your solution will be saved to by clicking on the Browse button and navigating to a different folder. However, if you are new to Visual Studio I recommend you leave the default folder location as it is. Also, it is important to verify that there is a check in the box that reads Create directory for solution. What this means is, using figure 14 as our example, a new folder named Lesson1 will be created in my Documents/Visual Studio 2015/Projects folder on my Y: storage device and the Lesson1 solution folder will contain all of the projects that I create for this solution - Lesson1-1 for starters. It is also important to know where your Lesson1 solution is being saved to so that later on you can locate it to re-open it at a later date, or in the case of submitting assignments you will need to be able to locate the assignment's solution folder so that you can zip it before submitting it to Canvas.
New Project dialog box dissection.
Figure 14:

MSDN: Creating Solutions and Projects

Table of Contents

How To Open An Existing VS Project

The most common way to open a Visual Studio project is to locate the .sln file which links to the project and double-click on it. Usually the .sln file is in the solution folder which contains the project folder shown in figure 15.

file-->open context menu listing project/solution, folder, Web site, Open from Source Control, File, Convert.
Figure 17: The File --> Open context menu.
Table of Contents

How To Locate Your Project Files

By default Visual Studio creates a Solution folder for each project you create; unless you are adding a project to an existing solution, in which case the new project folder is added to the original solution folder. The default location where VS creates new solution folders is on the default system drive (usually c: on most workstations) in the user's Documents folder in a new Visual Studio [version number] folder was created during installation of Visual Studio (like Visual Studio 2017), then in the Projects sub-folder. For example, if the solution was created using VS 2017, the solution folder would be located at c:\Documents\Visual Studio 2017\Projects.

Figure 18a shows the contents of the Solution folder named Lesson2 which is inside of the Projects folder of the Visual Studio 2017 folder which is inside the Documents folder in my OneDrive folder.

Image showing the contents of the Lesson 2 Solution folder which is comprised of the Lesson2 project folder and the Lesson2.sln file which can be used to re-open the Lesson solution at a later date.
Figure 18a:

Note: Projects can be opened and loaded into Visual Studio by double-clicking on the .sln (Solution) file for the project.

Figure 18b shows the contents of the Project folder named Lesson2 which is located in the Solution folder named Lesson2.

Image shoing the contents of the Lesson2 project folder.
Figure 18b:

Note: Projects can be opened and loaded into Visual Studio by double-clicking on the .csproj file for the project.

Table of Contents

How To Open a Web Site

Step 1: In Visual Studio, open the File menu, move your mouse cursor down to the Open option and then choose Web Site from the fly-out menu that appears as shown in figure 1. Notice that the keyboard shortcut for this task is Shift+Alt+O (that's the letter O not a number 0).

Screen capture of the Visual Studio File menu opened to the Open Web Site selection.
Figure 1: Opening a Web site using the Visual Studio File menu.

Step 2: Next you will see the Open Web Site dialog box. Use the File System tab to locate the root folder of your Web site, your CSIS115A folder and select it as shown in figure 2.

Open Web Site dialog box with the CSIS 115A Web site folder selected.
Figure 2: The Open Web Site dialog box with the CSIS 115A Web site folder selected.

Step 3: Click the Open button and your site's files and folders should appear in the Solution Explorer as shown in figure 3.

Open Web Site dialog box with the CSIS 115A Web site folder selected.
Figure 3: The Visual Studio Solution Explorer displaying the contents of the open CSIS115A Web site.
Table of Contents

How to Zip Your Solution Folder

In order to receive credit for projects you create in Visual Studio, you need to know how to zip the Solution folder which contains your project folder(s).

First you need to locate your Solution folder. Unless you changed the default location where Visual Studio saves projects, then your Solution folder should be located in your Documents\Visual Studio 2017\Projects folder. If you named your Solution folder Assignment1, then that will be the folder that contains a project folder for each project added to the Solution. It is the Solution folder that you want to zip — NOT an individual project folder.

When zipping your assignment for submission it is important that you zip the Solution folder and not an individual project folder, this is the most common error in student assignment submissions. In the figure below you see an example of the path to your Assignment1 Solution folder. Note that there are actually two Assignment1 folders. The top-most folder is the Solution folder and it has a child folder which is a Project folder also named Assignment1. It is the Solution folder (the topmost folder) you want to zip — NOT an individual project folder. This is mainly due to the fact that the Solution file used to open your Solution in Visual Studio is located in the Solution folder. Also note, in the past some students have zipped the Solution file and submitted it, this won't work because the solution file does not contain your project files.

Image showing the 3-step process for zipping a solution folder. 1, right-click solution folder; 2, click send to in the context menu that appears; click compressed (zipped) folder on the fly-out menu that appears.

Once you complete the steps above to zip your Solution folder, you will end up with a single file which has a zip icon on it to indicate it is a zip file. The files inside the zip cannot be run until the file is unzipped (its contents extracted), but you now have a code-safe file that you can upload to Canvas for your assignment submission.

 Image showing the completed zipped solution folder with text that reads upload this file to Canvas.
Table of Contents

Anatomy of a Solution (.sln) File

A .sln file is simply a text file which visual studio parses to learn of the version number of VS that was used to create the solution, the identification and location of the project(s) in the solution, and some global configuration info pertinent only to Visual Studio.

Essentially what this means to a developer is that if the solution file or the project folder are moved to different folders other than where Visual Studio originally put them, the .sln file which used to open your project no longer will. Of course you could always edit the .sln file in notepad, or other ASCII editor, and change the path statement for the project folder to reflect the new location of the actual project folder. Remember, the key is to indicate the proper path from where the solution file is located to where the project folder is located.

One other note: if you relocate the Solution folder, which contains the Solution file and the project folder(s), everything should work as expected because the initial path set for each project folder is as a sibling to the Solution file. Meaning that the Solution file and its related Project folders need to both exist in the same parent folder in order for the default path to work correctly.

In the image below you can see the reference in the Solution file for the project is folderName\ProjectName.csproj

Image showing the contents of the Lesson2.sln file.
Table of Contents