Building ASP.NET Pages

Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 6731 red flag

In this article, we will see how to create an ASP.NET pages.


In order to create a sample application, you load Visual Studio .NET and create a new web application project.

To do this, you select File - New - Project.

Alternatively, you press Alt+F+N+P.

In the New Project dialogue box that is displayed, you select Visual C# Projects from Project Types and ASP.NET Web Application from Templates.

You can specify the intended location of your project in the Location field.

You enter your desired location and then click OK.

Visual Studio .NET works with IIS to create a new project on the web server. It adds files to that project based on the template you selected.

To investigate the template, you double-click the Solution Explorer window to maximize it.

The items that make up your project display in the Solution Explorer window.

WebForm1.aspx is the default name for the page you will be creating.

The Web.config file is an XML file used for modifying the behavior of your project's file at run time. It contains various properties that define the way your project works, such as what type of code you want to use, if any, and information about your assembly.

Global.asax is a code file which contains code for responding to application-level events.

To display the file's code window, you can choose code view. There are a number of different event procedures that can be placed in this file.

For example, the Application_Start and Session_Start event procedures can run when your application starts or when the session starts.

You select the AssemblyInfo.cs file.

The AssemblyInfo.cs is a file which includes information about your assembly. An assembly is the primary building block of a .NET Framework application and is a collection of functionality built, versioned, and deployed as a single unit, which comprises one or more files.

In the AssemblyInfo.cs file, you find information concerning the particular version as well as other relevant features of the assembly itself.

Let's say you want to start working on WebForm1.aspx itself. In design view, you have the option of using two different ways to work on this page.

You can maximize the Properties window by double-clicking its title bar.

You scroll down to find the pageLayout property.

This can be set to either GridLayout or FlowLayout. With GridLayout, you use absolute positioning to lay out the controls on the page. With FlowLayout, the page lays out the controls from upper left to lower right. It inserts breaks as necessary to break items on the page.

You select GridLayout, because it is more straightforward to use than FlowLayout.

The page is marked out with a grid. If you want your controls to snap to the grid, you should select the Snap To Grid button in the toolbar.

To begin the design of your page, you decide to add a Label control. For example, you might want to add a Label control to allow the user to obtain feedback on completing a task. So you double-click the Label button in the toolbox.

And a label is placed in a default location on the page.

If you want to put the label in a particular location on the page, you can click and drag the icon of the relevant label control from the toolbox to the page.

Let's say you would like the user of this program to type some text into a text box, click a linked button and have results appear in this label once the page has been reposted back from the server.

To do this, you need to add a Textbox control and a Button control. The Textbox control allows the user to enter details, and the Button control allows them to submit these details.

You may need to move or resize controls on the page. For example, you can enlarge a control by clicking and dragging one of the handles in its margin.

You can move them around either singly or as a group, and you can set properties for each control.

Let's say you want to alter the properties of the button.

You select the button control, and double-click the Properties window to maximize it.

You change the text property of the button control to Submit and you change its ID property to btnSubmit.

You can now use this ID value to refer to this control when writing code.

For the text box, you change the ID property by selecting it.

And then typing txtName.

You can also change the ID property of the label to lblText.

And you also decide that you would like the Text property for the label control to be blank when the form loads. To do this, you delete any text that exists in the Text property.

If you scroll down the page, the code shows that these controls are provided by ASP.NET. These are different from standard HTML controls because they allow you to work with the properties, methods and events of objects at design time.

The ID attribute of each one of these controls has been set.

And because we are using absolute positioning, a style attribute has been added which lays out the position of each one of the controls.

For each of the controls you will find a runat="server" attribute that defines the behavior of the control on the server.

This attribute allows the control to react to events on the server and run code there before rendering the page for the browser.

Scrolling further across the code window, you will find attributes for some controls, such as Width for the text box and the Text property for the Submit button.

Let's say you have returned to design view, and you decide that you want the Submit button to post back to the server and to copy into the label control the text that is displayed in the text box.

To do this, you need to add some code to the procedure supporting this button. So you double-click the Submit button.

The default event procedure for the button is the click event handler.

In this procedure, you can write code that runs when the button is clicked, and the page is submitted back to the server.

Let's say you add some simple code. You specify that when the procedure is executed, the text property of the label control is changed to Hello plus any text that was entered into the text box. This code will display in the label control when the page is displayed in the browser.

You can right-click the page in the Solution Explorer window to display the context menu. This allows you to do a number of tasks.

For example, you can view your page in the default browser by selecting Build and Browse.

Or you can set this page as the start page for your project.

You can then run the application using the Debug menu.

To do this, you select Debug - Start.

Alternatively, you press F5.

Internet Explorer displays your sample page, WebForm1.

To test the page, you enter a value into the text box, for example, John, and press the Submit button.

The result is displayed.

To view the code that makes this action operate correctly, you can view the HTML source by right-clicking on the browser page.

You then choose View Source.

In the text editor, most of the code is standard HTML.

However, in the body of the page there is a span element whose ID is lblText. This is the label control rendered as HTML.

There is also a style element which incorporates style information for the positioning of the lblText control.

The name of the input control of the code for your textbox is txtName. Its type is text and its value is John.

The code for the Submit button (named btnSubmit) is also shown. Its value is Submit.

All of these controls are standard HTML even though they have been designed as ASP.NET controls. ASP.NET renders them as standard HTML.

You can also view a hidden input control called __VIEWSTATE. This control's value is a base-64 encoded version of the data encoded on the page. This control appears on all ASP.NET pages and allows ASP.NET to manage state as it posts back from the browser to the server.

Let's say you close the editor and go back to the WebForm1 page to look more closely at what happens when you click the Submit button.

If you enter a name and click Submit, the page is submitted to the server, which runs the code associated with the Submit button.

When the code runs, it concatenates Hello and the name it finds in the text box into this label control.

It then sends back standard HTML to the browser which gets placed into the span tag on the page.

Once you have finished working with your project, it's a good idea to save all the contents of your project by clicking the Save All button on the toolbar.

You can create a simple web page using Visual Studio .NET and C#. You can create a new web application project. You can add controls to a web form, such as label or button controls, and then create code that allows users to interact with the page at run time within a web browser.

Thanks and Have Fun!!!!!

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: John Doe
Member Level: Bronze
Member Status: Member,MVP
Member Since: 1/22/2011 7:38:35 AM
Country: India

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)