Getting Started With Visual Studio and ASP.NET

Andrew Comeau   February 28, 2015   Comments Off on Getting Started With Visual Studio and ASP.NET

 

In my last post, I talked about the basics of ASP.NET and how webforms are designed to dynamically display and collect information. The next step is to show you how to get started creating a new site in ASP.NET.

The primary tool for creating an ASP.NET site is Microsoft Visual Studio, the IDE (Integrated Development Environment) that provides all of the tools for designing the webforms, compiling the code behind them and publishing them to a hosting service. Visual Studio comes in a number of editions, depending on the needs of the developer, from the free Express edition for students and individuals to the Ultimate edition for enterprise developers. The good news for the new developer is that the newest edition, Visual Studio Community, is equivalent to the Professional edition and is a completely free download. Microsoft has released this edition for individual developers and development teams of up to five programmers. Between these free tools and the wealth of information available online, the only cost to the beginning programmer is time and commitment.

Installing Visual Studio Community

The download at the above link is actually a small installation program that will download the rest of the Visual Studio package from Microsoft’s site so you need to have a stable Internet connection and a couple of hours to spare, just  to be safe. The full installation requires 20 GB of space on the hard disk and, while the download files might be compressed and the install can be left to run on its own after the initial options are set, that’s not a trivial installation. It took just over two hours on my Windows 7 PC.

If you are not running Internet Explorer 10 or above, you will get a warning when you first run the installer. The explanation page lists the problems that might be encountered but none of these really apply to most people who are new to ASP.NET and many only apply to Windows 7.  The installation also includes a few optional features such as the SQL Server Data Tools and the Silverlight Development Kit. These are selected for installation by default and I chose to leave them checked.

While the Visual Studio install is self-explanatory, it is a large piece of software so make sure your Internet connection is sound and set aside some time.

While the Visual Studio install is self-explanatory, it is a large piece of software so make sure your Internet connection is sound and set aside some time.

There is also an optional sign-in with your Microsoft account, if you have one. This syncs your Visual Studio settings on various computers if you have more than one and connects you to other Microsoft developer services.

Examining the IDE

If you’ve installed Visual Studio, you can follow along with the project I create in the rest of this article and the next to build your first ASP.NET project.

When you first open Visual Studio, you will probably see a screen that asks you to select your development preferences in terms of what language you want to work with. After that, it will open to the Start Page which presents a selection of links to helpful articles as well as the choices to start or open a project. VS Community enables you to create a wide range of applications from console and forms apps for the Windows Desktop to the ASP.NET web applications that we’re looking at here

As a side note, if you select the New option from the File menu at the top of the screen, you’ll notice that you have the option of starting a web project or a web site. Either of these include ASP.NET but web projects are the preferred choice at this point. This article from Microsoft explains the difference between the two but the upshot is that web application projects are generally more capable and full-featured so it’s best to stick with those.

Selecting ‘New Project’ from the Start Page, you should see something like this.

newproject

You’ll see that I’ve selected the ASP.NET Empty Web Application for this demonstration. There are a number of options depending on the type of project you’re creating and what features you want pre-installed in the app but this is the simplest one and I want you to see how to build a simple application from scratch.

At the top of the dialog, you’ll notice a dropdown box specifying what version of the .NET framework that you want to use; in this case, I’ve selected 4.5.1. The .NET framework refers to the massive collection of libraries including all the classes and functionality that are available to you as a .NET developer. This framework is continually being developed like any software and new versions are occasionally released, more or less in conjunction with new versions of Visual Studio. VS 2013 supports versions of the .NET framework going back to version 2.0 which enables you to work on older code if necessary or to develop applications for environments that might not support the newer versions.

Visual Studio 2013 Community IDE

Visual Studio is highly configurable with windows that can be displayed and positioned to show every aspect of the project.

 

As with other IDEs, Visual Studio is made up of one large work area with smaller windows that can be opened and positioned as needed. The Solution Explorer which shows all of the files and components within the solution and the Properties window are open by default. Selecting the View menu from the top shows the list of other windows that you can access as you become familiar with Visual Studio.

Visual Studio projects are stored and organized as Solutions (with the SLN extension for the main file). Each solution can contain multiple projects of different types and even different languages. for example, a single solution could contain both a web application to be deployed on a hosting service and a Windows app intended to access the same data as the web app. It could also contain a class library project to encapsulate many of the functions used in the other apps into a DLL that can be maintained separately from the other projects as needed.

Visual Studio 2013 Community IDE

One of the features of Visual Studio 2013 is the ability to preview solution items such as classes and config files without opening them for editing.

 

One of the new features in VS 2013 is the item preview. When you select an item in the Solution Explorer as I’ve selected the web.config file in the screenshot above, it will automatically preview in the work area and you’ll see it’s selection tab over at the right next to the Solution Explorer title bar. If you double-click on an item or edit the item while in Preview mode, it will open for editing and that tab will switch over to the left side.

Adding Items to the Project

The best way to start learning about ASP.NET is to jump right in and start creating a project. In this example, we’re going to create a simple web application that will maintain a list of quotes and display a quote at random on the page. This is based on an example from the previous article and a feature I had on one of my old sites. These quotes have to be stored somewhere and a SQL database would be overkill for this purpose so we’re going to use an XML file stored within the website.

First, let’s create a master page. Master pages provide a template for other pages on the site and enable you to maintain a consistent look and feel across groups of pages. To add one to the project, right-click on the project name in the Solution Explorer and select Add >> New Item or just use the CTRL-SHIFT-A key combination, scroll down and select Web Forms Master Page. Visual Studio will suggest a name for the new master page and you can accept or change it before clicking Add.

Visual Studio 2013 master page

The basic Master Page markup is very simple and familiar to anyone who has worked with HTML.

The basic master page markup is not much different from a basic HTML page with the exception of the master page directive at the top and the ContentPlaceHolder controls which provide a way for any child pages to insert content within the layout.

Page Directives

Let’s take a look at the page directive line for a minute. If you place the cursor at the end of the line before the percentage sign and hit the space bar, you’ll see a dropdown list of possible settings that you can apply through this line. The default settings do the following:

  • Identifies the directive as a as a master page directive.
  • Identifies the language used in the CodeBehind.
  • The AutoEventWireup setting, when set to True, directs the page to look for events in the CodeBehind that match the events specified in the markup. This can also be done in the CodeBehind when this setting is set to False.
  • Identifies the CodeBehind file.
  • Defines the code class that the page inherits. This class is contained within the CodeBehind file but can have a different name which is the reason for the distinct setting.

In C#, most if not all code is stored within classes that encapsulate and organize functionality. Code files (with the .cs extension) within Visual Studio can contain multiple classes and classes can be split between multiple files. ASP.NET doesn’t really care in what file a class is located as long the functions and other elements referenced are defined somewhere.

Adding a Style

Just like with any other site, you can add CSS either to the page itself or through a link to an external CSS file. You can create your own styles if you’re a CSS guru or you can download and adapt CSS from other places. For this demo, I’ll use a a theme called Handcrafted that I downloaded for free from Template.co, a source for several hundred themes offered under the Creative Commons license.

You can create as many folders as you want under a project in order to organize your files and content and I find it a good idea to create a folder specifically for styles and themes since they often include both CSS and graphics files. As before, just right-click on the project in the Solution Explorer, select Add >> New Folder and name it as you see fit.

There are two ways of adding existing files to a project such as a style that you’ve downloaded:

  1. Right-click on the folder and select Open Folder in File Explorer. Then you can copy the files to the folder through Windows. You will need to select View >> Refresh from the top menu in Visual Studio to see the files within the Solution Explorer and you will need to right-click any files that you want your project to work with and select Include in Project.
  2. You can also right-click the folder and select Add >> Existing Item or use the SHIFT-ALT-A keyboard shortcut to add files. They will automatically be included in the project. If you have subfolders you want to add, however, this could get tedious.
explorer-style

If you don’t see files that you’ve added to a project through the File Explorer, be sure the Show All Files option is checked in Solution Explorer.

In the screenshot above, I’ve added the theme to the project and included the style.css file and the images folder and its contents in the project. To add the style sheet, simply open the page you want to attach it to for editing,  select Format >> Attach Style Sheet from the top menu and select the CSS file from the dialog that appears. You can also insert it manually by changing the markup directly.

You will still need to apply the necessary divs to the master page markup in order to use the formatting provided by the CSS file. Downloaded themes might come with sample HTML files to demonstrate their use. The markup below shows how I’ve incorporated the theme into the master file.

theme-markup

Existing CSS themes can be be easily applied to a master page layout.

Notice the placement of the ContentPlaceHolder control that’s highlighted. I want the styling for the primary page content from the CSS file to apply to any content on the child page so I’ve kept that control within the div with the appropriate ID. This theme also has a sidebar so I’ve placed the next ContentPlaceHolder within that. The Visual Studio editor has a lot of helpful features for working with code including automatic highlighting of corresponding tags and collapsible code sections as you can see above.

By clicking on the Design button at the bottom of the markup area, you can see an approximation of how the design will look. While this is not exact, it’s helpful in eliminating any major problems. In the screenshot below, you can see the ContentPlaceHolder for the page content as well as the one for the sidebar. You could enter content in these on the master page and then, on the child page, either of these placeholders could be filled with new content or defaulted to the content supplied by the master page. This would be especially handy with the placeholder in the sidebar.

Visual Studio 2013 design view

The Design view of webforms, including the master page, enables a first glance at what the completed page will look like to the site visitor.

 

So, now we have an ASP.NET site with a master page and a theme applied. Before we can run it or publish it, however, we need to add a child page or two, including the Default.aspx home page. That’s coming up in the next chapter.

 


If you would like more information on working with CSS, I can recommend CSS3: The Missing Manual by David Sawyer McFarland. This book provides a good overview of beginning through advanced topics for people at all stages of learning. It’s available in both paperback and Kindle formats.

I can also recommend Sams Teach Yourself ASP.NET 4 in 24 Hours by Scott Mitchell and Microsoft Visual C# 2012 Step By Step by John Sharp. These books will take you further into the process of designing professional websites and coding with C#.

Sign up for our newsletter …

Categories

About Andrew Comeau

Organizer of the Ocala I.T. Professionals. Software developer and consultant based in Ocala, Florida.