Home > DeveloperSection > Forums > LIST BOX CONTROL EXAMPLE
priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-15-2014 10:09 AM

 ASP.Net ListBox 
Ratings:


 8 Reply(s)
 1244  View(s)
Rate this:
                
              in my web page label having text"Enter text" after one textBox in next line two radio button having text Listbox1 and ListBox2,in next line one single button having text "add" then next line two Listbox controls in between two listboes four button this is my requirement please send design code and code behind code of this requirement but in first list box control no element present run time put the values in textbox........................


Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    November-17-2014 6:08 AM

Hi priya
try this code for designing part
in this post uses bootstrap css for best design

Bootstrap file
<link href="Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />

and html code

<link href="Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />

 

<body>

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

        <div class="container" style="width: 50%; margin: 100px auto;">

            <div class="row">

                <div class="col-md-4">

                    <asp:Label ID="Label1" runat="server" Text="Enter Text"></asp:Label>

                </div>

                <div class="col-md-8">

                    <asp:TextBox ID="txt_string" runat="server" style="width:100%;height:35px;"></asp:TextBox>

                </div>

                <br /><br /><br />

            </div>

            <div class="row">

                <div class="col-md-6">

                    <asp:RadioButton ID="radio_list1" runat="server" />Listbox1

                </div>

                <div class="col-md-6">

                    <asp:RadioButton ID="radio_list2" runat="server"  />Listbox2

                </div>

                <br /><br />

            </div>

            <div class="row">

                <div class="col-md-12 text-right">

                    <asp:Button ID="btn_Add" runat="server" Text="Add" CssClass="btn btn-info" />

                </div>

                <br /><br />

            </div>

            <div class="row">

                <div class="col-md-5">

                    <asp:ListBox ID="ListBox1" runat="server" style="width:100%;height:180px;"></asp:ListBox>

                </div>

                <div class="col-md-2 text-center">

                    <asp:Button ID="Button1" runat="server" Text=">" CssClass="btn btn-default" style="width:40px;height:30px;" /><br /><br />

                    <asp:Button ID="Button2" runat="server" Text="<" CssClass="btn btn-default" style="width:40px;height:30px;" /><br /><br />

                    <asp:Button ID="Button3" runat="server" Text=">>" CssClass="btn btn-default" style="width:40px;height:30px;" /><br /><br />

                    <asp:Button ID="Button4" runat="server" Text="<<" CssClass="btn btn-default" style="width:40px;height:30px;" />

                </div>

                <div class="col-md-5">

                    <asp:ListBox ID="ListBox2" runat="server" style="width:100%;height:180px;"></asp:ListBox>

                </div>

            </div>

        </div>

    </form>

</body>

Preview:




priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-17-2014 11:50 AM

     sir......In my code view  when i am enter any text to the textbox after that select perticular radiobutton and then click on add button then those textbox item going in selected listbox but when i am not selecting radiobuuton then massege will be come "please select radiobutton"  and when i am not enter any text to the textbox and directly click on radiobuuon then again massage will come "please enter text in textbox".........then i am selecting one by one items in listbox and then click on ">","<",">>","<<" buttons add in another listbox but doublicate text  not allowed in listbox1 also and listbox2 also and when i am selecting  perticular text in one listbox1 and click on given button those item go to next listbox and removed in  first listbox this is my requirement .......................please send m reply 
                                                                                                                                    thank you..

priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-17-2014 11:53 AM

    thank u sir for sending m above source view .................but i am trying this type of code but  how to create this web page by using table  tags ........................


Sumit Kesarwani

Total Post:378

Points:2694
Posted on    November-18-2014 3:51 AM

Hi Priya, 

