Sử dụng Bootstrap để thay đổi Style cho Dropdownlist trong Asp.net

By Unknown - Thursday, September 3, 2015 - No Comments

(Using Bootstrap to change DropDownList style in ASP.Net) – Theo mặc định khi lựa chọn giá trị trong danh sách Dropdownlist, chương trình sẽ không đánh dấu giá trị nào đã được người dùng đã chọn. Chính việc này sẽ gây khó khăn cho người dùng khi sửa và chọn lại giá trị trong Dropdownlist. Bài viết dưới đây sẽ hướng dẫn các bạn cách thay đổi Style để Dropdownlist trông đẹp và chuyên nghiệp hơn, ngoài ra đối với giá trị đã được chọn sẽ được đánh dấu giúp người dùng dễ dàng quan sát hơn.

Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube

- B1: Download CSDL Northwind tại đây và thực hiện công việc Restore Data.

- B2: 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 UsingBootstrapChangeDropdownlistStyle

{

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 sql)

{

try

{

DataTable tb = new DataTable();

SqlDataAdapter adap = new SqlDataAdapter(sql, _connectionString);

adap.Fill(tb);

return tb;

}

catch

{

return null;

}

#endregion

}

VB.NET Code

Imports System.Data.SqlClient

Imports System.Data

Namespace UsingBootstrapChangeDropdownlistStyle

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 sql As String) As DataTable

Try

Dim tb As New DataTable

Dim adap As New SqlDataAdapter(sql, _connectionString)

adap.Fill(tb)

Return tb

Catch ex As Exception

Return Nothing

End Try

End Function

#End Region

End Class

End Namespace

- B3: Download file bootstrap-select.css -> Copy vào thư mục Styles

- B4: Download file bootstrap-select.js -> Copy vào thư mục Js

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

<title>Using BootStrap to change DropDownList style in ASP.Net</title>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>

</head>

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

<%@ Page Title="Using Bootstrap to change DropDownList style in ASP.Net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UsingBootstrapChangeDropdownlistStyle._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>

Using Bootstrap to change DropDownList style in ASP.Net

</h4>

<br />

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

<tr>

<td>Category:

<asp:DropDownList ID="ddlObject" runat="server" Width="320px" class="selectpicker show-tick">

</asp:DropDownList>

</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;

namespace UsingBootstrapChangeDropdownlistStyle

{

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

{

#region "Bind Data"

private void PopulateDropdownlist()

{

DataTable objBind = new DataTable();

int CategoryID = -1;

string CategoryName = "";

string TotalProducts = "";

objBind = BindData();

if (objBind != null)

{

if (objBind.Rows.Count > 0)

{

for (int i = 0; i <= objBind.Rows.Count - 1; i++)

{

if (objBind.Rows[i]["CategoryID"] != null)

{

CategoryID =Convert.ToInt32(objBind.Rows[i]["CategoryID"]);

}

if (objBind.Rows[i]["CategoryName"] != null)

{

CategoryName = objBind.Rows[i]["CategoryName"].ToString();

}

if (objBind.Rows[i]["TotalProducts"] != null)

{

TotalProducts = objBind.Rows[i]["TotalProducts"].ToString();

}

ddlObject.Items.Add(new ListItem(CategoryName + " (" + TotalProducts + ")", CategoryID.ToString()));

}

private DataTable BindData()

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = objSQL.FillTable("Select Products.CategoryID, Categories.CategoryName, COUNT(Products.ProductID) AS TotalProducts FROM Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY Products.CategoryID, Categories.CategoryName ORDER BY Categories.CategoryName");

return objBind;

}

#endregion

#region "Event Handles"

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

{

try

{

if (!IsPostBack)

{

PopulateDropdownlist();

}

catch

{

}

#endregion

}

VB.NET Code

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

Namespace UsingBootstrapChangeDropdownlistStyle

Public Class _Default

Inherits System.Web.UI.Page

#Region "Bind Data"

Private Sub PopulateDropdownlist()

Dim objBind As New DataTable

Dim CategoryID As Integer = -1

Dim CategoryName As String = ""

Dim TotalProducts As String = ""

objBind = BindData()

If Not objBind Is Nothing Then

If objBind.Rows.Count > 0 Then

For i As Integer = 0 To objBind.Rows.Count - 1

If Not IsDBNull(objBind.Rows(i).Item("CategoryID")) Then

CategoryID = objBind.Rows(i).Item("CategoryID").ToString

End If

If Not IsDBNull(objBind.Rows(i).Item("CategoryName")) Then

CategoryName = objBind.Rows(i).Item("CategoryName").ToString

End If

If Not IsDBNull(objBind.Rows(i).Item("TotalProducts")) Then

TotalProducts = objBind.Rows(i).Item("TotalProducts").ToString

End If

With ddlObject

.Items.Add(New ListItem(CategoryName & " (" & TotalProducts & ")", CategoryID))

End With

End If

End Sub

Private Function BindData() As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable = objSQL.FillTable("Select Products.CategoryID, Categories.CategoryName, COUNT(Products.ProductID) AS TotalProducts FROM Products INNER JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY Products.CategoryID, Categories.CategoryName ORDER BY Categories.CategoryName")

Return objBind

End Function

#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

PopulateDropdownlist()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

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

Quang Bình

News Ticker