Hướng dẫn tạo website với Dynamic Theme.


Giờ đây, tạo một website Dynamic Theme với ASP.NET 2.0 thật là đơn giản và dễ dàng. Bài viết này sẽ giới thiệu cho các bạn về ứng dụng Dynamic Theme
Mình sẽ hướng dẫn từng bước một và chi tiết để các bạn có thể hiểu rõ và làm được.

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;

}
}

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.Server.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;
}

}

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;
}

protected void choiceTheme_SelectedIndexChanged(object sender, EventArgs e)
{
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”];
}
}
}

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)
{

}
}

Ứ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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s