UI Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
     <script>
         function myFunction() {
             var value = document.getElementById("txtBox").value;
             if (value.length<=0) {
             alert("Please enter text in textbox!");
             }
         }
    </script>

    <form name="form1" runat="server">
        <table class="container" style="width: 1000px; margin: 50px auto;">
            <tr>
                <td>Enter Text 
                    <asp:TextBox ID="txtBox" runat="server" Style="width: 100%; height: 35px;"></asp:TextBox>
                    <br />
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:RadioButton ID="radiolist1" runat="server" GroupName="radioButton" Checked="true" />Listbox1
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <br />
                    <br />
                    <asp:RadioButton ID="radiolist2" runat="server" GroupName="radioButton" />Listbox2
                    <br />
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    <asp:Button  OnClientClick="myFunction()" CssClass="btn btn-info" runat="server" Text="Add" ID="btnAdd" OnClick="btnAdd_Click" />
                    <br />
                    <br />
                </td>
            </tr>
            <tr>
                <td style="width: 200px;">
                    <asp:ListBox ID="ListBox1" runat="server" Style="width: 200px; height: 180px;"></asp:ListBox>
                </td>
                <td style="width: 100px;">
                    <center>
                    <asp:Button ID="btnLeft" runat="server" Text=">" CssClass="btn btn-default" Style="width: 40px; height: 30px;" OnClick="btnLeft_Click" /><br />
                    <br />
                    <asp:Button ID="btnRight" runat="server" Text="<" CssClass="btn btn-default" Style="width: 40px; height: 30px;" OnClick="btnRight_Click" /><br />
                    <br />
                    <asp:Button ID="btnDoubleLeft" runat="server" Text=">>" CssClass="btn btn-default" Style="width: 40px; height: 30px;" OnClick="btnDoubleLeft_Click" /><br />
                    <br />
                    <asp:Button ID="btnDoubleRight" runat="server" Text="<<" CssClass="btn btn-default" Style="width: 40px; height: 30px;" OnClick="btnDoubleRight_Click" />
                    </center>
                </td>
                <td style="margin-left: 0px;">
                    <asp:ListBox ID="ListBox2" runat="server" Style="width: 200px; height: 180px;"></asp:ListBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Server Side Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        if (radiolist1.Checked)
        {
            var item = ListBox1.Items.FindByText(txtBox.Text);
            if (item == null)
            {
                var itemSelected = new ListItem();
                itemSelected.Value = txtBox.Text;
                ListBox1.Items.Add(itemSelected);

            }
            else
            {
                ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Item Already Exists!')", true);
                return;
            }
        }
        else
        {
            var item = ListBox2.Items.FindByText(txtBox.Text);
            if (item == null)
            {
                var itemSelected = new ListItem();
                itemSelected.Value = txtBox.Text;
                ListBox2.Items.Add(itemSelected);
            }
            else
            {
                ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Item Already Exists!')", true);
                return;
            }
        }
    }
    protected void btnLeft_Click(object sender, EventArgs e)
    {
        string item = ListBox1.SelectedValue.ToString();
        ListBox2.Items.Add(item);
        ListBox1.Items.Remove(item);
    }
    protected void btnRight_Click(object sender, EventArgs e)
    {
        string item = ListBox2.SelectedValue.ToString();
        var itemSelected = new ListItem();
        itemSelected.Value = item.ToString();
        ListBox1.Items.Add(itemSelected);
        ListBox2.Items.Remove(itemSelected);
    }
    protected void btnDoubleLeft_Click(object sender, EventArgs e)
    {
        if (ListBox1.Items != null)
        {
            foreach (var item in ListBox1.Items)
            {
                var itemCurrent = ListBox2.Items.FindByText(item.ToString());
                var itemSelected = new ListItem();
                itemSelected.Value = item.ToString();
                if (itemCurrent == null)
                {
                    ListBox2.Items.Add(itemSelected);
                    ListBox1.Items.Remove(itemSelected);
                }
            }
        }
    }
    protected void btnDoubleRight_Click(object sender, EventArgs e)
    {
        if (ListBox2.Items != null)
        {
            foreach (var item in ListBox2.Items)
            {
                var itemCurrent = ListBox1.Items.FindByText(item.ToString());
                var itemSelected = new ListItem();
                itemSelected.Value = item.ToString();
                if (itemCurrent == null)
                {
                    ListBox1.Items.Add(itemSelected);
                    ListBox2.Items.Remove(itemSelected);
                }
            }
        }
    }
}


priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-18-2014 5:09 AM

  thank you sir for sending source view and code view to me.................but why u are using client side scripting variable var in this program 

Sumit Kesarwani

Total Post:378

Points:2694
Posted on    November-18-2014 6:44 AM

Hi Priya, 

"Var" is an implicit type. It aliases any type. The aliased type is determined by the C# compiler. This has no performance penalty.

You can use it if you want to else you have to change the "var" into the return type of the statement.

priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-18-2014 9:38 AM

 Thanku sir,..............
              but i am  understand this coding ,you are using javascript function in source code and access in code view please send the code without using javascript function ............................


priya kapte
priya kapte

Total Post:6

Points:42
Posted on    November-19-2014 9:48 AM

     i want coding  of this program sir, but without using  java script functions .............................please give m reply....................

Don't want to miss updates? Please click the below button!

Follow MindStick