Thay đổi giao diện website Asp.Net với App_Themes

Giao diện website thân thiện với người dùng là một mục tiêu mà bất cứ nhà phát triển web nào cũng quan tâm và muốn hướng tới, tuy nhiên để đáp ứng được nhiều người dùng thì lại là một vấn đề không hề đơn giản vì mỗi người sẽ có một cách nhìn nhận và đánh giá khác nhau. Và để đáp ứng tốt hơn, chúng ta nên cân nhắc đến việc xây dựng thêm chức năng để có thể cho phép người dùng linh hoạt thay đổi được giao diện theo sở thích. Trong bài này, chúng ta sẽ tìm hiểu cách thay đổi giao diện của một website Asp.net bằng cách sử dụng App_Themes

Bắt đầu

Đầu tiên chúng ta sẽ tạo 1 project mới, sau đó thêm 3 themes khác nhau với tên là Default, Blue và Green trong thư mục App_Themes của Project vừa tạo, tương ứng với mỗi bộ theme, hãy thêm 1 file StyleSheet.css.

Sau khi thêm, project của bạn sẽ như hình dưới đây

Tương ứng mỗi file StyleSheet.css trong mỗi theme, các bạn hãy viết mã css của các bạn, ở đây để đơn giản tôi chỉ thay đổi màu chữ. Đoạn css của theme Blue như sau, các theme kia cũng tương tự, chỉ khác nhau ở thuộc tính color.

body {
    color:blue;
    font-size:16px;
    line-height:20px;
}
.ulNav{
    background-color:#f0f0f0;
    padding:10px;
    margin:10px;
    display:block;
    overflow:hidden;
}
.ulNav li{
    list-style:none;
    display:block;
    float:left;
    padding-right:10px;
}
.ulNav li a{
    text-decoration:none;
    color:#333;
}
.ulNav li a:hover{
    text-decoration:underline;
    color:#ff6600;
}

Tạo mới một trang Default.aspx chẳng hạn, sau đó thêm mã HTML như dưới đây

<div>
            <ul class="ulNav">
                <li><a href="Default.aspx">Default</a></li>
                <li>
                    <a href="Default.aspx?theme=Blue" style="color:Blue;">Blue</a>
                </li>
                <li>
                    <a href="Default.aspx?theme=Green" style="color:Green;">Green</a>
                </li>
            </ul>
            <br />
            <h1>Multiple Themes in Asp.Net</h1>
            <p>
                You can apply themes to a page, a Web site, or globally...
            </p>
        </div>

Để sử dụng theme, chúng ta phải thiết lập nó trong sự kiện Page_PreInit của trang. Ở file Default.aspx.cs của bạn, hãy thêm đoạn mã sau.

protected void Page_PreInit(object sender, EventArgs e)
    {
        switch (Request.QueryString["theme"])
        {
            case "Blue":
                Page.Theme = "Blue";
                break;
            case "Green":
                Page.Theme = "Green";
                break;
            default:
                Page.Theme = "Default";
                break;

        }
    }

Trong ví dụ trên, khi không có tham số trên query, theme mặc định sẽ là Default. Hãy chạy thử ví dụ bạn vừa tạo và xem kết quả bằng cách lựa chọn theme trên nav menu.

Ở trên bạn đã thấy được sự thay đổi theme khi lựa chọn thay đổi, hiểu được cách tạo ra và gọi các theme khi cần áp dụng. Tuy nhiên trên thực tế, để thay đổi theme người ta không truyền tham số qua url như vậy, vì theme mang tính cá nhân đối với mỗi người dùng nên cần được thiết lập lưu trên trình duyệt của máy client. Để làm được việc đó, cấu hình theme cần được lưu và lấy ra từ cookie.

Sử dụng theme với cookie

Chúng ta hãy tạo mới một trang Cookie.aspx để làm ví dụ này. Mã HTML như dưới đây.

<ul class="ulNav">
                <li><a href="javascript:void(0)" id="themeDefault" title="Default" class="aChangeTheme">Default</a></li>
                <li>
                    <a href="javascript:void(0)" id="themeBlue" title="Blue" style="color:Blue;" class="aChangeTheme">Blue</a>
                </li>
                <li>
                    <a href="javascript:void(0)" id="themeGreen" title="Green" style="color:Green;" class="aChangeTheme">Green</a>
                </li>
            </ul>
            <br />
            <h1>Multiple Themes in Asp.Net</h1>
            <p>
                You can apply themes to a page, a Web site, or globally...
            </p>

