Web Form layout and logic - Web Forms in C# Part 1

Naimishforu
Posted by in C# category on for Beginner level | Points: 250 | Views : 10118 red flag

Web Forms are a part of ASP.NET that allows you to build interactive web applications using C# or any .NET-compliant language.

Introduction


Web Forms are a part of ASP.NET that allows you to build interactive web applications using C# or any .NET-compliant language. A Web Form can be regarded as consisting of two parts: 

•  The Presentation Template 
•   Executable Code

The Presentation Template is the HTML-based template for laying out the web page. It can be edited using a text editor or an HTML web-design tool.

The Executable Code comprises compiled binary code containing the page's programmable logic. The source code can be developed using any .NET-compliant language, including C#. 

The code can be either included in the page or supplied in a separate file – known as in-line and code-behind, respectively.

When Visual Studio .NET is used to develop Web Forms, the code-behind model is always used. The advantage of this model is that you can separate the different parts of the development process – the programmable logic from the page layout design.

When using Visual Studio .NET's Web Form designer to draw your Web Form, the HTML source of the presentation template is generated automatically. 

Visual Studio .NET also automatically creates placeholders for the event-handling functions, where you place your processing logic.

The template starts with the Page Directive. The directive can have several attributes. These include the programming language used (C#), the source file location, and the name of the class that the page inherits.

Here's a typical HTML template.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" >
<HTML>
         <HEAD>
                   <title>WebForm1</title>
                   <meta name="GENERATOR" 
Content="Microsoft Visual Studio 10.0">
<meta name="CODE LANGUAGE" 
Content="C#">
         </HEAD>
         <body MS_POSITIONING="GridLayout">
         </body>
</HTML>
        
Every Web Form must contain a single pair of form tags to open, <form…>, and to close, </form> . For ASP.NET to identify the web page as a Web Form, the opening form tag must have the runat property set to "server."

The most important element of Web Forms is server controls. They are different from Windows Forms controls because they are designed to generate HTML, which is graphically rendered by the browsers. 

Server controls are specified as special HTML tags and can be identified by the runat property being set to "server."
The properties for each control are specified as HTML attributes. For instance, the RangeValidator control has properties assigned for ErrorMessage and ControlToValidate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" >
<HTML>
         <HEAD>
                   <title>WebForm1</title>
                   <meta name="GENERATOR" 
Content="Microsoft Visual Studio 10.0">
<meta name="CODE LANGUAGE"
Content="C#">
         </HEAD>
         <body 
MS_POSITIONING="GridLayout">

<asp: Calendar id="Calendar1" 
style="Z-INDEX: 101; LEFT: 24PX; POSITION: absolute;
<asp: RangeValidator id="RangeValidator1" style="Z-
INDEX: 107; LEFT: 184PX; POS
ErrorMessage="Number must be between 0 and 18" 
ControlToValidate="TextBox1"
MaximumValue="18"
MinimumValue="0" 
Type="Integer"></asp:RangeValidator>
<asp:Button id="Button1" style="Z-
INDEX: 106; LEFT: 24px; 
POSITION: absolute;
<asp:Button id="Button2" style="Z-
INDEX: 105; LEFT: 72px; POSITION: absolute;
<asp:ListBox id="ListBox1" style="Z-
INDEX: 102; LEFT: 280px; POSITION: absolute;
<asp:TextBox id="TextBox1" 
style="Z-INDEX: 103; LEFT: 184px; POSITION: absolute;
<asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 24px; 
POSITION: absolute; TO
             </form>
         </body>
</HTML>

Laying out Web Forms in Visual Studio .NET involves choosing controls in the Toolbox window and placing them on the design surface. You can specify a Web Form layout using 

•  Grid Layout 
•  Flow Layout

When you use grid layout, the controls are placed on a grid on the design surface. The underlying text is not editable simultaneously. This facilitates a transparent style similar to Microsoft FrontPage.

Flow layout offers a design surface comparable to a word-processing document. It's possible to insert text and paragraphs, and the result is changed into HTML. You can position controls at the cursor in the middle of text.

Thanks and Have Fun!!!!!

Page copy protected against web site content infringement by Copyscape

About the Author

Naimishforu
Full Name: Naimish Pandya
Member Level: Bronze
Member Status: Member,MVP
Member Since: 1/22/2011 7:38:35 AM
Country: India
Thanks, Naimish http://dotnetinterview.zxq.net/ http://naimishpandya.blogspot.in/
http://naimishpandya.blogspot.in/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)