ASP 4.0 Submit Button Control

When you drop a button control on the ASP.Net Web Form, by default it will act as a Submit Button Control. The submit button performs Auto Postback of the Web Form to the web server. This means, when user clicks the button, the browser will send the Form’s data to the web server. Web Server will process the information and replies back to the web browser. This process is called Postback. In this Lab, we will create a web form with a button control and text field and see how button click works & performs Postback.

1: Design ASP Web Form with Button

In this first step, we will create a Web form with a button control. The sub-steps are below:

1) In our previous Lab #005 TextBox Controls, we created an empty website to learn Asp.net 4.0 basic controls. Now, we will open the same website. Click File | Open | Web Site…
2) In the Open Web Site dialog, make sure to select File System.
3) Select the Folder as shown in the picture. In Lab 005, we created a form to learn TextBox control and placed the project on this folder.
4) Click on the Open button. This will open the Web Site.
5) Add a new Web Form called 02_ButtonAsSubmit.aspx. Refer previous lab to know how to add a new Web Form.
6) Design the Web-Form as shown. The form comprises of two labels, one Text box and one button control.
7) We name the TextBox as txtName by setting the ID property.
8) Next, we set the ID for the button control as btnSubmit. The Text Property will set a display text for the button and here we set a value as Submit.
9) Set ID property of the second label to lblDisplay. We will fill this Label as part of the button’s event. Set Bold property to true and Size property to X-Large. Then, pick ForeColor property Blue.
10) Shows appearance of the Web Form.

At runtime, user will enter their name in the text field and hits the Submit button. The second label will display a greeting message to the user.

2: Handle Submit Button Click

In this step, we create a dummy handler function for the Web Form Submit action. Steps are below:

1) Click on the Submit button to select it.
2) Right click and pick properties to display properties window.
3) Make sure you picked the correct control’s property.
4) Check the ID property reads: btnSubmit
5) Click the Lightening Icon. This Icon will present all the events fired by the selected Button control.
6) Double click on the empty row next to the Click event. This means, you are asking Visual Studio to provide the dummy handler code for the Click Event.
7) The Double click action in previous sub-step land you to the code behind C# file.
8) Notice the Click Event Handler for the Submit button is ready. But we do not have any code wired-up here in this handler yet.

Now, when user clicks the button, the Web-Browser sends the form data to the Web Server and Web Server runs click event handler. Note: The user produced the Event on the Web-Browser. The handler code will run on the server machine.

3: Add Handler Code

Now, we will add the C# code to the handler method and learn what is meant by Auto Postback. Sub-Steps are below:

1) In the handler code, we hit two Web Controls. When form is submitted, all the form field data submitted to the Web Server. In this statement, we read TextBox Control’s content via the property Text and prefix that with the word “Hello”. Then, we write the resulting text to the second label lblDisplay.
2) Run the Web Form and Web Form will be displayed in the Browser.
3) Enter your name in the Text Box.
4) Click the Submit Button. Now, the browser will submit the data entered in the TextBox (Nagi Ghali) to the Webserver. The event handler code runs on the web server and assigns the label control’s text property by building the string: “Hello ” + Text-Property-Of-the-TextBox-Control. After this Web Server posts the web form with modified content back to the Web Browser. This is called post-back.
5) Web Form rendered again with new content formed by the WebServer. The new content is update to the Label control. Notice, as part of the post-back, the TextBox still displays the content entered as part of the Form submit..
6) The Label was assigned with the text property in the button click handler. The text property was set on the web server before it is posting back the web content to the web browser.

Summary

In this Lab, you learnt how to handle the button click event. You also learnt what is Post-back and how it preserves the form field data submitted to the web server.

• JavaScript 008 – Loops For, While, For…In
• ASP 4.0 – Command Button & Event – Lab #007

Categories: ASP 4.0

Tags: Auto Post-Back, Button Control, Post-Back

This site uses Akismet to reduce spam. Learn how your comment data is processed.