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

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

Trung bình: 4.1

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à BlackWhite. 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<Theme> GetThemes()
{
DirectoryInfo dInfo = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath(“App_Themes”));
DirectoryInfo[] dArrInfo = dInfo.GetDirectories();
List<Theme> list = new List<Theme>();

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:

<asp:ObjectDataSource ID=”ThemeDataSource” SelectMethod=”GetThemes” TypeName=”ThemeManager” runat=”server”></asp:ObjectDataSource>

Để thay đổi Theme, chúng ta có thể sử dụng DropDownList hoặc RadioButton List. Ở đây mình sử dụng RadioButton List.

<asp:RadioButtonList ID=”choiceTheme” DataTextField=”name” DataValueField=”name” AutoPostBack=”true” runat=”server” OnDataBound=”choiceTheme_DataBound” OnSelectedIndexChanged=”choiceTheme_SelectedIndexChanged” RepeatDirection=”Horizontal” ValidationGroup=”choice” DataSourceID=”ThemeDataSource”>                    </asp:RadioButtonList>

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.cssWhiteStyle.css. Bạn có thể download mã nguồn của ứng dụng này tại đây.

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

  1. Cyril Lufsey nói:

    I simply want to tell you that I am just newbie to blogging and truly savored you’re web page. Most likely I’m want to bookmark your website . You actually have awesome articles. Cheers for sharing your webpage.

  2. I just want to say I’m beginner to blogging and actually savored your web page. Most likely I’m going to bookmark your site . You surely have very good stories. Many thanks for sharing your blog site.

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: