Introducing ASP.NET

ASP.NET is a new and extended technology to the earlier classic ASP, introduced by Microsoft Corporation, which fully supports Microsoft’s .NET Framework. It supplies all the required user interfaces under the name "WebForms" and also works with all .NET languages like Visual C# .NET, Visual Basic .NET, etc. WebForms are used to create user interfaces for web pages. Till now, you’ve had to apply specific HTML tags for creating user interfaces and use an ASP scripting language such as VBScript or JavaScript.

But with the introduction of ASP .NET, you need not apply them any more. All you have to do is to call the custom GUI classes defined in the System.Web.UI.WebControls namespace of the .NET Framework. Moreover, System.Web namespace provides necessary classes, methods, and properties for developing client-server applications and the System.Web.UI namespace interacts with other .NET language like C#, VB .NET. Therefore, a C# file containing some methods or C# syntaxes can be easily called in your ASP applications. These topics will be examined in greater detail in the coming sections.
Benefits of ASP.NET

One major advantage of ASP.NET is that, you can apply the programming techniques of other .NET languages like C#, VB.NET etc. Hence, if you are conversant with any one language of .NET Framework, then it’ll be easy for you to write ASP.NET programs. Moreover, it eliminates the need for learning complex syntaxes. Another benefit of ASP.NET is that it supplies built-in controls for validations. Earlier you’ve to apply complex Java Scripts or VBScripts for validating form elements. Hence, all the essential tools for developing and deploying ASP applications is now under a single umbrella of Microsoft .NET.

Basic requirements

(1) Microsoft Windows 2000 Professional or Server, Microsoft Windows XP
(2) .NET Framework SDK
(3) Text Editor like Notepad
(4) Internet Explorer 5.5 and above
(5) Visual Studio .NET (Optional, but recommended)

Note: You have to install Microsoft Data Access Components 2.7 before installing .NET Framework SDK. You can download the same by clicking here. Please go through the additional notes given at the end of this article regarding Visual Studio .NET.

There are two phases involved in the ASP.NET development cycle, which are

(1) User Interface phase
(2) Coding phase

It’s the User Interface phase which we’ll call ‘WebForms’. So, before moving on to the coding phase, it’s essential for you to be aware of all types of user interfaces that .NET Framework provides. If you’re familiar with ‘WinForms’, then you are more likely to confuse it with WebForms. Keep in mind that WinForms are used to develop standalone GUI applications (Which can be executed by triggering the relevant .exe file), whereas WebForms are used to create Web based applications like Java Applets and for creating user interfaces for ASP applications.

Your First WebForm Program

Copy or enter the following code in Notepad and save the file as Firstwebform.aspx under Inetpub/wwwroot directory:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  1: <span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
  2: <span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">TextBox</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">TextBox</span><span style="color: #0000ff">&gt;</span>
  3: <span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

If you save the above file in a directory under the www root, then you have to configure for the directory alias using personal web manager. Please review the additional notes given at the end of this article regarding configuration of Personal Web Manager. The execution of this file is very similar to that of classic ASP. Only thing you’ve to remember is to supply the correct extension for ASP.NET, which is .aspx.

A WebForm control is created using the following syntax:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  1: <span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
  2: <span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ControlName</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ControlName</span><span style="color: #0000ff">&gt;</span>
  3: <span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

The runat attribute is compulsory without which your code will not compile correctly. From the above code, it can be seen that ASP.NET follows the syntax of XML.

READ  ASP.NET 4 and Visual Studio 2010 Released

Working with controls

ASP.NET provides a lot of controls for building powerful user interfaces. Important among them are Buttons, Radio Buttons, Check Boxes, List Boxes, and Combo Boxes. The .NET Framework also supplies advanced controls like Calendars, AdRotators, and etc. In the following sections, I’ll cover each of these controls with the help of simple examples.

Buttons

Buttons are used to trigger actions. Without buttons, we cannot do any sort of work on the form.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">  1: <span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
  2: <span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">Button</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;b1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">text</span> = <span style="color: #0000ff">&quot;OK&quot;</span> <span style="color: #ff0000">ToolTip</span> = <span style="color: #0000ff">&quot;Click here&quot;</span><span style="color: #0000ff">&gt;</span>
  3: <span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">Button</span><span style="color: #0000ff">&gt;</span> 
  4: <span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

Radio Buttons

