What is a web program in C#?

Creating a web program / application in C# includes using ASP.NET. The pieces (namespaces, classes, etc.) from the .NET Framework that provide web development functionality are called ASP.NET.

So, enormous amount of basic functionality that is needed for creating a web site or web project or web program is already available in the ASP.NET library (a collection of namespaces, classes, etc. from the .NET Framework). You will use the C# programming language to access that built-in functionality or develop your own custom functionality that makes your site stand out.

You can create a new web program using C# (and .NET/ASP.NET, Visual Studio 2008) in two different ways:

Creating a Web “Project”

Creating a Web “Site”

In this article, the Web Project solution is discussed. And in the following article, the Web Site solution is discussed:

First Web Program (Web Site) in C# Explained

And the following article discusses when is it appropriate to use a Web Project vs. Web Site:

Which one to use: Web Project or Web Site?

Creating a Web “Project”

To create a Web Project, choose File-New-Project menu to get to the New Project dialog box.

Figure 1. First Web Application Project

As shown in Figure 1, choose the ‘ASP.NET Web Application’ template under the ‘Web’ project type. The directory you specify will hold the solution (.sln) and project (.csproj) files.

The Generated Files

When you click OK, Visual Studio will generate a solution with a bunch of sub-directories and files underneath it.

Figure 2. Solution Explorer for a newly generated web project

Let’s take a look at the important files and directories created as a part of this FirstWeb solution.

FirstWeb.sln

This is the Solution (the entity that encloses everything – you can see it at the top of the Figure 2).

FirstWeb.csproj

This is the C# project file that includes all the other source files and sub-directories. In Figure 2, this is the entry that’s right below the Solution. If you chose the Web Site project template, you won’t see this project entry.

You can add additional projects to this solution.

App_Data

Right now, this is an empty sub-directory underneath this project. However, if you add database features to this project (i.e. add a database to store some information), those files will be stored in this directory.

Default.aspx.*

These three files that start with Default.aspx contain the code necessary to make one page (the Default page) work properly.

The file Default.aspx contains the HTML (and ASP.NET) code that makes up the user interface.

The file Default.aspx.designer.cs contains the C# code that is auto-generated for you by Visual Studio. This file contains the declarations for UI elements you add to this page.

And, finally, the Default.aspx.cs is the file where you add your C# code to add functionality and behavior to this page.

The code in these files is discussed in the last section of this article.

Web.config

This project also includes a configuration file named Web.config. It includes several configuration settings that affect various pieces of the web site. You can also add your own configuration settings to this file.

Code Discussion

Let’s take a look at the code generated in the Default.aspx.* files.

Default.aspx

Listing 1. The code in Default.aspx

The Default.aspx code shown in Listing 1 is mostly HTML code. As you can see, the HTML DOCTYPE tag with the complete signature is included. And below that is all pure HTML code. You have the standard tags – html, head, body, form, and div.

However, there is an @Page directive at the top of the file. This directive with its attributes tells the compiler that this is an ASP.NET page and it has a code file named Default.aspx.cs written in C#, and the class that contains the functionality is _Default. The AutoEventWireup says the events are automatically ‘wired’.

In essence, the Default.aspx file is the user interface file. As you add HTML controls or ASP.NET controls to this page, the Default.aspx grows with the appropriate elements.

Default.aspx.cs

Listing 2. The code (or code-behind) file Default.aspx.cs

This is where you programmatically change the properties of the user interface elements added to page; you will also write the methods that get called when various events are fired (click of a button, choosing an item in the list box, etc.)

In essence, you can write all the custom code that belongs to the page here. In bigger projects, of course, this page contains only the most necessary code with all the additional code (like database handling, etc.) coming from some other files/assemblies.

Default.aspx.designer.cs

Listing 3. The auto-generated designer file (Default.aspx.designer.cs)

You will not change this auto-generated C# file. As you keep adding ASP.NET controls to the page, this file grows with the additional declarations. In the older versions of C# (before version 2.0) and Visual Studio (before Version 2005), this code would be in the regular Default.aspx.cs file as well.

With the introduction of partial classes in C#, the code belonging to the same class can be split across multiple files. Here you see the “public partial class _Default’, which is used to hold the code generated by the Visual Studio designer. You will see the same class signature in the Default.aspx.cs file as well (you use this to write your own custom code).

So, the developer (you) and the designer (Visual Studio) can work independently without stepping over each other.

Running the Program

Add a Label

Let’s add a “Hello From FirstWeb” label to the Default page. There are several ways of doing this (typing that text in the HTML portion of the page, typing the declaration of the either an ASP.NET or an HTML control, etc.).

Here we will do it the visual way – dragging the Label control from the Toolbox on to the page and setting its Text property from the Properties window.

Figure 3. Adding a Label control to the Design surface of Default.aspx

As you can see Figure 3, we first moved to the Design surface of the Default.aspx file. We did this by clicking on the Design button on the bottom toolbar of the page.

Then we dragged the Label button from the Toolbox and dropped it on to the design surface. With that Label control selected, we went into the Properties window and typed “Hello From FirstWeb” into the Text property.

Run the Program

Figure 4. Running the program

In order to run this program, press F5 and the page shows up in the default browser, Internet Explorer. You can see the Label “Hello From FirstWeb” on the page.

Other Articles

In this article, the Web Project solution is discussed. And in the following article, the Web Site solution is discussed:

First Web Program (Web Site) in C# Explained

And the following article discusses when is it appropriate to use a Web Project vs. Web Site:

Which one to use: Web Project or Web Site?