Visual Studio widows for ASP.NET Web Application

After creating a new ASP.NET Web Application, Visual Studio leads you to something that looks like what we have in the screenshot below.


Let’s briefly explain what we have in this Visual Studio widows for ASP.NET Web Application

At the center of this window, is your work area; that is where you do the programming or see the design of your application, by default, when you first create an ASP.NET application in Visual Studio, Visual Studio creates a page called Default.aspx, this page is the standard name for ASP.NET index or homepage. And as you must have notices, it is this Default.aspx webpage that is opened in Source or code view already. (Take a closer look below)

Note: you can work in Design, Split orSource view for the opened web page.

Source view: is the code view, as shown in the screenshot above.
Design view: enables you to drag object into the web page. (This generates code, just as shown in the Source view)
Split view: splits the view into two, with one side for design and the other for source code view.

You can click to switch in between either view by clicking on it.


This tutorial is about ASP.NET web application development; therefore I assume you've already covered HTML (click here to learn HTML), because almost everything in this Source code is HTML, except:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyWeb._Default" %>
(found in the head and form tag), which we will discuss later.


Solution explorer
The Solution explorer window allows us to organize and navigate the files in our project. As you can also see the Default.aspx webpage (Web Form) and its Default.aspx.cs (Code-behind file) as well as other folders and Web.config file which we will discuss later


Structure of an ASP.NET files

  • Web Forms: this is an ASP.NET webpage, web forms have a .aspx file extension. e.g Default.aspx, Contact.aspx (Default.aspx is the index, start or homepage of an ASP.NET web application) this often contain clientside script, such as HTML, JavaScript and CSS code; and (unique to ASP.NET page) Server control tags such as text boxes, check boxes, button, databound controls and more.

  • Codebehind file: this separate page, that contain the application logic; this file is closely ties to the Web Forms, for example the Default.aspx Codebehind file would be Default.aspx.cs (for C# programming) or Default.aspx.vb (for VB.NET programming).
    This way ASP.NET is able to encourage the separation of the GUI presentation area (Web Form) from the application logic (Codebehind file), although you can have or mix both in .aspx Web Form, but it’s not encourage.

Note: Default.aspx.designer.cs is autogenerated by Visual Studio, and it is adviced not to modify or edit its content.

For the rest of this tutorial we are going to use a Codebehind file (aspx.cs) to separate the application logic from the GUI (.aspx) presentation layout.


Next »