Hướng dẫn tạo đa giao diện trong ASP.NET

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo 1 trang web có nhiều giao diện và có thể thay đổi bằng cách lựa chọn ở Dropdownlist. Mình chỉ ví dụ bằng một website nho nhỏ là thay đổi màu của dòng chữ HelloWorld trên trang web.

Đầu tiên, bạn tạo lớp Theme.cs với nội dung như sau:


public class Theme
{
public string Name{ get; set; }
public Theme(string name)
{
Name = name;
}
}

Mục đích của class này là lưu tên của các theme có trong website

Tiếp theo, bạn tạo class ThemeManager.cs và có một phương thức tĩnh public static List<Theme> GetThemes() với mục đích là lấy tất cả các theme có trong thư mục App_Themes

Nội dung class đó như sau:


using System.Collections.Generic;
using System.IO;
using System.Linq;

public class ThemeManager
{
public static List<Theme> GetThemes()
{
string[] dArrInfo = Directory.GetDirectories(System.Web.HttpContext.Current.Server.MapPath("App_Themes"));
return dArrInfo.Select(d => new Theme(d.Split('\\')[d.Split('\\').Length-1].ToString())).ToList();
}
}

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. Mặc định là theme red. Nội dung class này như sau:


using System;

public class BasePage : System.Web.UI.Page
{

protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
if (Session["MyTheme"] == null)
{
Session.Add("MyTheme", "Red");
Page.Theme = (string)Session["MyTheme"];
}
else
{
Page.Theme = (string)Session["MyTheme"];
}
}
}

Bước tiếp nữa bạn tạo ra thư mục App_Themes và add vào đó 2 theme RedBlue. Trong RedBlue bạn lại add vào 2 StyleSheet và gõ vào đoạn CSS sau:

BlueTheme.css


div#text
{
color:Blue;
}

RedTheme.css


div#text
{
color:Red;
}

Hình ảnh ở Solution Explorer:

Capture
Sau đó, bạn kéo vào trong thẻ body ở trang default.aspx các control như đoạn mã sau. Nhớ là thẻ div chứa chuỗi HelloWorld phải có Id=”text” vì đoạn css ở trên định dạng cho thẻ div đó.


<asp:ObjectDataSource ID="ThemeDataSource"
SelectMethod="GetThemes"
TypeName="ThemeManager"
runat="server">
</asp:ObjectDataSource>
<div>
<asp:DropDownList runat="server" ID="ddlColor" DataSourceID="ThemeDataSource"
AutoPostBack="True" ondatabound="ddlColor_DataBound"
onselectedindexchanged="ddlColor_SelectedIndexChanged"
DataTextField="Name"
DataValueField="Name">
</asp:DropDownList>
</div>
<div id="text">
Hello world!
</div>

Hình ảnh giao diện:

Capture

Tiếp theo là gõ code cho sự kiện ondataboundonselectedindexchanged của DropDownList


protected void ddlColor_DataBound(object sender, EventArgs e)
{
ddlColor.SelectedValue = Page.Theme;
}
protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
Session.Add("MyTheme", ddlColor.SelectedValue);
Server.Transfer(Request.FilePath);
}

Sau đó bạn cho trang default.aspx kế thừa class BaseTheme.cs


public partial class _Default :BasePage

Bạn chạy thử và xem kết quả.

Project đính kèm: Download

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

6 nhận xét:

Chi Phat nói...

Bạn ơi cho minh hỏi cái nay nhe.
Mình làm đề tài quan ly nhà sách minh muon them hình anh vao csdl kiểu dl la image
vd(MaNV(char),TenNV(char),Hinh(image))
Bạn hướng dẫn các phương thứ thên xóa sửa nay với.
cám ơn bạn trước.
nếu đc gửi mail cho minh nha: lechiphat@gmail.com

Huong nói...

Anh ơi cho em hỏi cái này với.
Em đang làm đề tài:
5.1 Mô tả: thiết kế và lập trình một trang web tin tức thời sự. Người dùng có thể thay đổi cách hiển thị (appearance) của các phần trong trang web, thí dụ như tiêu đề, cỡ chữ, font … Chọn lựa được ghi nhớ và lần sau mở trang web người dùng không cần phải lặp lại các điều chỉnh trên.
5.2 Yêu cầu kỹ thuật: người dùng lựa chọn các cách hiển thị thông qua một popup window
5.3 Ghi chú:
• Các trang tin hay sử dụng menu phức tạp, sinh viên cần tham khảo và đánh giá khối lượng công việc nếu định làm giống như vậy.
• Gợi ý: CSS, cookie
Em chưa làm được phần thay đổi cách hiển thị tiêu đề(cỡ chữ, font..)thay đổi đó được ghi nhớ cho tới lần truy cập trang web sau của người dùng.
Anh giúp em nha
Nếu được anh gửi mail cho em nhé: huongnguyen90hp@gmail.com
Thanks anh nhiều!!!

Sinh Viên nói...

Hjx anh ơi em làm được rồi nhưng em áp dụng vào web project của em k được... profect của em xài masterpage ... đến đoạn cuối là kế thừa thì báo lỗi... anh có thể hướng dẫn cho em không

Nặc danh nói...

Sao không ai comment lại hết vậy!!!

"Hjx anh ơi em làm được rồi nhưng em áp dụng vào web project của em k được... project của em xài masterpage ... đến đoạn cuối là kế thừa thì báo lỗi... anh có thể hướng dẫn cho em không"

anh gởi hộ mail em nhé: hienpt610@gmail.com
thanks

Nặc danh nói...

Cám ơn bạn rất nhiều về tất cả bài viết trong Blog.! Chúc bạn gặp đuợc nhiều may mắn trong cuộc sống. Mong rằng bạn sẽ viết tiếp những TUT hay nữa. ^^ .

Hoang Le nói...

Cảm ơn, bài viết rất hay.
qivana