Web Development

Create an ASP.NET Web Forms website with Visual Studio 2013

Tony Patton describes what's included in a new ASP.NET Web Forms site created with Visual Studio 2013.

One interesting aspect of each new version of Microsoft's flagship IDE Visual Studio is how projects are created -- that is, what is included and how resources and files are organized. You can learn a lot about the product as well as the underlying platform by examining what is offered. Here's a look at what is included in a new ASP.NET Web Forms site created with Visual Studio 2013.

Starting from scratch

There are a variety of ways to create a new site with Visual Studio 2013, but I will follow the most straightforward path for this article. Figure A shows choosing New Web Site from the File menu, which presents the New Web Site window (Figure B). For the purposes of this article, I choose ASP.NET Web Forms Site from the templates presented in Figure B. Once the selection is made, the disk drive churns while the ASP.NET 4.5 site is created with the results shown in Figure C.

Figure A

VS2013WebFigA.jpg

Creating a new website in Visual Studio 2013

Figure B

VS2013WebFigB.jpg

The various options for creating a new website.

Figure C

VS2013WebFigC.jpg

The ASP.NET Web Forms site created by Visual Studio 2013.

A quick review of source code for Default.aspx displayed in Figure C is revealing if you've worked with Bootstrap, as the CSS classes like jumbotron are clearly from that framework; this should not be a surprise, as Microsoft has been touting Bootstrap integration for some time. In addition to Bootstrap, it uses a number of other standard or popular JavaScript frameworks such as jQuery and Modernizr.

Now that the project is created, let's take a closer look at what is included.

What are all of these files?

A quick review of the project's files shows the bootstrap CSS files located in the Content directory. It includes both the full (bootstrap.css) and minified version (bootstrap.min.css) -- the associated JavaScript files are in the Scripts directory. It is worth noting that it utilizes Bootstrap 3.0 -- it was a close call, as the latest version of Bootstrap was available not long before Visual Studio 2013 was released. The Bootstrap files are only a fraction of the files included in the project. The base directory's files and subdirectories are shown in the right-hand portion of Figure C. The following list provides more details on the folders.

  • Account: This directory contains the web pages used to provide authorization. It is the security and logon files, so there are files for user registration (Register.aspx), managing an account (Manage.aspx), logging in (Logon.aspx), and more.
  • App_Code: This is where shared source code (things like shared classes or business objects) should be created. By default, there are classes for working with Friendly URLs (routes) and ASP.NET Identity features as well as others.
  • App_Data: This folder contains application data files like XML or other data stores. It is empty when a project is created by Visual Studio 2013.
  • bin: This contains all of the compiled assemblies referenced by the application and the application itself. When the project is created, it is populated by all of the DLLs used by the application. This includes ASP.NET Identity, Entity Framework, OWIN, WebGrease, and many more (Figure D).
  • Content: This is where the Bootstrap and other CSS files are stored. You will most need to create your own CSS for new features or to override default settings, so CSS should be placed in this directory.
  • fonts: Any special fonts to be used by the application are here. By default, the Bootstrap offerings are included.
  • Scripts: This directory contains all of the JavaScript used in the application. Figure E shows you what is included when the site is created. The base directory has the necessary files for Bootstrap, jQuery, Modernizr, and the respond libraries. In addition, the WebForms subdirectory has JavaScript files for its features. You should place all of your custom JavaScript code in the base Scripts directory.

Figure D

VS2013WebFigD.jpg
The contents of the bin subdirectory for a newly created project.

Figure E

VS2013WebFigE.jpg

The contents of the Scripts subdirectory for the website.

As for the files on the site, there are web pages for content (About.aspx, Contact.aspx, and Default.aspx for the home page) and the standard ASP.NET application file (Global.asax). Figure F shows the site loaded (the default page), which clearly demonstrates a standard Bootstrap layout. The following list provides more details on the remaining files in the base project directory.

  • Bundle.config: This file is used to bundle resource files (like CSS and JavaScript) to reduce load time. This configuration file allows you to specify how resource types are bundled.
  • favicon.ico: A standard website feature that allows you to associate an icon with the site.
  • packages.config: This file is used to track installed packages and respected versions.
  • Site.master: The master page for the site.
  • Site.Mobile.master: The mobile master page for the site.
  • ViewSwitcher.ascx: This control can be used on pages to allow users to switch between desktop and mobile versions of a page. The control can be placed on a page or in the master page for all pages, and the user will have links for switching to mobile version or desktop if viewing on a mobile device.
  • Web.config: The configuration file for the site. A review of this file shows references to Entity Framework, WebGrease, and ASP.NET Identity included by default.

Figure F

VS2013WebFigF.jpg
The default page of the standard ASP.NET Web Forms site loaded in Chrome.

What does it mean?

A review of what is included with our project gives us a glimpse of the new .NET technologies as well as Microsoft's vision of web development. It may not be a surprise that new or enhanced features like the ASP.NET membership system (ASP.NET Identity), OWIN, and the Entity Framework are included by default, but I found it interesting to see DLL files for ANTLR and WebGrease and the Web.Optimization namespace as well. It seems Microsoft is serious about improving the performance of its platform and user experience, and the fact the company is embracing web standards and frameworks is wonderful.

While this article only scratches the surface of ASP.NET web development with an overview of a basic website, I hope it provides a starting point for asking lots of questions and learning more.

 

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

3 comments
aspatton
aspatton

1. It is a different project as it is a newer version of Visual Studio, but the plumbing would be basically the same since both are using 4.5.

2. I am not sure if it has changed, but Microsoft seems to be pushing developers to ASP.NET Identity.

kingkong88
kingkong88

Thanks for the informative article.  Questions:


1. By selecting .NET Framework 4.5, does it result in the exact same project as in VS 2012, or do I have to keep VS2012 in order to achieve that?


2. Is the membership provider the same one, SimpleMembershipProvider, used in 4.5?

Editor's Picks