Click here to Skip to main content
Click here to Skip to main content

Select ListBox Using Ajax

, 22 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
This is an List Box contrll using Ajax
Screenshot - AjaxImage.jpg

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Moiz hakimi
Web Developer
Kuwait Kuwait
Moiz Hakimi is a Software engineer at Expert Solutions Kuwait.
He has worked with .Net technologies in web development and has been programming since 2005.
He is very comfortable in various languages,RDBMS & platforms from C++,C# to VB.NET with Access & MS SQLServer
from Javascript,AJAX to ASP.NET.
 
Besides programming he loves playing guitar, listening to music,singing, bike riding & cricket.

Comments and Discussions

 
QuestionHow get the select items? Pinmembersinopac23-May-10 14:42 
AnswerRe: How get the select items? PinmemberMoiz hakimi23-May-10 20:26 
JokeThanks a lot Pinmemberab_dc5-Nov-07 1:49 
GeneralRe: Thanks a lot PinmemberMoiz hakimi6-Nov-07 0:24 
GeneralThank you! Pinmembergeorge_v4-Sep-07 4:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 22 Apr 2010
Article Copyright 2007 by Moiz hakimi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid