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.
⇑ 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.
⇑ Table of Contents
The Text Editor 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.
Links of Interest:
⇑ Table of Contents
The Solution Explorer Window
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).
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.
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.
⇑ 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.
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.
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
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:
- Use the Solution Explorer Open With... menu option
- Changing the setting in the Tools --> Options dialog box
Solution Explorer Method
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.
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.
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
Step 2: Select the editor you
want associated with that extension from the options in the
drop-down-list box under the heading Editor:.
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.
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).
⇑ 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.
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.
Once the New Project dialog box appears (figure 14)
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.
Next, click on Console Application in the middle column to select it as your project type.
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.
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).
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.
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.
⇑ 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.
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.
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).
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.
Step 3: Click the Open button and your site's files and folders should appear in the Solution Explorer as shown in figure 3.
⇑ 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.
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.
⇑ 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
⇑ Table of Contents