Làm nổi bật một mục Navigation trong ASP.NET


Trong trang Web của bạn có đặt một thanh menu (navigation) để người dùng di chuyển giữa các trang khác nhau và bạn muốn cho người dùng biết được hiện tại họ đang ở trang nào bằng cách thay đổi thuộc tính trên menu đang được chọn (ví dụ như in đậm, thay hình nền)… Bài viết sau giúp bạn thực hiện điều đó

Để hiểu rõ vấn đề mình nói, bạn thử vào trang web http://asp.net, bạn sẽ thấy thanh menu ở trên sẽ thay đổi màu sắc của từng mục tùy vào trang mà bạn đang xem.

image

Thông thường khi thiết kế website với ASP.NET thì chúng ta sẽ đưa tất cả các thành phần giao diện tổng quát của website đó vào Master Page nhằm tạo ra sự đồng nhất giữa các trang. Và tất nhiên, phần navigation của trang web cũng nằm trong Master Page. Trong ví dụ sau, chúng ta sẽ tạo 1 trang Master Page có menu liên kết đến 2 trang web con đặt tên là Home và About. Và đồng thời chúng ta cũng sẽ tạo hai trang web sử dụng Master Page này đặt tên là Home.aspxAbout.aspx. Các bạn có thể nhấn chuột phải lên Master Page trong Solution Explorer, chọn Add Content Page và sau đó đổi tên file. Hoặc các bạn nhấn chuột phải lên tên Project trong Solution Explorer, chọn Add –> New Item –> Web Forms using Master Page

Chúng ta sẽ sử dụng một file CSS để định dạng menu được chọn. Các bạn thêm file CSS vào Project bằng cách chọn Add –> New Item –> StyleSheet. Trong File CSS các bạn điền nội dung như sau:

#home li.home, #about li.about
{
    font-weight:bold;
}

Đoạn Style trên có nghĩa là sẽ định định dạng chữ đậm cho những thẻ <li> có class là home và nằm trong một thẻ khác có id là home, tương tự cho những thẻ <li> có class là about và nằm trong một thẻ khác có id là ‘about’. Mục đích của việc này là gì? Đó là chúng ta sẽ thiết lập id của thẻ <body> với một trong hai giá trị ‘home’ hoặc ‘about’ tùy thuộc vào trang web người dùng đã chọn, khi đó thì chỉ có thẻ <li> tương ứng với id đó mới được áp dụng định dạng ở trên.  Cấu trúc HTML tổng quát của navigation trong trang Site Master là như sau:

<body id= ‘…’>
<ul>
    <li class='home'><a href="Home.aspx">Home</a></li>
    <li class='about'><a href="About.aspx">About</a></li>
</ul>
</body>

Cái khó khăn lúc này là id của thẻ <body> cần phải được gán giá trị trong trang Master Page, trong khi Master Page lại không biết được trang nào sẽ sử dụng nó và nó không biết được cần thiết lập id của <body> là như thế nào (home or about?). Tuy nhiên, chúng ta có thể vượt qua trở ngại này bằng cách như sau. Thay vì thiết lập một giá trị cố định cho thẻ <body> của Master Page thì ta có thể gán nó cho một thuộc tính (Properties) của trang có tên là BodyId như sau:

<body id="<%= BodyId %>">

BodyId là một thuộc tính của Master Page mà ta sẽ tạo trong phần Code Behind.

public partial class SiteMaster : System.Web.UI.MasterPage
{
    private string _bodyId;
    public string BodyId
    {
        get { return _bodyId; }
        set { _bodyId = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Khi một trang web sử dụng Master Page, ta phải tìm cách gán giá trị BodyId này từ các trang Content Page đó. May mắn là các trang Web trong ASP.NET Web Forms đều có thuộc tính Master lưu trữ trang Master Page của trang đó (Nếu như ta tạo một trang bình thường không có Master Page thì giá trị này bằng Null). Như vậy, trong sự kiện Page_Load của trang Home.aspx ta có thể gán giá trị BodyId của Master Page như sau:

SiteMaster master = this.Master as SiteMaster;
master.BodyId = "home";

Tương tự, trong sự kiện Page_Load của About.aspx ta có thể làm như sau:

SiteMaster master = this.Master as SiteMaster;
master.BodyId = "about";

Đó là tất cả các bước cần phải thực hiện. Bây giờ, khi chạy các trang web trên trình duyệt, nếu người dùng xem trang Home.aspx thì thẻ body sẽ có idhome, còn khi xem trang About.aspx thì thẻ bodyidabout. Nhờ đó, menu tương ứng với trang đó cũng được định dạng riêng. Cách này cũng giúp cho việc mở rộng menu chứa nhiều đối tượng trong đó cũng khá dễ dàng. Tuy nhiên, nhược điểm là khi tạo trang mới chúng ta phải luôn nhớ gán BodyId trong sự kiện Page_Load. Để khắc phục điều này, có một cách làm khác là sử dụng javascript để định dạng menu đang chọn dựa trên URL của trình duyệt (đặc biệt dùng thư viện jQuery).

Good luck and code well!

Tác giả: xuanchien

Tran Xuan Chien. Japan Advanced Institute of Science and Technology - Japan. Senior Developer - NUS Technology.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s