(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.
- 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>
<ItemID>1</ItemID>
<TabName>Tab 1</TabName>
<Description>Tab 1</Description>
<ControlURL>Controls/Tab1.ascx</ControlURL>
<SortOrder>1</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<ItemID>2</ItemID>
<TabName>Tab 2</TabName>
<Description>
Tab 2
</Description>
<ControlURL>Controls/Tab2.ascx</ControlURL>
<SortOrder>2</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<ItemID>3</ItemID>
<TabName>Tab 3</TabName>
<Description>
Tab 3
</Description>
<ControlURL>Controls/Tab3.ascx</ControlURL>
<SortOrder>3</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<ItemID>4</ItemID>
<TabName>Tab 4</TabName>
<Description>
Tab 4
</Description>
<ControlURL>Controls/Tab4.ascx</ControlURL>
<SortOrder>4</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<ItemID>5</ItemID>
<TabName>Tab 5</TabName>
<Description>
Tab 5
</Description>
<ControlURL>Controls/Tab5.ascx</ControlURL>
<SortOrder>5</SortOrder>
<IsVisible>1</IsVisible>
</items>
</root>
- 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
- 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 voidCreateTabs()
{
DataSet objBind = newDataSet();
int iCount = 0;
int i = 0;
AjaxControlToolkit.TabContainertbcDynamic = null;
tbcDynamic = new AjaxControlToolkit.TabContainer();
objBind = BindData();
if (objBind != null)
{
if (objBind.Tables[0].Rows.Count > 0)
{
iCount = objBind.Tables[0].Rows.Count;
foreach (DataRowrow in objBind.Tables[0].Rows)
{
AjaxControlToolkit.TabPanel TabPanel = newAjaxControlToolkit.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 DataSetBindData()
{
DataSet objBind = newDataSet();
//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 voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
CreateTabs();
}
}
catch
{
}
}
#endregion
}
}
Imports System.IO
Namespace DynamicTabs
Public Class _Default
Inherits System.Web.UI.Page
#Region "Create Tabs"
Private SubCreateTabs()
Dim objBind As New DataSet
Dim iCount As Integer = 0
Dim i As Integer = 0
Dim tbcDynamic AsAjaxControlToolkit.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 ToiCount - 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)
Next
plTabs.Controls.Add(tbcDynamic)
End If
End If
End Sub
#End Region
#Region "Bind Data"
Private FunctionBindData() 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 SubPage_Load(ByVal sender AsObject, 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
0 comments Blogger 0 Facebook
Post a Comment