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

(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


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



Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



- 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 stringConnectionString
        {
            get { return_connectionString; }
        }

        #endregion

        #region"Functions"

        public DataTableFillTable(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 AsString

#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() AsString
            Get
                Return _connectionString
            End Get
        End Property

#End Region

#Region "Functions"

        Public FunctionFillTable(ByVal sql AsString) As DataTable
            Try
                Dim tb AsNew DataTable
                Dim adap AsNew 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
<%@ PageTitle="Nesting the AjaxControlToolkit Accordion and the ASP.NET Repeater" Language="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="AjaxAccordionAndRepeater._Default"%>
<%@ RegisterTagPrefix="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:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"/>
    <asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
        <ContentTemplate>
            <cc1:Accordion ID="MyAccordion"runat="server"Width="350"OnItemDataBound="MyAccordion_ItemDataBound"
                HeaderCssClass="accordionHeader"HeaderSelectedCssClass="accordionHeaderSelected">
                <HeaderTemplate>
                    <%#Eval("CategoryName") %>
                </HeaderTemplate>
                <ContentTemplate>
                    <asp:Label ID="lblCategoryID"runat="server"Visible="false"Text='<%# Eval("CategoryID") %>'></asp:Label>
                    <asp:Repeater ID="rptObject"runat="server">
                        <ItemTemplate>
                            <table id="tblItem"style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="5" width="100%" border="0">
                                <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
<%@ PageTitle="Nesting the AjaxControlToolkit Accordion and the ASP.NET Repeater" Language="vb"MasterPageFile="~/Site.Master"AutoEventWireup="false"CodeBehind="Default.aspx.vb"Inherits="AjaxAccordionAndRepeater._Default"%>
<%@ RegisterTagPrefix="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:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"/>
    <asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
        <ContentTemplate>
            <cc1:Accordion ID="MyAccordion"runat="server"Width="350"
                HeaderCssClass="accordionHeader"HeaderSelectedCssClass="accordionHeaderSelected">
                <HeaderTemplate>
                    <%#Eval("CategoryName") %>
                </HeaderTemplate>
                <ContentTemplate>
                    <asp:Label ID="lblCategoryID"runat="server"Visible="false"Text='<%# Eval("CategoryID") %>'></asp:Label>
                    <asp:Repeater ID="rptObject"runat="server">
                        <ItemTemplate>
                            <table id="tblItem"style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="5" width="100%" border="0">
                                <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 voidCreateAccordion()
        {
            DataTable objBind = newDataTable();
            objBind = BindData();

            if (objBind != null)
            {
                if (objBind.Rows.Count > 0)
                {
                    MyAccordion.DataSource = newSystem.Data.DataTableReader(objBind);
                    MyAccordion.DataBind();
                }
            }
            updatePanel.Update();
        }

        #endregion

        #region"Bind Data"

        private DataTableBindData()
        {
            SqlDataProvider objSQL = newSqlDataProvider();
            DataTable objBind = objSQL.FillTable("Select Categories.* From Categories");
            return objBind;
        }

        private DataTableBindProduct(int CategoryID)
        {
            SqlDataProvider objSQL = newSqlDataProvider();
            DataTable objBind = objSQL.FillTable("Select Products.* From Products Where CategoryID=" + CategoryID + "");
            return objBind;
        }

        #endregion

        #region"Accordion Methods"

        protected voidMyAccordion_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 voidPage_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 SubCreateAccordion()
            Dim objBind As New DataTable
            objBind = BindData()

            If Not objBind Is Nothing Then
                If objBind.Rows.Count > 0 Then
                    MyAccordion.DataSource = NewSystem.Data.DataTableReader(objBind)
                    MyAccordion.DataBind()
                End If
            End If
            updatePanel.Update()
        End Sub

#End Region

#Region "Bind Data"

        Private FunctionBindData() As DataTable
            Dim objSQL As New SqlDataProvider
            Dim objBind As DataTable = objSQL.FillTable("Select Categories.* From Categories")
            Return objBind
        End Function

        Private FunctionBindProduct(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 SubMyAccordion_ItemDataBound(ByVal sender As Object, ByVal e AsAjaxControlToolkit.AccordionItemEventArgs) Handles MyAccordion.ItemDataBound
            If e.ItemType = AccordionItemType.Content Then
                Dim CategoryID AsInteger = DirectCast(e.AccordionItem.FindControl("lblCategoryID"), Label).Text
                Dim cPanel AsAccordionContentPanel = e.AccordionItem
                Dim rptObject AsRepeater = DirectCast(cPanel.FindControl("rptObject"), Repeater)
                rptObject.DataSource = BindProduct(CategoryID)
                rptObject.DataBind()
            End If
        End Sub

#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

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

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



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

Quang Bình
8:40:00 PM
Gia Khang
, ,

0 comments Blogger 0 Facebook

Post a Comment

Subscribe to: Post Comments ( Atom )
 
lập trình đốt nét © 2013. All Rights Reserved. Powered by Blogger
Top