Select ListBox Using Ajax

• Download AjaxListBox.zip - 215.5 KB

Introduction

Hi every one. Here is another good idea for web developers.

I know that I m not a good writer. But I am writing here the things which I faced during the development of this tool.

This article will also teach you what is Ajax and how it's working.

Background

Last week I was developing a web application in visual studio 2005 with C#. In one of the form I needs to put a control witch will allow users to select some of items from a list box. Then I decided to put a check box list there for users to select. But one of my college said its very odd, why you are not putting a list box there.

I did that. But now the problem was something else. When I was selecting from one list box to another the whole page was getting Postback.

After very much study I decided that it can only be possible in Ajax. So I developed this control.

Using the code

I am not saying that I did something special. It's a normal Ajax use. But it is a very useful control for web developer. So download the source and use it. I hope you will appreciate it.

Source:

To develop this application I used Ajax update panel.

I placed two asp list box and two buttons in one Ajax updatepanel. The HTML source is as following:

<form id="form1" runat="server">


        <asp:ScriptManager ID="ScriptManager1" runat="server" />

         <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="10" DynamicLayout="false">




            <ProgressTemplate>

                <span>


                    <img src="Indicator.gif" align="middle" /></span></ProgressTemplate>


        </asp:UpdateProgress>


        <asp:UpdatePanel ID="UpdatePanel1" runat="server">


            <ContentTemplate>


                <table>

                    <tr>

                        <td style="height: 72px">


                            <asp:ListBox ID="lstMain" runat="server" DataTextField="Name" DataValueField="Name" Width="150px" DataSourceID="SqlDataSource1">

                                </asp:ListBox>

                                <asp:SqlDataSource ID="SqlDataSource1"


                                    runat="server" ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"

 

                                    ProviderName="<%$ ConnectionStrings:masterConnectionString.ProviderName %>" SelectCommand="SELECT [Name], [ID] FROM [CFG_Combo]">

 

                                </asp:SqlDataSource>


                        </td>


                        <td style="height: 72px">


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

                            <br />

                            <asp:Button ID="Button2" runat="server" Text="<-" OnClick="Button2_Click" />

 

                        </td>

 

                        <td style="height: 72px">


                            <asp:ListBox ID="lstSelect" runat="server" AppendDataBoundItems="True" Width="150px">

 

                            </asp:ListBox></td>

                    </tr>


 

                </table>

 

            </ContentTemplate>


        </asp:UpdatePanel>

    </form>   

After designing I created two events for the buttons as follow

protected void Button1_Click(object sender, EventArgs e)
    {
        if (lstMain.SelectedIndex > -1)
        {
            string s = lstMain.SelectedItem.Value;
            lstSelect.Items.Add(s);
            lstMain.Items.Remove(s);
        }  

    }
protected void Button2_Click(object sender, EventArgs e)
    {
        if (lstSelect.SelectedIndex > -1)
        {
            string s = lstSelect.SelectedItem.Value;
            lstMain.Items.Add(s);
            lstSelect.Items.Remove(s);
        }

    }

In Button1_Click event I am appending lstselect from the selected value of lstMain same time I am deleting that value from lstMain and in Button2_Click event I am appending lstMain from the selected value of lstSelect and deleting that value from lstSelect.

Points of Interest

Becouse of ajax technology the whole page will not go for postback when u will click on Buttons.

System Requirments

.Net Framework 2.0

Ajax Framework 1.0.