Tìm kiếm dữ liệu sử dụng AJAX Modal Popup Extender trong ASP.Net

By Unknown - Tuesday, May 12, 2015 - No Comments

(Tìm kiếm với Modal Popup trong Asp.net) – Trong các Form nhập dữ liệu, để tìm kiếm và chọn nhanh thông tin từ bảng dữ liệu khác, các lập trình viên thường sử dụng 1 trong 2 cách đó là: Autocomplete hoặc Popup. Mỗi cách sử dụng có những ưu nhược điểm khác nhau, với Autocomplete người sử dụng không phải mất thêm nhiều thao tác kích để chọn dữ liệu, nhưng với dữ liệu có nhiều tiêu chí để tìm thì phải sử dụng Popup. Với Popup người sử dụng sẽ mất thêm thao tác nhưng khi cần nhiều tiêu chí để tìm kiếm chính xác dữ liệu thì Popup sẽ giúp người lập trình giải quyết được vấn đề này. Trong bài viết này, thủ thuật tin học sẽ hướng dẫn các bạn cách sử dụng ASP.Net AJAX Control Toolkit ModalPopupExtender kết hợp với các thuộc tính css của bootstrap để tạo Popup trong asp.net. Popup này sẽ có chức năng tìm kiếm dữ liệu một cách nhanh chóng, thuận tiện và dễ dàng.

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

- B1: Tạo CSDL Customers trong SQL Server

- B2: Tạo Bảng Accounts có cấu trúc phía dưới

STT	Tên trường	Kiểu trường	Ghi chú
1	AccountID	Int	Trường tự tăng
2	AccountCode	nvarchar(25)
3	AccName	nvarchar(250)
4	AccAddress	nvarchar(250)
5	AccPhone	nvarchar(50)
6	AccFAX	nvarchar(50)
7	AccEmail	nvarchar(50)
8	AccWebsite	nvarchar(150)
9	AccDesc	nvarchar(1500)
10	CreatedDate	datetime
11	ModifiedDate	datetime

- B3: Tạo Bảng Contacts có cấu trúc phía dưới

STT	Tên trường	Kiểu trường	Ghi chú
1	ContactID	Int	Trường tự tăng
2	AccountID	Int
3	ContactCode	nvarchar(25)
4	ContactName	nvarchar(250)
5	Sex	bit
6	Birthdate	datetime
7	ContactAddress	nvarchar(250)
8	Mobille	nvarchar(50)
9	Email	nvarchar(150)
10	CreatedDate	datetime
11	ModifiedDate	datetime

- B4: Tạo các stored procedure trong SQL Server

Bạn có thể tải về bảng cơ sở dữ liệu SQL bằng cách nhấn vào liên kết tải về dưới đây

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

Imports System.Data.SqlClient

Imports System.Data

Namespace SearchRecordsUsingModalPopup

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

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

Public Function RunSQL(ByVal ProcName As String, ByVal ParamArray Para() As ObjectPara) As Object

Try

Dim _cnn As New SqlConnection(_connectionString)

_cnn.Open()

Dim cmd As New SqlCommand(ProcName, _cnn)

cmd.CommandType = CommandType.StoredProcedure

For Each p As ObjectPara In Para

cmd.Parameters.Add(New SqlParameter(p.Name, p.Value))

Return cmd.ExecuteScalar

Catch ex As Exception

Return Nothing

End Try

End Function

Public Function GetRow(ByVal ProcName As String, ByVal ParamArray Para() As ObjectPara) As DataRow

Try

Dim tb As New DataTable

Dim adap As New SqlDataAdapter(ProcName, _connectionString)

adap.SelectCommand.CommandType = CommandType.StoredProcedure

For Each p As ObjectPara In Para

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

adap.Fill(tb)

If tb.Rows.Count Then

Return tb.Rows(0)

End If

Catch ex As Exception

Return Nothing

End Try

Return Nothing

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

Public Class MyEventArgs

Inherits EventArgs

Private Name As String

Private MyId As String

Public Property SelectedName() As String

Get

Return Name

End Get

Set(ByVal value As String)

Name = value

End Set

End Property

Public Property Id() As String

Get

Return MyId

End Get

Set(ByVal value As String)

MyId = value

End Set

End Property

End Class

End Namespace

Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config

- B6: Download thư viện AjaxControlToolkit tại địa chỉ: Download

- B7: Giải nén AjaxControlToolkit.Binary.NET4, và References Ajaxcontroltoolkit.dll trong thư mục vừa giải nén vào Project.

- B8: Download thư viện Bootstrap, giải nén và copy file bootstrap.css vào thư mục Styles trong Project

- B9: Tạo file Button.css trong thư mục Styles và nhập các thông tin phía dưới

.icon-add {