With radio buttons you can select only one item at a time. The only thing you have to remember is that the GroupName attribute should be same for radiobuttons.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
Select your choice:<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RadioButton</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;r1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> 
<span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;Male&quot;</span> <span style="color: #ff0000">GroupName</span> = <span style="color: #0000ff">&quot;g1&quot;</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RadioButton</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RadioButton</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;r2&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;Female&quot;</span> 
<span style="color: #ff0000">GroupName</span> = <span style="color: #0000ff">&quot;g1&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RadioButton</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

CheckBoxes

Checkboxes enables you to select any number of items at a time. They can be activated either by clicking on it or by hitting the space bar.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
Choose: <span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;c1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;Television&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;c2&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;PC&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;c3&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> 
<span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;Telephone&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">CheckBox</span><span style="color: #0000ff">&gt;</span>&gt; 

DropDownList

This control looks like a typical combo box in Visual Basic. Users can select any one item at a time.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">DropDownList</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;d1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;India&quot;</span><span style="color: #0000ff">&gt;</span>India
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;d2&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;China&quot;</span> <span style="color: #0000ff">&gt;</span>China
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;d3&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;Russia&quot;</span><span style="color: #0000ff">&gt;</span>Russia
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;d4&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;USA&quot;</span><span style="color: #0000ff">&gt;</span>USA
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;d5&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;UK&quot;</span><span style="color: #0000ff">&gt;</span>UK
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">DropDownList</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

List Box

With List boxes you can select multiple items by scrolling up and down.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListBox</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;l1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;India&quot;</span><span style="color: #0000ff">&gt;</span>India
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;l2&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;China&quot;</span><span style="color: #0000ff">&gt;</span>China
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;l3&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;Russia&quot;</span><span style="color: #0000ff">&gt;</span>Russia
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;l4&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;USA&quot;</span><span style="color: #0000ff">&gt;</span>USA
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;l5&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">value</span> = <span style="color: #0000ff">&quot;UK&quot;</span><span style="color: #0000ff">&gt;</span>UK
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListItem</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ListBox</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

Image Button

You can create a button with an image on it. Try out the following code and observe the output:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">&quot;post&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ImageButton</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;b10&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> 
<span style="color: #ff0000">src</span> = <span style="color: #0000ff">&quot;f:\logo.gif&quot;</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">ImageButton</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">form</span><span style="color: #0000ff">&gt;</span> 

Calendar

This is an advanced control in ASP.NET. Your users can choose a date with the help of this control. Try out by copying the following piece of code:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">form</span> <span style="color: #ff0000">method</span> = <span style="color: #0000ff">“post”</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">Calendar</span> <span style="color: #ff0000">id</span> =<span style="color: #0000ff">&quot;c1&quot;</span> <span style="color: #ff0000">runat</span> = '<span style="color: #ff0000">server</span>&quot;&gt;&lt;/<span style="color: #ff0000">asp</span>:<span style="color: #ff0000">Calendar</span>&gt;
&lt;/<span style="color: #ff0000">form</span><span style="color: #0000ff">&gt;</span> 

Link Button

You can easily give a link to your button using this new LinkButton control.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">LinkButton</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;ib1&quot;</span> <span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;click me&quot;</span> 
<span style="color: #ff0000">href</span> = <span style="color: #0000ff">&quot;http://www.yahoo.com&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">Font</span>-<span style="color: #ff0000">Name</span>=<span style="color: #0000ff">&quot;Verdana&quot;</span> <span style="color: #ff0000">Font</span>-<span style="color: #ff0000">Size</span>=<span style="color: #0000ff">&quot;14pt&quot;</span> <span style="color: #0000ff">&gt;</span> <span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">LinkButton</span><span style="color: #0000ff">&gt;</span> 

Hyperlink

If you’re still using the typical <a> tag for creating hyperlinks, check out the code for this new .NET control:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">hyperlink</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">target</span> = <span style="color: #0000ff">&quot;_blank&quot;</span> 
<span style="color: #ff0000">navigateurl</span> = <span style="color: #0000ff">&quot;http://www.developer.com&quot;</span> <span style="color: #ff0000">text</span> = <span style="color: #0000ff">&quot;&lt;b&gt;Hello&lt;/b&gt;&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">hyperlink</span><span style="color: #0000ff">&gt;</span>

Validating Fields

