Posted by babarjehangir in ![ASP.NET Tutorials – [Part 03] ASP.NET 3.5 Controls and Event Handlers II](/wp-content/uploads/2008/11/vs.jpg)
In the last part (part 02) I gave you an overview of ASP.NET 3.5 Controls and their Event Handlers, in this part I will put forward some samples codes.
Creating an ASP.NET Website
- Open Microsoft Visual Studio 2008
- Create a new ASP.NET website (File – > New – > Website)
My First Website - Create New Website
- Provide the location and name for your website.
- From the Language drop down you can select the language of your choice (I will be using C# throughout all my articles).
- Pressing OK, will create a website project for you and by default it already has a Default.aspx page added to it.
Switch to Split View of the Default Page and drag and drop a Label, TextBox and Button Control on the interface such that it looks something like this.
My First Website - Sample Default Page
lets look at the declaration of these controls.
<asp:Label ID=”lblmyLabel” runat=”server”></asp:Label>
<asp:TextBox ID=”txtmyTextBox” runat=”server”></asp:TextBox>
<asp:Button ID=”btnmyButton” runat=”server” Text=”Click” />
all of the ASP.NET Controls have the following characteristics
- Tag Element starting with asp: ( with the exception of HTML Controls )
- Each tag (ASP.NET Control tag) has an attribute runat=”server” which indicates to the framework that this control needs to be rendered at the server side. (HTML Controls can have this attribute only if you need to access it in the server side code)
- ID attribute in the declaration of the ASP.NET Control identifies it, once defined, these controls can be accessed on the server side with these IDs.(I have already given controls appropriate IDs)
Now lets add a click event to the button we have on the page, to do that select the button and the look for Properties Panel on the right bottom of the VS Interface ( if you cannot see the properties panel, Press F4). everything you see in this panel are the properties of the control you have selected and you can modify them here. For now we are interested in adding a Click Event, Select Events Tab in the properties panel.
My First Website - Properties Panel - Button Events
you can see there are number of Button events available, but by default no events is placed. To add an event, lets say Click Event, we need to double click the space in front of the Click Label, this will add a Button Click Event handler in the Code File of the Default.aspx. This is how your code-behind file for this page would look like with a Button Click Event Handler.
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnmyButton_Click(object sender, EventArgs e)
{
}
}
btnmyButton_Click Event will occur everytime when btnmyButton is clicked. now lets Append “Hello” to the Label (lblmyLabel) Text everytime this button is clicked.
protected void btnmyButton_Click(object sender, EventArgs e)
{
lblmyLabel.Text += "Hello ";
}
- Run (F5) the website and click on the Button more than one time and see what happens. (Note: for the very first time a Message Box will appear once you Run (F5) your website asking whether to enable debugging or not, Press Yes/Ok)
My First Website - Button Click Event Handler Demonstration
now this is how we can perform different kind of operations, for example manipulating certain information from a form to the database. similarly we have TextChanged Event available for the TextBox control, lets say we require that, whatever is written in the textbox is appended to the label whenever textbox loses focus, All we need to do is select mytxtTextBox control we dropped earlier on the page and add its TextChanged Event Handler like the way we added Button’s Click Event.
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnmyButton_Click(object sender, EventArgs e)
{
lblmyLabel.Text += "Hello ";
}
protected void txtmyTextBox_TextChanged(object sender, EventArgs e)
{
lblmyLabel.Text += txtmyTextBox.Text;
}
}
just the way on the click of the button there was a post back to the server so that text could be appended to the label, TextBoxes by default are set not to post back on any event, we have to explicitly enable post back by enabling AutoPostBack property of the txtmyTextBox.
My First Website - Properties Panel - AutoPostBack Property
this will make the TextBox postback to the server on TextChanged Event.
- Now Run(F5) the website again
- Enter some text in the textbox and click out side the textbox, this will make the textbox lose focus and subsequently will post back to the server and call the TextChanged Event Handler and our text will appended in the label above.
My First Website - TextBox's TextChanged Event Handler Demonstration
this brings us to the end of Part 03. In this part we learned How ASP.NET Controls and Event Handlers are used in ASP.NET Websites, in the upcoming parts we shall look into Controls in each Category in detail, discovering various properties and events associated with them.
- Thanks for Visiting, don’t forget to let us know how did this article helped you.
- Download Source Code for Part 03
- Cheers!
Proceed to:
Previous Parts:
