Trước hết, chúng ta tạo một website mới với công cụ Visual Studio 2005. Đây là giao diện của ứng dụng:
Giao Diện Black
Giao Diện White
Bước thứ 1:Tạo một thư mục và đặt tên là App_Code. Trong thư mục này ta tạo một Class có tên là Theme.cs
Nội Dung trang đó như sau:
public class Theme
{
private string _name;
// Lấy Tên.
public string Name
{
set
{
_name = value;
}
get
{
return _name;
}
}
// Contractor
public Theme(string name)
{
Name = name;
}
}
{
private string _name;
// Lấy Tên.
public string Name
{
set
{
_name = value;
}
get
{
return _name;
}
}
// Contractor
public Theme(string name)
{
Name = name;
}
}
Bước 2: Tạo thư mục App_Themes để quản lý các Theme sẽ sử dụng trong ứng dụng của mình. Ở đây, mình tạo 2 Theme có tên là Black và White. Tiếp Theo, ta tạo tiếp một Class mới trong thư mục App_Code có tên là ThemeManager.cs. Class này có nhiệm vụ tìm kiếm và quản lý các Theme có trong thư mục App_Theme. Nó sẽ liệt kê tất cả các Theme tồn tại trong thư mục App_Themes.
public class ThemeManager
{
public static List GetThemes()
{
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Serve r.MapPath("App_Themes"));
DirectoryInfo[] dArrInfo = dInfo.GetDirectories();
List list = new List();
foreach (DirectoryInfo d in dArrInfo)
{
Theme temp = new Theme(d.Name);
list.Add(temp);
}
return list;
}
}
{
public static List
{
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Serve r.MapPath("App_Themes"));
DirectoryInfo[] dArrInfo = dInfo.GetDirectories();
List
foreach (DirectoryInfo d in dArrInfo)
{
Theme temp = new Theme(d.Name);
list.Add(temp);
}
return list;
}
}
Bước 3:
Tạo một trang Master để sử dụng chung cho tất cả các trang khác trong ứng dụng, đặt tên là Default.Master. trong trang này, chúng ta tạo ra 1 ObjectDataSource, có tên là ThemeDataSource để lấy danh sách các Theme có trong thư mục App_Themes:
Để thay đổi Theme, chúng ta có thể sử dụng DropDownList hoặc RadioButton List. Ở đây mình sử dụng RadioButton List.
Các bạn hãy để ý nhé, với RadionButton List, chúng ta nhớ phải đặt thuộc tính DataSourceID = "ThemeDataSource" để lấy các danh sách Theme. Chúng ta viết 2 sự kiện cho thẻ này:
protected void choiceTheme_DataBound(object sender, EventArgs e)
{
choiceTheme.SelectedValue = Page.Theme;
}
{
choiceTheme.SelectedValue = Page.Theme;
}
protected void choiceTheme_SelectedIndexChanged(object sender, EventArgs e)
{
Session.Add("MyTheme",choiceTheme.SelectedValue);
Server.Transfer(Request.FilePath);
}
{
Session.Add("MyTheme",choiceTheme.SelectedValue);
Server.Transfer(Request.FilePath);
}
Bước Tiếp Theo: Chúng ta tạo một Class có tên là BasePage.cs để xác định Theme mặc định chúng ta sẽ sử dụng. ở đây, mặc định sẽ là Theme White:
public class BasePage: System.Web.UI.Page
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
if (Session["MyTheme"] == null)
{
Session.Add("MyTheme", "White");
Page.Theme = (string)Session["MyTheme"];
}
else
{
Page.Theme = (string)Session["MyTheme"];
}
}
}
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
if (Session["MyTheme"] == null)
{
Session.Add("MyTheme", "White");
Page.Theme = (string)Session["MyTheme"];
}
else
{
Page.Theme = (string)Session["MyTheme"];
}
}
}
Bước cuối cùng, những trang bạn muốn sử dụng Dynamic Themes chỉ cần kế thừa Lớp basePage là được.
public partial class _Default : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
Ứng dụng Dynamic Theme đã hoàn thành. Bạn có thể tùy biến giao diện cho riêng mình với việc thay đổi Stylesheet riêng với BlackStyle.css và WhiteStyle.css. Bạn có thể download mã nguồn của ứng dụng này tại đây.
Theo zensopft.vn