Sử dụng kết hợp giữa AjaxControlToolkit Accordion và Repeater trong Asp.net

By Unknown - Wednesday, August 26, 2015 - No Comments

(Nesting the AjaxControlToolkit Accordion control and the ASP.NET Repeater) – Bài viết dưới đây sẽ hướng dẫn các bạn cách sử dụng kết hợp giữa AjaxControlToolkit Accordion và Repeater để hiển thị dữ liệu. Dữ liệu chúng tôi lấy làm ví dụ là bảng Categories và Products trong CSDL Northwind. AjaxControlToolkit Accordion có nhiệm vụ hiển thị toàn bộ danh sách Categories, Repeater sẽ hiển thị toàn bộ Product theo từng Category được chọn

Xem những Video hay dành cho thiếu nhi - 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.Web;

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

namespace AjaxAccordionAndRepeater

{

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 AjaxAccordionAndRepeater

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

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

- B3: Download thư viện AjaxControlToolkit tại đây.

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

- B5: Download 2 file ảnh tại đây và Copy vào thư mục Styles\Images

- B6: Mở file Site.css bổ xung thêm đoạn mã dưới

/* Accordion */

.accordionHeader

{

background: url(images/sm_max.gif) no-repeat left center;

background-color:#f0f0f1;

border:1px solid #cfcece;

border-bottom:none;

padding: 5px 0px 0 15px;

color: #676f72;

text-decoration: none;

font-family:Arial;

font-size:12px;

font-weight:normal;

cursor:pointer;

padding:7px;

padding-left:15px;

}

.accordionHeaderSelected

{

background: url(images/sm_min.gif) no-repeat left center;

background-color:#f0f0f1;

border:1px solid #cfcece;

border-bottom:none;

padding: 5px 0px 0 15px;

color: #000000;

text-decoration: none;

font-family:Arial;

font-size:12px;

font-weight:bold;

cursor:pointer;

padding:7px;

padding-left:15px;

}

#tblItem td

{

border:1px solid #cfcece;

border-bottom:none;

}

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

C# Code

<%@ Page Title="Nesting the AjaxControlToolkit Accordion and the ASP.NET Repeater" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxAccordionAndRepeater._Default" %>

<%@ Register TagPrefix="cc1" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

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

<h3>

Nesting the AjaxControlToolkit Accordion control and the ASP.NET Repeater

</h3><br />

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

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

<cc1:Accordion ID="MyAccordion" runat="server" Width="350" OnItemDataBound="MyAccordion_ItemDataBound"

HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected">

<%#Eval("CategoryName") %>

</HeaderTemplate>

<asp:Label ID="lblCategoryID" runat="server" Visible="false" Text='<%# Eval("CategoryID") %>'></asp:Label>

<asp:Repeater ID="rptObject" runat="server">

<tr>

<td>

<asp:Image ID="imgBullet" ImageUrl="Images/tick.gif" runat="server" />

<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br />

</td>

</tr>

</table>

</ItemTemplate>

</asp:Repeater>

</ContentTemplate>

</cc1:Accordion>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

VB.NET Code

<%@ Page Title="Nesting the AjaxControlToolkit Accordion and the ASP.NET Repeater" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AjaxAccordionAndRepeater._Default" %>

<%@ Register TagPrefix="cc1" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

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

<h3>

Nesting the AjaxControlToolkit Accordion control and the ASP.NET Repeater

</h3><br />

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

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

<cc1:Accordion ID="MyAccordion" runat="server" Width="350"

HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected">

<%#Eval("CategoryName") %>

</HeaderTemplate>

<asp:Label ID="lblCategoryID" runat="server" Visible="false" Text='<%# Eval("CategoryID") %>'></asp:Label>

<asp:Repeater ID="rptObject" runat="server">

<tr>

<td>

<asp:Image ID="imgBullet" ImageUrl="Images/tick.gif" runat="server" />

<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br />

</td>

</tr>

</table>

</ItemTemplate>

</asp:Repeater>

</ContentTemplate>

</cc1:Accordion>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

- B8: 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.Web.UI;

using System.Web.UI.WebControls;

using AjaxControlToolkit;

namespace AjaxAccordionAndRepeater

{

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

{

#region "Create Accordion"

private void CreateAccordion()

{

DataTable objBind = new DataTable();

objBind = BindData();

if (objBind != null)

{

if (objBind.Rows.Count > 0)

{

MyAccordion.DataSource = new System.Data.DataTableReader(objBind);

MyAccordion.DataBind();

}

updatePanel.Update();

}

#endregion

#region "Bind Data"

private DataTable BindData()

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = objSQL.FillTable("Select Categories.* From Categories");

return objBind;

}

private DataTable BindProduct(int CategoryID)

{

SqlDataProvider objSQL = new SqlDataProvider();

DataTable objBind = objSQL.FillTable("Select Products.* From Products Where CategoryID=" + CategoryID + "");

return objBind;

}

#endregion

#region "Accordion Methods"

protected void MyAccordion_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)

{

if (e.ItemType == AccordionItemType.Content)

{

int CategoryID =Convert.ToInt32(((Label)e.AccordionItem.FindControl("lblCategoryID")).Text);

AccordionContentPanel cPanel = e.AccordionItem;

Repeater rptObject = (Repeater)cPanel.FindControl("rptObject");

rptObject.DataSource = BindProduct(CategoryID);

rptObject.DataBind();

}

#endregion

#region "Event Handles"

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

{

try

{

if (!IsPostBack)

{

CreateAccordion();

}

catch

{

}

#endregion

}

VB.NET Code

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

Imports AjaxControlToolkit

Namespace AjaxAccordionAndRepeater

Public Class _Default

Inherits System.Web.UI.Page

#Region "Create Accordion"

Private Sub CreateAccordion()

Dim objBind As New DataTable

objBind = BindData()

If Not objBind Is Nothing Then

If objBind.Rows.Count > 0 Then

MyAccordion.DataSource = New System.Data.DataTableReader(objBind)

MyAccordion.DataBind()

End If

updatePanel.Update()

End Sub

#End Region

#Region "Bind Data"

Private Function BindData() As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable = objSQL.FillTable("Select Categories.* From Categories")

Return objBind

End Function

Private Function BindProduct(ByVal CategoryID As Integer) As DataTable

Dim objSQL As New SqlDataProvider

Dim objBind As DataTable = objSQL.FillTable("Select Products.* From Products Where CategoryID=" & CategoryID & "")

Return objBind

End Function

#End Region

#Region "Accordion Methods"

Private Sub MyAccordion_ItemDataBound(ByVal sender As Object, ByVal e As AjaxControlToolkit.AccordionItemEventArgs) Handles MyAccordion.ItemDataBound

If e.ItemType = AccordionItemType.Content Then

Dim CategoryID As Integer = DirectCast(e.AccordionItem.FindControl("lblCategoryID"), Label).Text

Dim cPanel As AccordionContentPanel = e.AccordionItem

Dim rptObject As Repeater = DirectCast(cPanel.FindControl("rptObject"), Repeater)

rptObject.DataSource = BindProduct(CategoryID)

rptObject.DataBind()

End If

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

CreateAccordion()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.

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

Quang Bình

News Ticker