Chọn nhiều giá trị trên Dropdownlist trong Asp.net

By Unknown - Saturday, August 1, 2015 - No Comments

(Multiple Select DropDownList with CheckBoxes in Asp.net) – Mặc định Dropdowlist chỉ cho phép người sử dụng lựa chọn 1 giá trị trong danh sách. Nếu cần sử dụng chức năng lọc hoặc thêm đồng thời nhiều giá trị khi được chọn người sử dụng Control Checkboxlist. Tuy nhiên khi sử dụng Control này sẽ tốn nhiều diện tích trên Form khi có nhiều giá trị trong danh sách. Vậy có Control nào cách hiển thị giống DropdownList và có thể chọn được đồng thời nhiều giá trị không? Bài viết dưới đây sẽ hướng dẫn các bạn sử dụng Control ListBox và cho phép người sử dụng chọn nhiều giá trị đồng thời.

Xem những Video hay dành cho thiếu nhi - Nghe trên Youtube

- B1: Download CSDL Northwind

- B2: Tạo stored procedure trong SQL Server

CREATE PROCEDURE [dbo].[Pro_Categories_List]

@Keyword nvarchar(250)

declare @strSQL nvarchar(1000)

declare @strWhere nvarchar(500)

declare @strOrder nvarchar (50)

set @strSQL= 'SELECT CategoryID,CategoryName from Categories'

set @strWhere =' Where 1=1 '

if @Keyword<>''

set @strWhere= @strWhere +' And (CategoryName like N''%' +@Keyword+'%'' )'

set @strOrder =' Order by CategoryName'

set @strSQL=@strSQL+@strWhere+@strOrder

print @strSQL

exec sp_executesql @strSQL

- B3: Tạo Project trong Microsoft Visual Studio 2010

Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.

C# Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

namespace MultiSelectDropdownlist