Sometimes users may submit the form without filling in the required information. In order to avoid this, .NET supplies a control named RequiredFieldValidator, which checks the corresponding control attached to it. You will learn more about validations in a separate article.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RequiredFieldValidator</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;valid1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> 
<span style="color: #ff0000">ErrorMessage</span> = <span style="color: #0000ff">&quot;We need your email id&quot;</span> 
<span style="color: #ff0000">ControlToValidate</span> = <span style="color: #0000ff">&quot;t1&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">RequiredFieldValidator</span><span style="color: #0000ff">&gt;</span> 

AdRotator

You can randomly display advertisements by using AdRotator component. However, it involves several processes. Firstly, you have to create an XML file containing the listing as shown below:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;?</span>xml version = &quot;1.0&quot;<span style="color: #0000ff">?&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Advertisements</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Ad</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">ImageUrl</span><span style="color: #0000ff">&gt;</span>logo.gif<span style="color: #0000ff">&lt;/</span><span style="color: #800000">ImageUrl</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">TargetUrl</span><span style="color: #0000ff">&gt;</span>http://www.logo.com<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TargetUrl</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">AlternateText</span><span style="color: #0000ff">&gt;</span>Ok<span style="color: #0000ff">&lt;/</span><span style="color: #800000">AlternateText</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Impressions</span><span style="color: #0000ff">&gt;</span>80<span style="color: #0000ff">&lt;/</span><span style="color: #800000">Impressions</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">Ad</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Ad</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">ImageUrl</span><span style="color: #0000ff">&gt;</span>logo1.gif<span style="color: #0000ff">&lt;/</span><span style="color: #800000">ImageUrl</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">TargetUrl</span><span style="color: #0000ff">&gt;</span>http://www.microsoft.com<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TargetUrl</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">AlternateText</span><span style="color: #0000ff">&gt;</span>Microsoft<span style="color: #0000ff">&lt;/</span><span style="color: #800000">AlternateText</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Impressions</span><span style="color: #0000ff">&gt;</span>80<span style="color: #0000ff">&lt;/</span><span style="color: #800000">Impressions</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">Ad</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">Advertisements</span><span style="color: #0000ff">&gt;</span> 

You can modify this code by including your preferences. Make sure that both the XML file and the required images are in a same directory. The last step is to create a .aspx file with the following code:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">adrotator</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;ad1&quot;</span> <span style="color: #ff0000">runat</span> = <span style="color: #0000ff">&quot;server&quot;</span> <span style="color: #ff0000">width</span> = <span style="color: #0000ff">&quot;50&quot;</span> 
<span style="color: #ff0000">height</span> = <span style="color: #0000ff">&quot;50&quot;</span> <span style="color: #ff0000">advertisementfile</span> = <span style="color: #0000ff">&quot;ourads.xml&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #c71585">asp</span>:<span style="color: #800000">adrotator</span><span style="color: #0000ff">&gt;</span> 

The above set of code produces a static Web page (i.e. Without any major actions). If you need to add some sort of dynamism to your pages, then you have to learn about event handling. It’s similar to JavaScript, but with some variation. As we’ve already seen, you can apply actions using any .NET language. But for our examples in this article, I use C#. The listing shown below shows how to activate a WinForm Button:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span>
<span style="background-color: #ffff00; color: black">&lt;%@language = &quot;C#&quot;%&gt;</span>
void show(Object sender, EventArgs e){
t1.Text = &quot;Welcome to ASP.NET&quot; }
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">head</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">TextBox</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;t1&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #c71585">asp</span>:<span style="color: #800000">Button</span> <span style="color: #ff0000">id</span> = <span style="color: #0000ff">&quot;b1&quot;</span> <span style="color: #ff0000">Text</span> = <span style="color: #0000ff">&quot;Click here&quot;</span> 
<span style="color: #ff0000">onClick</span> = <span style="color: #0000ff">show()</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">body</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">html</span><span style="color: #0000ff">&gt;</span> 

About Visual Studio

Visual Studio shortly called as VS provides a very easy way for designing user interfaces using WebForms. You are required to just place the controls from the Toolbox to the form and set relevant properties form the properties dialog box, just like Visual Interdev 6.0. Now Visual Studio .NET provides a single development environment with which you can develop any .NET applications using any .NET language. In the earlier version, Visual Studio 6.0, each language had a separate environment. Hence, developers faced many problems while migrating from one language to another. They have to understand the new environment and learn new syntax while migrating from Visual Basic 6.0 to Visual C++ 6.0. These difficulties are eliminated with the introduction of .NET technology and Visual Studio .NET.

READ  Understanding The User Control In ASP.NET Step By Step

Leave a Reply

Your email address will not be published.