Implement Dual ListBox plugin from database in ASP.Net using jQuery

Hi micah,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<asp:ListBox ID="lstCustomers" runat="server" SelectionMode="Multiple" class="demo"></asp:ListBox>
<link rel="stylesheet" type="text/css" href="dual-listbox.css" />
<script type="text/javascript" src="dual-listbox.js"></script>
<script type="text/javascript">
    new DualListbox('.demo', {
        addEvent: function (value) { },
        removeEvent: function (value) { },
        availableTitle: 'Available options',
        selectedTitle: 'Selected options',
        addButtonText: 'Add (>)',
        removeButtonText: 'Remove (<)',
        addAllButtonText: 'Add All (>>)',
        removeAllButtonText: 'Remove All (<<)'
    });
</script>
<style type="text/css">
    .dual-listbox .dual-listbox__button {
        margin-bottom: 5px;
        border: 0;
        background-color: #0090CB !important;
        padding: 10px;
        color: #fff;
    }
</style>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT TOP 15 CustomerID, ContactName FROM Customers ORDER BY ContactName"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                lstCustomers.DataSource = cmd.ExecuteReader();
                lstCustomers.DataTextField = "ContactName";
                lstCustomers.DataValueField = "CustomerID";
                lstCustomers.DataBind();
                con.Close();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand("SELECT TOP 15 CustomerID, ContactName FROM Customers ORDER BY ContactName")
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                con.Open()
                lstCustomers.DataSource = cmd.ExecuteReader()
                lstCustomers.DataTextField = "ContactName"
                lstCustomers.DataValueField = "CustomerID"
                lstCustomers.DataBind()
                con.Close()
            End Using
        End Using
    End If
End Sub

Screenshot