Việc cần làm bây giờ là phải gán giá trị theme được lựa chọn vào cookie khi click vào các link trên navMenu, code C# làm việc này khá đơn giản, các bạn chỉ cần thay các thẻ <a> bằng linkbutton, và viết sự kiện gán cookie khi click vào linkbutton đó như sau:

HttpCookie themePage = new HttpCookie("themePage", nameThemes);
themePage.Expires = DateTime.Now.AddMonths(1);
Response.Cookies.Add(themePage);

Với themePage = Default, Blue hoặc Green được truyền vào, sau khi gán cookie xong, các bạn cần tải lại trang bằng cách sử dụng Response.Redirect. Ở sự kiện Page_PreInit  trang, chúng ta cần sửa lại một chút như sau:

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

Về căn bản như vậy là xong, nhưng ở phần này tôi muốn giới thiệu thêm về cách sử dụng WebMethod trong Asp.Net thông qua jquery. Chúng ta hãy thử gán cookies bằng cách này thay vì cách thông thường đã nói ở trên.

Để sử dụng WebMethode, các bạn cần sử dụng thư viện sau

using System.Web.Services;

Chúng ta hãy tạo một hàm gán cookie trong trang Cookie.aspx như sau

[WebMethod]
    public static void ChangeTheme(string nameThemes)
    {
        HttpCookie themePage = new HttpCookie("themePage", nameThemes);
        themePage.Expires = DateTime.Now.AddMonths(1);
        var response = HttpContext.Current.Response;
        response.Cookies.Add(themePage);
    }

Bây giờ để gọi được phương thức này ở phía client, ta sử dụng phương thức $ajax có sẵn của jQuery. Các bạn xem code dưới đây.

<script src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.aChangeTheme').click(function () {
                var themeName = $(this).attr('title');
                $.ajax({
                    type: "POST",
                    url: "Cookie.aspx/ChangeTheme",
                    contentType: "application/json; charset=utf-8",
                    data: "{'nameThemes': '" + themeName + "'}",
                    dataType: "json",
                    success: function (date) {
                        location.reload();
                    },
                    error: function () { alert('False!');}
                });
            });
        });
    </script>

Phương thức phía sever site được xác định ở tham số url, giá trị truyền từ client sang sever ở tham số data (Ở đây ta cần truyền tên theme đã lựa chọn ). Và cũng giống như trên, khi đã gán cookie xong, chúng ta cần tải lại trang để theme được áp dụng, hàm loacation.reload(); có tác dụng giống Response.Redirect trong trường hợp này.

Qua ví dụ trên, chúng ta đã hiểu được cách sử dụng theme trong Asp.Net như thế nào, và hiểu thêm được cách sử dụng $ajax của jQuery trong Asp.net. Trong ví dụ này có thể thấy sử dụng $ajax chưa cần thiết (vì các hai phương pháp đều phải tải lại trang thì theme mới áp dụng được). Tuy nhiên các bạn có thể dựa vào ví dụ trên để xây dựng các chức năng comment, check exist email.... bằng ajax rất thú vị. Để dễ hình dung, các bạn hãy tải code ví dụ của bài này ở file đính kèm.

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

Download Source

Related Post


So sánh LINQ to SQL và ADO.NET Entity Framework
Thursday, October 10, 2013
LINQ to SQL và Entity Framework có rất nhiều điểm chung, nhưng mỗi cái có những đặc tính riêng nhắm đến những trường hợp khác nhau trong Orcas (bản VS 2008).  
Hiện thị ảnh thu nhỏ (Thumbnail Image) trong Asp.Net
Friday, October 4, 2013
Xử lý hình ảnh trước khi hiển thị là việc cần thiết để tối ưu 1 website và nó giúp tăng tốc độ tải trang một cách đáng kể. Trong một số trường hợp, khi upload ảnh người ta có thể sẽ xử lý để tạo ra 1 hình ảnh thu nhỏ luôn, tuy nhiên một vấn đề gặp phải đó là không tiết kiệm dung lượng host và kích thước hình ảnh thumbnail được tạo ra không "linh động" trong các trường hợp sử dụng. Trong bài này tôi sẽ hướng dẫn các bạn tạo hình ảnh thumbail ngay trong quá trình hiển thị ảnh từ 1 file ảnh gốc duy nhất.
Search

Đăng ký nhận bài mới


Category

Blog Archive