Hướng dẫn tạo nhiều theme cho một web sử dụng App_Themes có code tham khảo


Hôm nay mình sẽ hướng dẫn các bạn tạo nhiều theme cho một trang web như thế nào ? Không cần tải lại trang mà vẫn áp dụng được theme mới.


Để đăng ký sử dụng Theme trong trong hình bên dưới

app_themes

ta có 2 cách đăng ký :

1. Đăng ký từng trang với cú pháp sau ở trang cần ( .aspx ) :

<%@ Page Theme="ThemeName" %>

2. Đăng ký tất cả và mặc định sử dụng Theme ở trong web.config

 Đăng ký tất cả và mặc định sử dụng Theme ở trong web.config

Để thay đổi theme thì ta sử dụng đoạn code sau ở code behind (.aspx):

protected void Page_PreInit(object sender, EventArgs e)
{
    Page.Theme = "ThemeName";
}

 

Bây giờ ta thử cấu hình trang web sử dụng Theme là Page.Theme = "Admin" thì có giao diện như sau :

admin_themes


Còn ta thử cấu hình trang web sử dụng Theme là Page.Theme = "Default" thì có giao diện như sau :

default_themes

Ta phân tích code sau khi sử dụng theme mặc định :

code_change_theme
 

view_code_Theme 
Như 2 hình trên ta thấy cấu trúc nó giống như hoàn toàn chỉ khác nhau ở thư mục Admin và Default thôi. Nếu chúng ta thay đổi Theme bằng nút Button mà tải lại trang thì rất dễ dàng rồi. Bây giờ mình hướng dẫn các bạn đổi Theme mà không phải tải lại trang.

Chúng ta tạo 2 nút thây đổi gian diện như sau :

 

change_theme 
Còn đây là hàm thây đổi theme bằng javascript bằng cách thay đổi toàn bộ link css của Theme Admin thành Theme Default và ngược lại.

 

    function ChangeTheme(themeName) {
        var cssid = document.getElementsByTagName("link");
        for (var i = 0; i < cssid.length; i++)
            cssid[i].href = cssid[i].href.toLowerCase().replace(new RegExp("(/App_Themes/)(.*)(/)", "gi"), "$1" + themeName + "$3");
//Lưu vào cookie để kiểm tra ở server
      document.getElementById('magicFrame').src = '/Admin/ChangeThemeHidden.aspx?theme=' + themeName;
    }

Sau khai thay đổi toàn bộ link css ta truyền ngầm dữ liệu lên server thông qua iframe để server tạo một cookies để lưu lại Theme hiện tại là gì :

 protected void Page_Load(object sender, EventArgs e)
    {
        WriteTheme(ParaTheme);
    }
 
    public string ParaTheme
    {
        get
        {
            if (String.IsNullOrEmpty(Request.QueryString["theme"]))
                return "Admin";
            return Request.QueryString["theme"].ToString();
        }
    }
 
    private void WriteTheme(string theme)
    {
        var selTheme = new HttpCookie("Theme") { Value = theme, Expires = DateTime.Now.AddMonths(1) };
        if (Response.Cookies["Theme"] == null)
            Response.Cookies.Add(selTheme);
        else
        {
            Response.Cookies.Remove("Theme");
            Response.Cookies.Add(selTheme);
        }
    }

Vậy bây giờ mỗi lần tải lại trang chung ta chỉ việc lấy thông tin cookies lên để nhận biết theme hiện tại :

 protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Request.Cookies["Theme"] != null)
            Page.Theme = Request.Cookies["Theme"].Value;
    }

Vậy là xong toàn bộ những cái cơ bản để hoàn thành. Bạn nào cách ý tưởng hoặc cách nào hay hơn thì góp ý ở dưới nhé.

Lưu ý :

  1. Có thể sử dụng lưu vào CSDL để nhận biết theme hiện hành
  2. Chúng ta có thể có thể tạo nhiều hơn 2 Theme
  3. Có thể áp dụng cho PHP với cách xây dựng tương tự .....

Code 

https://www.dropbox.com/s/f2wdnrdpr38fezz/MultiTheme.rar

Thảo luận thêm:

https://www.facebook.com/hoclaptrinhweb/posts/1128354670558735

 

Chia sẽ bài viết :