August 22, 2009

At times, we may need to pass data from client to control. For example, we can ask the the user for a name and display the users name in a Label control. In this code snippet, I will use javascript to prompt the user for his name and display it a Label control.

Here, is the Label control.
    <asp:Label ID="LabelScript" runat="server" Text=""></asp:Label>

Here, is the javascript function to prompt the user for his name.

    <script type="text/javascript">
        function promptLabel() {
            document.getElementById('<%= LabelScript.ClientID %>').innerHTML =
            window.prompt("Please enter your name.");       

The last thing is to call the method when the page loads. This is done by setting the onload attribute of the html body tag to the function's name.
    <body onload="promptLabel()">

When the page is loaded, the page displays a prompt asking for the name. When the user enters his/her name, and presses the ok button, the Label control in the page displays his name.

August 20, 2009

To check if a TextBox value has changed or not, we can use "OnTextChanged" event of the TextBox. This will require setting the AutoPostBack property to true and will fire a postback to the server each time the TextBox changes. Therefore, it will decrease performance of the page adding little value.

Alternatively, we can use javascript to check if the Text property of a TextBox control has changed or not. In this example, I will create a TextBox and Label control and when the TextBox changes, the Label will populate with the Text in the TextBox.

Here is the declaration of the Label and TextBox controls.

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

I will add the javascript to the TextBox in the Page_Load method.
TextBox3.Attributes.Add("onchange", "TextBoxChange()");

This will add an "onchange" attribute and "TextBoxChange()" will be called when the text changes in the TextBox.

In the javascript function, I will find the Text of the TextBox control and assign it to the innerHTML property of the Label control. Here is the code,

function TextBoxChange()
        document.getElementById('<%= Label2.ClientID %>').innerHTML =
            document.getElementById('<%= TextBox3.ClientID %>').value;

When the page is run, and then TextBox text is changes, the text of the Label control updated. Checking if the text property of a control has changed or not using javascript is more efficient since it avoids unnecessary postbacks to the server.

August 18, 2009

Removing Items from ListBox

To remove items from ListBox or DropDownList, I have tried to run it within a foreach loop for all the items in a list and it does not seem to work. At times, I receive an OutOfRange exception and other items it deletes the wrong items. These happens because once an item is deleted, the number of items in the list changes.

In this example, I will create a ListBox with few items and then on button click delete the selected items. To do so, I will first store the selected items in a ArrayList.

Here, is the main page,

<asp:ListBox ID="dd1" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        <asp:ListItem Text="3" Value="3"></asp:ListItem>
        <asp:ListItem Text="4" Value="4"></asp:ListItem>   

    <asp:Button ID="Button1" runat="server" Text="Remove" OnClick="Remove" />

Here, is the button click method,

protected void Remove(object o, EventArgs e)
        ArrayList list = new ArrayList();
        foreach (ListItem li in dd1.Items)
            //add selected items to ArrayList
            if (li.Selected)

        for (int i = 0; i < list.Count; i++)
            //note: running for loop on the ArrayList

When the button is clicked, the ArrayList populated with the all the SelectedValue of the ListBox. Then, a for loop is run on the ArrayList and the matching items are removed from the ListBox.

August 17, 2009

Using MultiView control

The MultiView control allows to create multiple views of a page or part of a page and display one particular view at a time. In this example, I will create a MultiView control, add some View controls to it. I also have a Label control that displays TextBox data from different Views when MultiView's active view state changes. Here, is the code for the page.

The MultiView control has 3 View child controls. The Views controls have a Label control, TextBox control and Next & Previous buttons. When the Next & Previous buttons are clicked, the activeViewState is changed appropriately.When the activeViewState is changed, the HeaderLabel displays all the TextBox data.

August 10, 2009

Setting title of web controls

In this article, I will show how to create tooltip for web controls. For most controls, the Tooltip property can be used to set the tooltip. For controls that do not support Tooltip property, the title attribute can be set. For DropDownList. RadioButtonList, CheckBoxList and BulletedList, tooltip is set for the control and for each item in the control.

Reference: Shahed Kazi at