We explain Webforms and create a Web control in asp.net with the help of examples of programs.

Two types of web forms in ASP.NET Static and dynamic web forms are all familiar with the concept of clients and web servers. Clients issue requests to web servers for web pages server responds with a message packet containing HTML which is then encoded web page. The web browser program running on the client parses the HTML and displays the web page.

• Static web pages appear the same in response to every request from the client to the server
• This is typical of simple HTML web pages
• Dynamic pages can change depending on data supplied from the client or be personalized for the user based on cookies that are installed on the client computer
• There are many technologies that support this of which ASP.NET is a powerful Microsoft example
• Essentially it involves running asp scripts supported by code written in a high-level language (typically VB or C#) on the server on which .NET has been installed.
• 
  

• We can modify our static web page to include some dynamic content
• It will display the current date/time along with the movie schedule
• We will use ASP.NET to run server-side code
• The site will be a .aspx file which will look similar to our original .html file
• It will call methods from a C# class which is in a code-behind file
• We will explain later how this all fits together.

How ASP.NET works?

To create a dynamic web page, we create a .aspx file. If the client requests a .aspx file, because of the file extension, the file is forwarded to ASP.NET by the webserver. ASP.NET parses the .aspx file.

It understands .html tags as well as ASP tags (<% and %>). Ultimately ASP.NET will create an object, using the code in the .aspx file and the code behind the (C#) file which produces the .html to send back to the client. From the 2 files, ASP.NET produces code for 2 files. The class is derived from the System. Web. UI.Page class (which contains basic functionality to produce HTML). Also System.Web. UI. The page contains functionality to parse the request from the client including attached postback data

ASP.NET creates an instance of this object to represent the page. The real power of ASP.NET is that the production of HTML is abstracted away to managed components.

For example, a button on a web form knows how to produce the HTML to render itself on the web page

All these components exist in the namespace System. Web. UI.WebControls

Its state may depend on postback data from the client so the component may need to re-render itself in response  

In our simple example, code for a derived class of the MoviePage class is produced

An object is instantiated containing code for method calls to WriteDate() and WriteMovies()

More realistically our page will contain web controls that represent user interface elements on our web page

These are defined in the FCL

We can design a web page using visual programming techniques to drag and drop these controls into our page

We don’t have to worry about producing the right HTML to send back to our browser

Another key feature of ASP.NET is its runtime performance

ASP.NET parses the .aspx files at runtime

Code is compiled into binary assemblies (.dll files) which are cached and reused

A webform application must only be parsed once after each modification to source files

On receiving a request from the client, ASP.NET looks for an already compiled assembly to fulfill the request otherwise it creates one from the submitted .aspx file and code-behind file

Introduction to web form programming

Webform programming allows us to insert web controls (for example buttons, labels, images, etc) into web pages

We can do this programmatically in the .aspx and code-behind files

Or we can do this using the design view in Visual Studio

It allows us to design interactive web pages whose visual representation changes in response to user interaction

As a simple example, the following website allows the month’s calendar to be displayed for any user-inputted data.

It demonstrates the use of the button, label, textbox, and calendar web controls.

The <asp:> tag in the .aspx file indicates that we are defining a web control. asp: is shorthand for the System.Web. UI.WebControls namespace. The runat=“server” attribute for each web control indicates that these controls are to be implemented on the server-side. We are setting the properties of our web control objects in the <asp:  >  but we could also use the properties window in Visual Studio.

Visual Web Developer

A sub-set of Visual Studio is the Visual Web Developer which has a visual designer based on FrontPage. Allows the developer to use ‘drag and drop’ to insert web controls into web pages. Code can then easily be added to the code-behind files. Typically these would be event handler functions for the controls

• We select File->New->Web site and then select ASP.NET Web Site
• Normally HTTP is selected and the location (in this case http://localhost/xxxx means under the local ‘www-root directory (assuming IIS has been installed locally)

Web Developer has a design mode rather similar to the design mode we used to create GUI’s in normal windows programming. It differs slightly in that there is a cursor position and any web controls or text are added at the current cursor position.

1. The .aspx file is updated as the website is created in design mode
2. The currently designed website can be previewed at any time
3. As in normal windows program development, the event handler code for web controls (eg buttons) has to be added by the developer.

We can create a web page for displaying the calendar using design mode 

The label, text field, button, and calendar are inserted into the page using drag and drop

We set the visible property of the calendar to false in its properties window

We set the background color of the outer form using the properties window

All code except the Page_Load() and Button_Click()methods is automatically created

Validation controls

A validation control determines whether the data entered in a web control is in the proper format

For example, a postcode entered in the correct alphanumeric format. Date entered in the correct dd/mm/yyyy format. A correct email address is entered etc.

The validation check is carried out by the client by converting the validator to Javascript to perform the validation before submitting the data to the server

• 
  
• Validation controls can be input onto a webpage using Visual Web Developer
• Actual validators for things like phone numbers, email addresses are defined by regular expressions
• These are strings containing formatting characters used to match particular patterns in text
• We can define our own regular expressions as validators for particular inputs.
• Luckily, however, Visual Web Developer has a Regular Expression Editor dialog box allowing us to choose standard regular expressions for things like email addresses and phone numbers.

For example, we can create a simple web form to input a name, email address, and phone number into textboxes and include input validators for each

We can also make each input a required field so that each field must be input before submitting to the server

We also include a label at the bottom of the form for the server response

We can add required field validators to each of our input textboxes

We can set the ControlToValidate and ErrorMessage properties in the properties window of each validation control

The validation controls remain invisible on the website unless input is not added before the form is submitted

The required error message is displayed

The form is not submitted to the server

Next we can add RegularExpression validators to our input text boxes for email and phone numbers

We can use a standard regular expression for email taken from the dialog which is obtained from the properties window

\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

We can generate our own for a UK phone number

((\(\+\d{2}\) ?)|(\+\d{2}-))?\d{3}-\d{3}-\d{4}

eg (+44)(121-414-4329)