Tạo Tab động sử dụng Ajaxcontroltoolkit từ XML trong Asp.net

By Unknown - Wednesday, May 6, 2015 - No Comments

(Tạo Tab động trong Asp.net) - ASP.Net Ajax control toolkit là một dạng thư viện mã nguồn mở, ở đây bao gồm các hàm, chức năng được viết sẵn trên nền tảng ASP.Net và Ajax nó được ứng dụng rộng rãi trong Web và được tích hợp vào trong Visual Studio. Trong bài viết “Tạo Tab động sử dụng Ajaxcontroltoolkit trong Asp.net”, thủ thuật lập trình đã giới thiệu với các bạn cách tạo Tabs lấy dữ liệu từ SQL Server có sử dụng các thư viện Ajaxcontroltoolkit. Hôm nay thủ thuật lập trình sẽ giới thiệu cách tạo các Tabs được lấy dữ liệu từ file XML. Khi sử dụng Data bằng file XML người lập trình sẽ thuận tiện hơn trong việc phát triển cũng như triển khai.

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

- B1: Tạo File XML DynamicTabs có cấu trúc phía dưới và đặt file trong thư mục App_Data

- B2: Nhập dữ liệu cho file XML DynamicTabs

<?xml version="1.0" standalone="yes"?>

<root>

<items>

<ControlURL>Controls/Tab1.ascx</ControlURL>

</items>

<items>

Tab 2

</Description>

<ControlURL>Controls/Tab2.ascx</ControlURL>

</items>

<items>

Tab 3

</Description>

<ControlURL>Controls/Tab3.ascx</ControlURL>

</items>

<items>

Tab 4

</Description>

<ControlURL>Controls/Tab4.ascx</ControlURL>

</items>

<items>

Tab 5

</Description>

<ControlURL>Controls/Tab5.ascx</ControlURL>

</items>

</root>

- B3: Tạo Project trong Microsoft Visual Studio 2010

- B4: Trong Project tạo thư mục Controls để chứa các file thông tin mà các Tab sẽ hiển thị

- B5: Trong thư mục Controls vừa tạo, thêm các file có đuôi .ascx

- 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: Mở file Default.aspxdưới dạng HTML và bổ xung Control

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:PlaceHolder ID="plTabs" runat="server"></asp:PlaceHolder>

- B9: Viết Code cho file Default.aspx
C# Code

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

using System;

using System.Web.Services;

using System.Web.Script.Services;

using System.Collections.Generic;

using System.Data;

using System.IO;

using System.Web.Caching;

using System.Web.UI;

using AjaxControlToolkit;

namespace DynamicTabs

{

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

{

#region "Create Tab"

private void CreateTabs()

{

DataSet objBind = new DataSet();

int iCount = 0;

int i = 0;

AjaxControlToolkit.TabContainer tbcDynamic = null;

tbcDynamic = new AjaxControlToolkit.TabContainer();

objBind = BindData();

if (objBind != null)

{

if (objBind.Tables[0].Rows.Count > 0)

{

iCount = objBind.Tables[0].Rows.Count;

foreach (DataRow row in objBind.Tables[0].Rows)

{

AjaxControlToolkit.TabPanel TabPanel = new AjaxControlToolkit.TabPanel();

Control myCtrl = new Control();

if (File.Exists(Server.MapPath("~/" + row["ControlURL"].ToString())))

{

myCtrl = Page.LoadControl(row["ControlURL"].ToString());

}

var _with1 = TabPanel;

_with1.HeaderText = row["TabName"].ToString();

_with1.ID = "Tab" + row["ItemID"].ToString();

tbcDynamic.Tabs.Add(TabPanel);

tbcDynamic.Tabs[i].Controls.Add(myCtrl);

i = i + 1;

}

plTabs.Controls.Add(tbcDynamic);

}

#endregion

#region "Bind Data"

private DataSet BindData()

{

DataSet objBind = new DataSet();

//Caching

if (Cache["Cache_DynamicTabs"] == null)

{

objBind.ReadXml(Server.MapPath("App_Data\\DynamicTabs.xml"));

Cache["Cache_DynamicTabs"] = objBind;

}

else

{

objBind = (DataSet)Cache["Cache_DynamicTabs"];

}

return objBind;

}

#endregion

#region "Event Handles"

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

{

try

{

if (!IsPostBack)

{

CreateTabs();

}

catch

{

}

#endregion

}

VB.NET Code

Imports System.IO

Namespace DynamicTabs

Public Class _Default

Inherits System.Web.UI.Page

#Region "Create Tabs"

Private Sub CreateTabs()

Dim objBind As New DataSet

Dim iCount As Integer = 0

Dim i As Integer = 0

Dim tbcDynamic As AjaxControlToolkit.TabContainer = Nothing

tbcDynamic = New AjaxControlToolkit.TabContainer

objBind = BindData()

If Not objBind Is Nothing Then

If objBind.Tables(0).Rows.Count > 0 Then

iCount = objBind.Tables(0).Rows.Count

For i = 0 To iCount - 1

Dim row As DataRow = objBind.Tables(0).Rows(i)

Dim TabPanel As New AjaxControlToolkit.TabPanel

Dim myCtrl As New Control

If File.Exists(Server.MapPath("~/" & row("ControlURL").ToString)) Then

myCtrl = Page.LoadControl(row("ControlURL").ToString)

End If

With TabPanel

.HeaderText = row("TabName").ToString

.ID = "Tab" & row("ItemID").ToString

End With

tbcDynamic.Tabs.Add(TabPanel)

tbcDynamic.Tabs(i).Controls.Add(myCtrl)

plTabs.Controls.Add(tbcDynamic)

End If

End Sub

#End Region

#Region "Bind Data"

Private Function BindData() As DataSet

Dim objBind As DataSet = New DataSet()

'Caching

If Cache("Cache_DynamicTabs") Is Nothing Then

objBind.ReadXml(Server.MapPath("App_Data\DynamicTabs.xml"))

Cache("Cache_DynamicTabs") = objBind

Else

objBind = CType(Cache("Cache_DynamicTabs"), DataSet)

End If

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

CreateTabs()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Trong trường hợp bạn không sử dụng css khác, AjaxControlToolkit sẽ sử dụng css mặc định đã được tích hợp sẵn vào trong thư viện. Bạn có thể tự xây dựng phong cách CssClass theo cách của riêng mình để khoác lên các Tab một tấm áo đẹp và chuyên nghiệp hơn. Dưới đây là các thuộc tính Css của Tab AjaxToolkit.

.ajax__tab_header: Định dạng tiêu đề tab container.

.ajax__tab_outer: Định dạng cạnh trái của một Tab.

.ajax__tab_inner: Định dạng cạnh bên phải của Tab.

.ajax__tab_tab: Định dạng phần trung tâm của một Tab chứa văn bản.

.ajax__tab_hover: Định dạng khi di chuyển chuột qua trạng thái của một Tab.

.ajax__tab_active: Định dạng khi Tab đang được chọn.

.ajax__tab_body: Định dạng vùng chứa nội dung mỗi Tab.

Bây giờ chạy Project bạn sẽ có kết quả sẽ giống như hình dưới.

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

Quang Bình

News Ticker