{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
First Web Program (Web Project) in C# Explained
Summary
This article explains and dissects the pieces involved in creating the first web program in C# using the Web Project method (as opposed to the Web Site method).
 
Table of Contents

What is a web program in C#?

Creating a Web “Project”

Figure 1. First Web Application Project

The Generated Files

Figure 2. Solution Explorer for a newly generated web project

FirstWeb.sln

FirstWeb.csproj

App_Data

Default.aspx.*

Web.config

Code Discussion

Default.aspx

Listing 1. The code in Default.aspx

Default.aspx.cs

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

Default.aspx.designer.cs

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

Running the Program

Add a Label

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

Run the Program

Figure 4. Running the program

Other Articles

 
Article Series
Previous Article:
Test Your Knowledge: First Console Program in C# Explained
This article is part of the Series:
Article Series: First Programs in C# Explained
Next Article:
Test Your Knowledge: First Web Program (Web Project) in C# Explained

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

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FirstWeb._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FirstWeb._Default" %>

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

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace FirstWeb
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

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)

//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated by a tool.
// Runtime Version:2.0.50727.42
//
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace FirstWeb
{
    public partial class _Default
    {

        /// <summary>
        /// form1 control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
    }
}

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

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

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?

Take a Quick Quiz on this Article

1. Which of the following files is generated and maintained by the Visual Studio when programming for the web in C#?



: Visual Studio Designer maintains this
Question 1 of 5
Article Series
Previous Article:
Test Your Knowledge: First Console Program in C# Explained
This article is part of the Series:
Article Series: First Programs in C# Explained
Next Article:
Test Your Knowledge: First Web Program (Web Project) in C# Explained
Bookmark and Share This

More Articles With Similar Tags
How do you develop an ASP.NET program using the Web Project model?
icon-first-web-site-solution-explorer.jpg
This article explains and dissects the pieces involved in creating the first web program in C# using the Web Site method (as opposed to the Web Program method).
What is involved in developing a web-based program using the C# programming language with Web Site - Solution as the model.
This test has questions on developing first console (shell) based programs using the C# programming language.
icon-web-proj-site-dir-compare.jpg
Visual Studio 2005 and Visual Studio 2008 offer two options for creating an ASP.NET web program – a Web Project or Web Site. This article discusses the main reasons why you would choose one over the other.
About  Contact  Privacy Policy  Site Map