{

public class SqlDataProvider

{

#region "Membres Prives"

private string _connectionString;

#endregion

#region "Constructeurs"

public SqlDataProvider()

{

try

{

_connectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;

}

catch

{

}

#endregion

#region "Proprietes"

public string ConnectionString

{

get { return _connectionString; }

}

#endregion

#region "Functions"

public DataTable FillTable(string ProcName, params ObjectPara[] Para)

{

try

{

DataTable tb = new DataTable();

SqlDataAdapter adap = new SqlDataAdapter(ProcName, _connectionString);

adap.SelectCommand.CommandType = CommandType.StoredProcedure;

if (Para != null)

{

foreach (ObjectPara p in Para)

{

adap.SelectCommand.Parameters.Add(new SqlParameter(p.Name, p.Value));

}

adap.Fill(tb);

return tb;

}

catch

{

return null;

}

#endregion

}

public class ObjectPara

{

string _name;

object _Value;

public ObjectPara(string Pname, object PValue)

{

_name = Pname;

_Value = PValue;

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public object Value

{

get { return _Value; }

set { _Value = value; }

}

VB.NET Code

Imports System.Data.SqlClient

Imports System.Data

Namespace MultiSelectDropdownlist

Public Class SqlDataProvider

#Region "Membres Prives"

Shared _IsError As Boolean = False

Private _connectionString As String

#End Region

#Region "Constructeurs"

Public Sub New()

Try

_connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString

_IsError = False

Catch ex As Exception

_IsError = True

End Try

End Sub

#End Region

#Region "Proprietes"

Public ReadOnly Property ConnectionString() As String

Get

Return _connectionString

End Get

End Property

#End Region

#Region "Functions"

Public Function FillTable(ByVal ProcName As String, ByVal ParamArray Para() As ObjectPara) As DataTable

Try

Dim tb As New DataTable

Dim adap As New SqlDataAdapter(ProcName, _connectionString)

adap.SelectCommand.CommandType = CommandType.StoredProcedure

If Not Para Is Nothing Then

For Each p As ObjectPara In Para

adap.SelectCommand.Parameters.Add(New SqlParameter(p.Name, p.Value))

End If

adap.Fill(tb)

Return tb

Catch ex As Exception

Return Nothing

End Try

End Function

#End Region

End Class

Public Class ObjectPara

Dim _name As String

Dim _Value As Object

Sub New(ByVal Pname As String, ByVal PValue As Object)

_name = Pname

_Value = PValue

End Sub

Public Property Name() As String

Get

Return _name

End Get

Set(ByVal value As String)

_name = value

End Set

End Property

Public Property Value() As Object

Get

Return _Value

End Get

Set(ByVal value As Object)

_Value = value

End Set

End Property

End Class

End Namespace

- B4: Download các file bootstrap-multiselect.js, bootstrap-multiselect.css lần lượt copy vào các thư mục Js và Styles của Project.

- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head

rel="stylesheet" type="text/css" />

- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

<%@ Page Title="Multiple Select DropDownList with CheckBoxes in ASP.Net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MultiSelectDropdownlist._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<h4>

Multiple Select DropDownList with CheckBoxes in ASP.Net

</h4>

<br />

<asp:Literal ID="ltScript" runat="server"></asp:Literal>

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

<tr>

<td>

<asp:ListBox ID="ddlObject" runat="server" SelectionMode="Multiple">

</asp:ListBox>

<asp:LinkButton id="cmdSubmit" runat="server" Text="Submit" OnClick="cmdSubmit_Click" Causesvalidation="true">

</asp:LinkButton>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

- B7: Viết Code cho file Default.aspx

C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using Microsoft.VisualBasic;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.IO;

using System.Diagnostics;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Caching;

namespace MultiSelectDropdownlist

{

public partial class _Default : System.Web.UI.Page

{

#region "Bind Data"

private void PopulateDropdownlist()

{

DataTable objBind = new DataTable();

objBind = BindData();

if (objBind != null)

{

if (objBind.Rows.Count > 0)

{

ddlObject.DataTextField = "CategoryName";

ddlObject.DataValueField = "CategoryID";

ddlObject.DataSource = objBind;

ddlObject.DataBind();

}

private DataTable BindData()

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = objSQL.FillTable("Pro_Categories_List", new ObjectPara("@Keyword", ""));

return objBind;

}

#endregion

#region "Bind Data"

private void WriteJava()

{

string sJava = "";

//Caching

if (Cache["Cache_MultiSelect"] == null)

{

sJava += "<script type=\"text/javascript\">";

sJava += " function pageLoad() {";

sJava += " $('[id*=ddlObject]').multiselect({";

sJava += " includeSelectAllOption: true" ;

sJava += " });" ;

sJava += " };" ;

sJava += "</script>" ;

Cache["Cache_MultiSelect"] = sJava;

}

else

{

sJava = Convert.ToString(Cache["Cache_MultiSelect"]);

}

ltScript.Text = sJava;

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

WriteJava();

PopulateDropdownlist();

}

catch

{

}

protected void cmdSubmit_Click(object sender, System.EventArgs e)

{

string sMessage = "";

foreach (ListItem item in ddlObject.Items)

{

if (item.Selected)

{

sMessage += item.Text + "-" + item.Value + "<br />";

}

if (!string.IsNullOrEmpty(sMessage))

{

lblMessage.Text = "<b>Selected:</b><br />" + sMessage;

}

#endregion

}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Namespace MultiSelectDropdownlist

Public Class _Default

Inherits System.Web.UI.Page

#Region "Bind Data"

Private Sub PopulateDropdownlist()

Dim objBind As New DataTable

objBind = BindData()

If Not objBind Is Nothing Then

If objBind.Rows.Count > 0 Then

With ddlObject

.DataTextField = "CategoryName"

.DataValueField = "CategoryID"

End With

ddlObject.DataSource = objBind

ddlObject.DataBind()

End If

End Sub

Private Function BindData() As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable = objSQL.FillTable("Pro_Categories_List", New ObjectPara("@Keyword", ""))

Return objBind

End Function

#End Region

#Region "Javascript"

Private Sub WriteJava()

Dim sJava As String = ""

'Caching

If Cache("Cache_MultiSelect") Is Nothing Then

sJava &= "<script type=""text/javascript"">" & vbCrLf

sJava &= " function pageLoad() {" & vbCrLf

sJava &= " $('[id*=ddlObject]').multiselect({" & vbCrLf

sJava &= " includeSelectAllOption: true" & vbCrLf

sJava &= " });" & vbCrLf

sJava &= " };" & vbCrLf

sJava &= "</script>" & vbCrLf

Cache("Cache_MultiSelect") = sJava

Else

sJava = CType(Cache("Cache_MultiSelect"), String)

End If

ltScript.Text = sJava

End Sub

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

WriteJava()

PopulateDropdownlist()

End If

Catch ex As Exception

End Try

End Sub

Private Sub cmdSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdSubmit.Click

Dim sMessage As String = ""

If ddlObject.Items.Count > 0 Then

For Each item As ListItem In ddlObject.Items

If item.Selected Then

sMessage &= item.Text & "-" & item.Value & "<br />"

End If

If sMessage <> "" Then

lblMessage.Text = "<b>Selected:</b><br />" & sMessage

End If

End Sub

#End Region

End Class

End Namespace

Bây giờ chạy Project bạn đã có thể lựa chọn 1 hoặc nhiều giá trị trong danh sách rồi.

Chúc các bạn thành công!

Quang Bình

News Ticker