Events

ASP.NET is an event-driven way of making web applications. With PHP and Classic ASP, you have one file, which is executed line after line, from start to end. However, ASP.NET is very different. Here we have events, which are either activated by the user in one way or another. In the previous example, we used the Page_Load method. Actually, this is an event, which the Page class calls when the page is loaded. We will use the same technique in the next example, where we will add a couple of controls to our simple hello world example. To make it a bit more interesting, we will change the "world" word with something defined by the user. Have a look at this codelisting, where we add two new controls: A Button control and a TextBox control.

<form id="form1" runat="server">
<div>
<asp:Label runat="server" id="HelloWorldLabel"><asp:Label>

<br /><br />
<asp:TextBox runat="server" id="TextInput" />
<asp:Button runat="server" id="GreetButton" text="Say Hello!" />

</div>
<form>

As you can see, we now have the 2 new controls added, but they really can't do much at the moment. You can run the example if you wish to check this out for your self - if you click the button, the page is simply reloaded. Let's change that, and let's start by doing it the easy way. VWD comes with a WYSIWYG editor, and while I hardly ever use it my self, it does make some things easier, like creating events. So, click the Design button in the bottom of VWD. Now you will see a visual representation of our page. We wish to add a Click event to the button, and this is very simply - just doubleclick the GreetButton, and you will be taken to the CodeBehind file of our page. As you can see, a fine new method has been added, called GreetButton_Click. If you have a look at the Default.aspx file (you need to go from Design view to Source view), you will see that an attribute has been added to our Button control, telling which method to call when the button is clicked. All this work done with a simple doubleclick.



Now lets add some code to our new event. We wish to use the text from the TextBox, on our good old Label with the "Hello, world!" text. This is also very simple, and all it requires is a single line of code:

HelloWorldLabel.Text = "Hello, " + TextInput.Text;

Run the project again (F6), and you will see the our old page with a couple of new controls. The "Hello, world!" text is still there, because we set it in the Page_Load event. Now try entering a name in the textbox, and press the button. Voila, the text is changed, and we have just used our first control event. Notice how we can add code which is not necessarily called unless the user performs a specific task. This is different from the good old Classic ASP/PHP approach, but you will soon get used to it, and you will probably also come to like it a lot!

Okay, the onclick event from last chapter was easy, but let's try creating all the code required to use an event from scratch. We will also add yet a new control, to make things more interesting - the DropDownList, which allows the user to select an item from a list. Add the folowing code snippet somewhere in the Default.aspx file:

<asp:DropDownList runat="server" id="GreetList" autopostback="true">
<asp:ListItem value="no one">No one</asp:ListItem>

<asp:ListItem value="world">World</asp:ListItem>
<asp:ListItem value="universe">Universe</asp:ListItem>
</asp:DropDownList>


This thing works just like a normal HTML SELECT element, which is of course what it's translated into upon rendering. The only attribute that would seem new to a person with basic HTML experience, is the autopostback. You will learn more about postbacks in one of the next chapters, but for now, just know that it makes the control contact the server eachtime an item is selected by the user. We will use this to our benefit now, by adding an event:

<asp:DropDownList runat="server" id="GreetList" autopostback="true"
onselectedindexchanged="GreetList_SelectedIndexChanged"> 

We are using the onselectedindexchanged event, and assigning a method from CodeBehind which does not yet exist. You are free to choose the name of the method, but using a convention with the name of the control, an underscore, and then the name of the event, helps you keep track of it all. We better go create the event, so change to the Default.aspx.cs file, and add the following method:

protected void GreetList_SelectedIndexChanged(object sender, EventArgs e) { 
  HelloWorldLabel.Text = "Hello, " + GreetList.SelectedValue;
} 

Once again, we make this extremely simple. We use the SelectedValue property of our dropdown list, which holds the text from the value property of the selected item. Try running the site, and select an item from the dropdown list. Pretty neat, huh? All commen controls come with a bunch of usefull events, which you can subscribe to like this.