RSSAsp.net

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

Hôm này 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 ) :

Code (text):
<%@ Page Theme="ThemeName" %>


2. Đăng ký tất cả và mặc định sử dụng Theme ở trong web.config
Code (text):
<configuration>
    <system.web>
        <pages styleSheetTheme="Themename" />
    </system.web>
</configuration>
 
Để thay đổi theme thì ta sử dụng đoạn code sau ở code behind (.aspx):
Code (text):

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 = "Adminthì 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 = "Defaultthì 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 :

HTML:
<div class="themes">
        <a href="javascript:void(0)" onclick="ChangeTheme('default')" class="theme_default"></a>
        <a href="javascript:void(0)" onclick="ChangeTheme('admin')" class="theme_blue"></a>
    </div>
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.

Code (Javascript):
    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ì :

Code (C#):
    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 :

Code (text):
    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ự
  4. .....

 

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu