Click here to download the sample source code for this lesson.
Some of the server controls in ASP.NET have an event called Text Changed. This event is fired by ASP.NET anytime a user changed the text contents in a control and press the TAB key or put the focus on another control. This event allows you as the programmer to dynamically know if the user typed something and then your code can perform some actions based on that event.
Create a new web form named Default4.aspx and go to the Design view. Drag two TextBox controls onto the web form and name the IDs txtSource and txtDestination accordingly. Double click on the txtSource TextBox control and Visual Web Developer will create an event handler named txtSource_TextChanged. Again notice the naming convention, ID appended with event type. In the Method, type the following:
txtDestination.Text = txtSource.Text;
Go back to the Design view for the Default4.aspx page and we need to set a special property in order for this example to work. Click on the txtSource TextBox control and change the AutoPostBack property to True. This ensure that if something changes in that TextBox and the user presses TAB, the web browser will automatically post back the form or call the server to request the web page again. If you don’t set that property, the web browser will not request anything from the web server and your txtSource_TextChanged event won’t fire. To summarize the sequence of events that occur when the web page runs in our example:
First, when the page loads, ASP.NET will render two empty TextBox controls. When the user types something into the first TextBox control and TABs off the field, the browser will request the web page from the server again (this is called a PostBack because the web form is “posting back” to the server). When the server receives the request, it senses that the TextBox control’s contents have changed so it fires the txtSource_TextChanged event Method. ASP.NET is handling all of this interaction between your web browser and the server behind the scenes. This abstraction makes it very productive for web programmers because they can focus on programming their business logic and let ASP.NET handle all the HTML, Javascript and other technologies that the web application needs to work.
Click here to download the sample source code for this lesson.
ASP.NET uses an event driven programming model. This means that in order for code to run, an event must occur that triggers or tells ASP.NET to run an event handler Method. An event handler method is a special type of Method in an ASP.NET web page that defines the actions that will occur when a particular event occurs. So far, throughout the lessons we have experienced one of these types of events: the click event. We saw that if you are in the Design view for a web form and you double click on a Button control, Visual Web Developer will automatically generate an event handler Method called Button1_Click. Basically an empty Method is generated and Visual Web Developer lets you put whatever code you want into that event handler. Notice the naming convention that Visual Web Developer when it generates the event handler Method. The first part of the name is the ID for the server control: Button1. The second part of the name an underscore appended with the event type: Click. This convention helps you as the developer know when that Method will be called by ASP.NET. In this case, the click event fires when a user single clicks on the Button control.
ASP.NET supports different types of events for the various server controls but there are some very common events and those are the ones we will focus on in the next few lessons. The first of these events that we will practice with is the Page Load event. This event fires every time you navigate to an ASP.NET web page in your web browser. When type a .aspx page in your browser’s URL window or click on a link that takes you to an .aspx page, you are triggering the Page Load event on the web server at the time the page is requested.
Create a new web form called Default3.aspx. Drag a TextBox onto the web form and change the ID to txtHello. Double click on a white area of the web form where there are no server controls. Visual Web Developer should take you into the Page Load event Method Page_Load. In there, put the following:
txtHello.Text = "Message from the Page Load event";
Go back to the Design view for Default3.aspx and drag the right side of the TextBox control to the right (about 500px) in order to make it larger; this way you will be able to read the entire message “This info was put…” when the page runs. Run the application and notice that when Default3.aspx comes up, the message is already in the TextBox. Now close the browser and go back to the Design view for Default3.aspx and drag a Button control to the left of the TextBox. Change the ID property of the Button to btnPutmessage and the Text property to “Change the message”. Double click the Button to create the event handler Method. *Notice that the event handler is called btnPutmessage_Click. In the code put the following:
txtHello.Text = "Message from the Button Click event";
Run the application again and this time click on the Button. Notice that the message in the TextBox changes because ASP.NET fired the btnPutMessage_Click event when you clicked the Button.