Advanced ASP.Net Pages

Build your Own Web Control

Introducing ASP.NET

New Features in ASP.NET 4.0

Developing Skins for Web Pages 

Last month we looked at the new features of ASP.Net over traditional ASP and other similar Web-scripting languages. We also created simple ASP.NET pages that demonstrated some of these features. In this second part of the series on ASP.Net, we’ll create advanced pages and understand some basic concepts of ASP.Net.

Namespaces
ASP.Net introduces Namespaces, a concept new to ASP programming. But what exactly are they? A namespace is a logical naming scheme for grouping related types. This means that objects that fall under a particular type will be found in the same namespace. For example, System.Data contains objects that allow your ASP.Net page to interact with databases. Namespaces are stored as assemblies on your hard disk in the form of DLL files. 

For more logical and hierarchical grouping, namespaces can contain other namespaces as well. For example, the System.Data namespace mentioned above contains two other namespaces: System. Data.SqlClient and System.Data.OLEDb. It is important to remember that using a higher-level namespace does not automatically include the sub- namespaces. 

Let’s first see how namespaces are included into the page itself. This is done by the Import page-level directive. The syntax for this command is:

<%@ Import Namespace = “System.Data” %>

Now when the ASP.Net Page is compiled (as mentioned in Introducing ASP.Net, page 82, PCQuest, July 2002, ASP.Net pages are compiled, not interpreted like classic ASP), all objects in that namespace become part of the page and are compiled with it. You can include as many namespaces to a page as you require. Let us look at some of the important namespaces in ASP.Net. 

Namespace: System 
This is the root namespace for the entire .Net architecture. It contains all the basic and generic classes and types, like integers, strings, dates and Object. ASP.Net pages automatically include the System namespace and it is not required to use an import directive for this. But, as all other namespaces fall under this one, you will have to import those as required.

Namespace: System.Web
This is probably the most important namespace for ASP.Net. It contains a lot of the objects that are intrinsic to ASP.Net such as Request and Response. It also contains some other namespaces that are used regularly in the pages.

Namespace: System.Web.UI
This is the namespace that contains all the UI elements for an ASP.Net page. Within this are the collection of classes for Web and HTML controls (like <asp:textbox/>). It also has objects and methods that allow you to create your own Web controls.

Namespace: System.Web.Services
This is a new feature for the Internet that allows anyone to access a Web application and retrieve data in a standard format—XML.

Namespace: System.Data
This allows connectivity to databases and provides objects that allow you to manipulate and display data. The sub-namespaces (System.Data.SQL Client and System.Data.OleDb) allow connectivity to MS SQL Server databases or any OLEDB compliant database respectively. These namespaces are part of ADO.Net. 

Namespace: System.XML
XML is a very important technology on the Web these days and is essentially so in ASP.Net. This namespace lets you use XML as if it were a standard database.

We’ll see how to use this namespace in the present and upcoming articles. We will also create our own namespaces for use within our pages later on in this series, so keep a look out for them.

Web Forms
The basic interactive framework on an ASP.Net page is a Web Form. It divides an ASP.Net page into the visual and code logic parts. It is built up of different controls as well as event handlers and coding routines. We took a look at a simple Web Form in the last article. Let’s revisit the example with a little more complexity.

<%@ Page Language=”VB”%>
<html>
<head>
<title>PCQ #2.1: Hello, Friend</title>
</head>
<body>
<form id=”frmTest” runat=”server”>
 Enter your name here please: 
<asp:textbox id=”txtName” runat=”server” /> <br/>
Select Your Gender: 
<asp:dropdownlist id=”ddSex” runat=”server”>
<asp:listitem>Male</asp:listitem>
<asp:listitem>Female</asp:listitem>
</asp:dropdownlist>
<asp:button id=”btnSubmit” text=”Send” runat=”server” onclick=”GetName”/>
<p><asp:label id=”lblMsg” runat=”server”/></p>
</form>
</body>
</html>
<script language=”vb” runat=”server”>
Sub GetName(sender as Object, e as EventArgs)
If (ddSex.SelectedIndex = 0) then
lblMsg.Text = “Hello, Mr. “ & txtName.Text
Else
lblMsg.Text = “Hello, Ms. “ & txtName.Text
End If
End Sub
</script>

Running this through your Web server gives you the results as shown in the screen shots. Let us take a look at what happens when the page is loaded and run.

  • l When the page is requested, the ASPX (and corresponding) files are located and sent to the ASP.Net engine
  • l If the page is already compiled, the cached output is loaded and the classes are instantiated, processed and a Response object is created that is returned to the browser as HTML
  • l When the form on the page is submitted back, fields on the HTML form set and create objects on the server with the values sent across 
  • l Any event-handlers written for the controls on the page are executed at the server and the page is rebuilt and sent back again.

If you’ve run the above example on your own, you’ll also see something happening on its own. The values that you submitted back to the server are not only getting displayed where you want them because of the script, but also the form controls are retaining the values sent back. To do this in classic ASP, you’d have to code the value for each control to read from variables yourself. And if you are a veteran ASP coder, you know that doing this for complex controls such as long drop-down lists can be a major headache. 

