Filter ASP.Net GridView with multi-select DropDownList with jQuery Select2 Plugin using C# and VB.Net

Hi akhter,

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".js-example-placeholder-single").select2({
            placeholder: "Select",
            allowClear: false
        });
        $('#ddlCountries').on('change', function () {
            $('#hfSelected').val($(this).val());
        });            
    });
</script>
<asp:DropDownList ID="ddlCountries" runat="server" multiple="multiple"
    CssClass="form-control js-example-placeholder-single" Width="200px">
</asp:DropDownList>
<asp:HiddenField ID="hfSelected" runat="server" />
<asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="OnSearch" />
<hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField HeaderText="Id" DataField="CustomerID" />
        <asp:BoundField HeaderText="Name" DataField="ContactName" />
        <asp:BoundField HeaderText="City" DataField="City" />
    </Columns>
</asp:GridView>

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 (!IsPostBack)
    {
        ddlCountries.DataSource = GetData("SELECT DISTINCT Country FROM Customers WHERE Country IS NOT NULL");
        ddlCountries.DataTextField = "Country";
        ddlCountries.DataValueField = "Country";
        ddlCountries.DataBind();
    }
}

protected void OnSearch(object sender, EventArgs e)
{
    string query = "SELECT CustomerID,ContactName,City FROM Customers";
    string condition = string.Empty;
    foreach (string item in hfSelected.Value.Split(','))
    {
        condition += string.Format("'{0}',", item);
    }

    if (!string.IsNullOrEmpty(condition))
    {
        condition = string.Format(" WHERE Country IN ({0})", condition.Substring(0, condition.Length - 1));
    }

    GridView1.DataSource = GetData(query + condition);
    GridView1.DataBind();
}

private DataTable GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                cmd.Connection = con;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);

                    return dt;
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        ddlCountries.DataSource = GetData("SELECT DISTINCT Country FROM Customers WHERE Country IS NOT NULL")
        ddlCountries.DataTextField = "Country"
        ddlCountries.DataValueField = "Country"
        ddlCountries.DataBind()
    End If
End Sub

Protected Sub OnSearch(ByVal sender As Object, ByVal e As EventArgs)
    Dim query As String = "SELECT CustomerID,ContactName,City FROM Customers"
    Dim condition As String = String.Empty
    For Each item As String In hfSelected.Value.Split(","c)
        condition += String.Format("'{0}',", item)
    Next
    If Not String.IsNullOrEmpty(condition) Then
        condition = String.Format(" WHERE Country IN ({0})", condition.Substring(0, condition.Length - 1))
    End If

    GridView1.DataSource = GetData(query & condition)
    GridView1.DataBind()
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                cmd.Connection = con
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    Return dt
                End Using
            End Using
        End Using
    End Using
End Function

Screenshot