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 Red và Blue. Trong Red và Blue 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:

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:

Tiếp theo là gõ code cho sự kiện ondatabound và onselectedindexchanged 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!