ASP.Net, on the other hand, does this automatically. This happens due to a new process called ViewState. Using a hidden form control, the page is able to remember the values sent across and display them as required for the control that sent it across. To see this, view the source of the page and look for a form field called __VIEWSTATE. In my pages this is what it looks like:

<input type=”hidden” name=”__VIEWSTATE” value=”dDwtMTY5MTUwMTgyMTt0PDtsPGk8MT47PjtsPHQ8O2w8aTw3Pjs+O2w8dDxwPHA8bDxUZXh0Oz47bDxIZWxsbywgTXMuIEFpc2h3YXJ5YTs+Pjs+Ozs+Oz4+Oz4+Oz7lStXdxgL5N1hubocFdwsJj7H4ww==” />
And the page returned has the following section of HTML code:
<input name=”txtName” type=”text” value=”Aishwarya” id=”txtName” /> <br/>
Select Your Gender: 
<select name=”ddSex” id=”ddSex”>
<option value=”Male”>Male</option>
<option selected=”selected” value=”Female”>Female</option>
</select><br/>

As you can see, both the input box and the select list have the correct values filled in or selected. So Web Forms can save you a lot of time and effort in building user input methods with enhanced functionality.

Code-Behind
Another new feature in ASP.Net Web Forms is the ability to separate content and code from one another. ASP did have this as a major advantage over, say Perl, in that it could allow developers to quickly add code content in the middle of HTML and design elements. However, in the long term this led to unmanageable code blocks weaving in and out of HTML, much like drivers in Delhi weaving in and out through traffic! ASP.Net now allows you to create “clean” pages that separate the code and the content and allow designers and developers to work independently but within a team to produce more manageable and organized code.

This is done by creating Code-Behind files. In this, the ASP.Net page is broken into (1) the .ASPX file that only contains the visual representation and elements for that page and (2) a code-behind file for the actual code. This code-behind file can be a simple text file, conventionally named with the same filename as the ASPX file to which it is a code behind file, but with the extension .ASPX.VB or .ASPX.CS for VB.Net or C#.Net respectively. It could also be a compiled class and stored in the bin subdirectory of your Web application. Now let’s take a look at how to create a code-behind file. 

Taking the same example as above, remove everything from the start of <script> to </script>. Also change the @Page directive at the top of the page so that the page looks like this:

<%@ Page Language=”VB” Src=”PCQ2-2.aspx.vb” Inherits=”myCBNM.myCB” %>
<html>
<head>
<title>PCQ #2.2: Hello, Friend as Code-Behind</title>
</head>
<body>
<form id=”frmTest” runat=”server”>
Enter your name here please: 
<asp:textbox id=”txtName” runat=”server” /> <br/>
Select Your Gender: 
<asp:dropdownlist id=”ddSex” runat=”server”>
<asp:listitem>Male</asp:listitem>
<asp:listitem>Female</asp:listitem>
</asp:dropdownlist><br/>
<asp:button id=”btnSubmit” text=”Send” runat=”server” onclick=”GetName”/>
<p><asp:label id=”lblMsg” runat=”server”/></p>
</form>
</body>
</html>

The Src attribute defines the name of the file that contains the classes and methods to be used. The Inherits attribute mentions the actual namespace and class within it for this page (in case you have more than one in one page). In this example, myCBNM is the namespace for my code-behind class called myCB.

Now, create a new file called PCQ2-2.aspx.vb and put the following into it.

Imports System
Imports System.Web.UI.WebControls
Namespace myCBNM
Public Class myCB: Inherits System.Web.UI.Page
 Public lblMsg as Label
Public txtName as TextBox
Public ddSex as DropDownList
Public btnSubmit as Button
Protected Sub GetName(sender as Object, e as EventArgs)
If (ddSex.SelectedIndex = 0) Then
lblMsg.Text = “Hello, Mr. “ & txtName.Text
Else
lblMsg.Text = “Hello, Ms. “ & txtName.Text
End If
End Sub
End Class
End Namespace

This creates a new class within a namespace, imports the other required external namespaces, defines variables for the elements on the page and runs the same procedure. If you run this new ASPX file through your Web server, you will see no difference in execution. However, you’ve ended up with a much neater coding model and the designer can work on the design on the ASPX page while the developer can modify the code in the code-behind file independently. 

As you can see, ASP.Net introduces many new features and programming constructs that make creating dynamic Web pages not just more logical, but also more structured and manageable. 

Before I sign off for this month, let me introduce you to a small IDE from Microsoft that makes creating ASP.Net a breeze.

This is called ASP.Net Web Matrix and is available for download at www.asp.Net. You will also find a small review of it by me in this issue. So, until next month, where we’ll take a look at more new features to make your coding life simpler, happy programming. 

Vinod Unny is a Technology Consultant at Enterprise InfoTech

  • Follow PCQuest on
  • become a fan on
  • Stay updated via
  • RSS

LEAVE A REPLY

Notify me of follow-up comments via e-mail address

Post Comment

POPULAR

Survey Box

Now that Microsoft has finally discontinued support for Windows XP, which OS are you likely to upgrade to?

Send this article by email

X