(Cách tạo Accordion động trong Asp.net) - Trong bài viết “Tạo Accordion từ dữ liệu SQL Server sử dụng Bootstrap trong Asp.net” thủ thuật tin học đã giới thiệu với các bạn cách tạo Accordion sử dụng thư viện Bootstrap. Hôm nay thủ thuật tin học sẽ giới thiệu tiếp với các bạn cách tạo Accordion nhưng sử dụng thư viện AjaxControlToolkit. Với việc tạo Accordion sử dụng thư viện AjaxControlToolkit, người lập trình sẽ có thêm 1 lựa chọn nữa cho việc tạo Accordion.Và tùy vào từng điều kiện, yêu cầu cụ thể mà người lập trình có thể chọn cho mình cách sử dụng phù hợp nhất.
- B1: Tạo Bảng Accordions có cấu trúc phía dưới trong CSDL SQL Server.
| STT | Tên trường | Kiểu trường | Ghi chú |
| 1 | ItemID | Int | Trường tự tăng |
| 2 | Title | nvarchar(150) | |
| 3 | Description | ntext | Mô tả |
| 4 | SortOrder | Int | Thứ tự sắp xếp |
| 5 | IsVisible | bit | Ân/Hiện Accordion |
- B3: Tạo stored procedure trong SQL Server
CREATE procedure [dbo].[Pro_Accordions_List]
@IsVisible bit
as
declare @strSQL nvarchar(1000)
declare @strWhere nvarchar(500)
declare @strOrder nvarchar (50)
set @strSQL= 'Select * from Accordions'
set @strWhere =' where 1=1'
if @IsVisible=1
set @strWhere= @strWhere +' and (IsVisible=1)'
if @IsVisible=0
set @strWhere= @strWhere +' and (IsVisible=0 Or IsVisible Is Null)'
set @strOrder =' Order by SortOrder, Title'
set @strSQL=@strSQL+@strWhere+@strOrder
print @strSQL
exec sp_executesql @strSQL
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
- B4: 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 BootstrapAccordion
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))
Next
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
Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config
- B4: Download thư viện AjaxControlToolkit tại địa chỉ: Download
- B5: Giải nén AjaxControlToolkit.Binary.NET4, và References Ajaxcontroltoolkit.dll trong thư mục vừa giải nén vào Project.
- B6: Mở file site.css trong thư mục Styles bổ xung các thuộc tính phía dưới
/* Accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
.accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
.accordionHeaderSelected a:hover
{
background: none;
text-decoration: underline;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
- B7: Mở file Default.aspxdưới dạng HTML và thay đổi các thông tin theo phía dưới
<%@ PageTitle="Accordion Sample" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AjaxControlToolkitAccordion._Default" %>
<%@ RegisterTagPrefix="cc1"Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h1>
Creating Accordion with AjaxControlToolkit
</h1>
<asp:ScriptManager ID="ScriptManager1"runat="server"/>
<cc1:Accordion ID="MyAccordion"runat="Server"SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
</cc1:Accordion>
</asp:Content>
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 AjaxControlToolkitAccordion
{
public partial class _Default : System.Web.UI.Page
{
#region"Create Accordion"
private void CreateAccordion()
{
DataTable objBind = newDataTable();
int iCount = 0;
int i = 0;
objBind = BindData();
if ((objBind != null))
{
if (objBind.Rows.Count > 0)
{
iCount = objBind.Rows.Count;
Label lbTitle = default(Label);
Label lbContent = default(Label);
AjaxControlToolkit.AccordionPane pn = default(AjaxControlToolkit.AccordionPane);
foreach (DataRowrow in objBind.Rows)
{
lbTitle = new Label();
lbContent = new Label();
lbTitle.Text = row["Title"].ToString();
lbContent.Text = row["Description"].ToString();
pn = new AjaxControlToolkit.AccordionPane();
pn.ID = "Pane" + i.ToString();
pn.HeaderContainer.Controls.Add(lbTitle);
pn.ContentContainer.Controls.Add(lbContent);
MyAccordion.Panes.Add(pn);
i = i + 1;
}
}
}
}
#endregion
#region"Bind Data"
private DataTableBindData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_Accordions_List", new ObjectPara("@IsVisible", 1));
return objBind;
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
CreateAccordion();
}
}
catch
{
}
}
#endregion
}
}Namespace AjaxControlToolkitAccordion
Public Class _Default
Inherits System.Web.UI.Page
#Region "Create Accordion"
Private Sub CreateAccordion()
Dim objBind As New DataTable
Dim iCount As Integer = 0
Dim i As Integer = 0
objBind = BindData()
If Not objBind Is Nothing Then
If objBind.Rows.Count > 0 Then
iCount = objBind.Rows.Count
Dim lbTitle AsLabel
Dim lbContent AsLabel
Dim pn AsAjaxControlToolkit.AccordionPane
For Eachrow As DataRowIn objBind.Rows
lbTitle = New Label()
lbContent = New Label()
lbTitle.Text = row("Title").ToString()
lbContent.Text = Server.HtmlDecode(row("Description"))
pn = NewAjaxControlToolkit.AccordionPane()
pn.ID = "Pane" + i.ToString
pn.HeaderContainer.Controls.Add(lbTitle)
pn.ContentContainer.Controls.Add(lbContent)
MyAccordion.Panes.Add(pn)
i = i + 1
Next
End If
End If
End Sub
#End Region
#Region "Bind Data"
Private FunctionBindData() As DataTable
Dim objSQL As New SqlDataProvider
Dim objBind As DataTable = objSQL.FillTable("Pro_Accordions_List", New ObjectPara("@IsVisible", 1))
Return objBind
End Function
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
CreateAccordion()
End If
Catch ex As Exception
End Try
End Sub
#End Region
End Class
End Namespace
Chạy Project, các bạn sẽ có một Accordion chuyên nghiệp giống hình phía dưới và với các thông tin được lấy từ CSDL SQL Server, người sử dụng có thể dễ dàng bổ xung hoặc chỉnh sửa thông tin cho các Accordion nhanh chóng và dễ dàng hơn.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment