LIST BOX CONTROL EXAMPLE

priya kapte 2993 15 Nov 2014

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........................

priya kapte

Other

8 Answers

priya kapte 19 Nov 2014

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

priya kapte 18 Nov 2014

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 ............................

Sumit Kesarwani 18 Nov 2014

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 18 Nov 2014

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 18 Nov 2014

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 17 Nov 2014

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 ........................

priya kapte 17 Nov 2014

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..

Anonymous User 17 Nov 2014

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:

forum

LIST BOX CONTROL EXAMPLE

Can you answer this question?

8 Answers