Tạo sự nhất quán cho website

Một yêu cầu bắt buộc khi thiết kế một website là sự nhất quán về nội dung cũng như hình thức (layout). ASP.NET cung cấp một loạt các công cụ, tính năng cho phép chúng ta thực hiện điều này như master pages, base pages, templates, themes.

Một vài lưu ý để sử dụng bài viết hiệu quả:

Các tập tin CSS hay hình ảnh dùng trong bài viết này có thể tham khảo hay tải về tại đây
Các bài thực hành được mô tả trong Visual Studio 2012 và có kèm video minh họa cách làm trong Visual Studio 2019. Chỉ những mục nào có sự khác biệt về cách thực hiện giữa hai môi trường VS 2012 và VS 2019 thì mới được cập nhật bằng video. Danh sách các video cập nhật ASP.NET có thể tham khảo tại đây.
Cần lưu ý lựa chọn ngôn ngữ lập trình phù hợp (Visual Basic hay Visual C#)

Master pages

Khi thiết kế các trang web, có những phần được áp dụng chung cho tất cả các trang và nội dung, bố cục,…của chúng ít thay đổi trong suốt quá trình thiết kế. Các trang lưu giữ những phần chung này, trong ASP.NET, gọi là các master pages. Tiện ích lớn nhất của master pages là tạo sự nhất quán trong bố cục (layout) cho tất cả các trang trong website, nếu có sự thay đổi thì chỉ cần thay đổi trong master page và các trang khác (có kết nối đến master page này) sẽ tự động cập nhật. Một số phần, phổ biến trong thiết kế web, ít thay đổi trong suốt quá trình thiết kế như menu, header, footer,…

Xem hình sau về master page:

Tạo master page

Cũng giống như các trang aspx khác, master page cũng được thêm vào site bằng Add > Add New Item.

Minh hoạ cách tạo một master page đơn giản trong Visual Studio 2019

Tạo một thư mục tên MasterPages để chứa các trang master. Thêm một master page (giống cách thêm một trang aspx) với tên Frontend.master và chú ý chọn Code Behind

Xem trang Frontend.master trong chế độ Source:

Thêm và chỉnh sửa một số code trong phần thẻ <form> như sau:

Mở thư mục Styles và mở file style.css để thêm nội dung sau:

*
{
  font-family: Arial;
}
header
{
  background-color: #C0C0C0;
  width: 844px;
  height: 86px;
}

h1
{
  font-size: 20px;
  padding: 0;
  margin: 0 0 10px 0;
}
.Introduction
{
  font-style: italic;
  color: #003399;
}
#PageWrapper
{
  width: 844px;
  margin: auto;
}
nav
{
  width: 844px;
}

/*#region Main Content */

section#MainContent
{
  width: 664px;
  float: left;
}
section#MainContent a
{
  color: #4cff00;
  text-decoration: underline;
}
section#MainContent a:visited
{
  color: #FF0000;
  text-decoration: underline;
}

section#MainContent a:hover
{
  color: #FFA500;
  text-decoration: underline;
}
/*#endregion*/

aside
{
  background-color: Gray;
  width: 180px;
  float: left;
}
footer
{
  background-color: #C0C0C0;
  width: 844px;
  clear: both;
}

Kéo file style.css từ thư mục Styles vào trang Frontend.master, kết quả xuất hiện thêm thẻ <link> như sau:

Tạo một thư mục tên Scripts (sẽ lưu trữ các file JavaScript hay jQuery) và thêm file tên modernizr-2.6.2.js (vào trang https://modernizr.com/ ) . Đây là thư viện modernizr, một thư viện JavaScript, giúp các trình duyệt cũ sử dụng được HTML5 và CSS3 mà không bị lỗi khi hiển thị trang web. Kéo file modernizr-2.6.2.js từ thư mục Scripts thả vào trang Frondend.master dưới thẻ <link>. Kết quả trong trang Frondend.master sẽ xuất hiện thêm thẻ <script> như sau:

Mở trang Frondend.masterở chế độ Design sẽ trông như sau:

Content pages (trang nội dung)

Một trang web hoàn chỉnh là sự kết hợp giữa bố cục (layout), là các yếu tố ít thay đổi, và nội dung. Các yếu tố ít thay đổi (bố cục) sẽ được lưu trong các trang master, trong khi đó phần nội dung, yếu tố hay thay đổi, sẽ được lưu trong các trang content:

Như vậy có thể chỉ có một vài trang master nhưng sẽ có rất nhiều trang content và các trang content này sẽ kết hợp với các trang master để tạo một trang hoàn chỉnh (final page). Việc kết hợp với trang master nào sẽ phụ thuộc vào yêu cầu của trang web khi hiển thị.

Minh hoạ tạo một trang content dựa vào trang master Frontend.master

Thêm một trang ASPX mới bằng cách nhấp chuột phải vào Site chọn Add > Add New Item…Chọn Web Form và đổi tên trang thành MyContent.aspx. Check vào hai tuỳ chọn là Place code in separate file và Select master page.

Khi nhấn nút Add sẽ hiển thị hộp thoại Select a Master Page, chọn thư mục MasterPages chứa trang master ở ô Project folders bên trái thì sẽ xuất hiện trang này ở ô Content of folders bên phải, như hình sau:

Nhấp Ok. Trang MyContent.aspx trong chế độ Source:

Trong chế độ Design:

Như vậy lúc này trang MyContent.aspx sẽ thừa kế layout của trang master Frontend.master. Chúng ta chỉ cần thêm nội dung vào các vị trí phù hợp.
Gõ nội dung như sau vào phần cpMainContent:

Trong chế độ Desgin:

Lưu và Ctrl + F5. Kết quả:

Tạo trang Login.aspx trong Site với các tuỳ chọn giống trang MyContent.aspx. Thêm nội dung vào phần cpMainContent như sau:

Trở lại trang MyContent.aspx ở chế độ Design. Tạo một đoạn văn bản mới với nội dung Den trang Dang nhap, bôi đen từ Dang nhap và chọn Format > Convert to Hyperlink, một hộp thoại xuất hiện. Nhấp nút Browse và chọn trang Login.aspx. Nhấp OK. Kết quả trang MyContent.aspx trong chế độ Design:

Bấm CTRL+F5 để hiển thị trang trong trình duyệt. Nhấp vào dòng Dang nhap sẽ chuyển sang trang Login.aspx.

Nếu chúng ta để ý trong chế độ Source của trang MyContent.aspx sẽ còn một vùng nội dung nữa có ID là Content1, phần này dùng để thêm các nội dung như CSS hay JavaScript (hay jQuery).

Các trang master lồng nhau

Một trang master được lồng vào một trang master khác nghĩa là nó được tạo ra dựa vào hay liên kết đến trang đó (giống như kiểu một trang nội dung liên kết đến một trang master) bằng cách chọn checkbox Select Master Page khi tạo một trang master (giống tạo một trang content).

Dùng một trang trung tâm (Using a Centralized Base Page)

Để tạo tính nhất quán và có tính cấu trúc cho website, bên cạnh việc dùng các trang master, chúng ta có thể dùng cách khác: tạo ra một trang kiểm soát trung tâm gọi là trang cơ sở (base page).

Các trang aspx đều thừa kế từ một class gọi là System.Web.UI.Page nên chúng sẽ có các ứng xử chung (thuộc tính, phương thức,…) từ class này. Tuy nhiên, trong thực tế đôi khi các đặc điểm được thừa kế này là không đủ và chúng ta cần thêm một vài đặc điểm chung mới, nên thay vì thêm các đặc điểm mới này vào từng trang cụ thể thì chúng ta sẽ tạo ra trang cơ sở (base page) để quản lí các đặc điểm chung mới này và sẽ áp dụng cho tất cả các trang nội dung trong site thừa kế từ nó, tạo sự nhất quán cho website (giống như trang master).

Có hai bước để dùng một trang cơ sở trung tâm:

Bước 1: Tạo ra một class thừa kế từ System.Web.UI.Page.
Bước 2: Làm cho các trang web trong site thừa kế lớp này thay vì lớp Page chuẩn. Xem hình sau (chú ý ô bên phải với trang MyWebPage thừa kế từ lớp BasePage thay vì từ lớp Page chuẩn).

Trước khi minh hoạ cách tạo base class và base page, chúng ta tìm hiểu qua chu trình sống của một trang ASP.NET (ASP.NET Life Cycle).

Một trang aspx từ khi được tạo ra sẽ trải qua 8 giai đoạn (phases) trong chu trình sống của mình. 8 giai đoạn gồm:

Giai đoạn	Mô tả
Page request	Một yêu cầu (request) đến trang ASPX bắt đầu chu trình sống của trang này và đến giai đoạn Start.
Start	Trang sẽ truy cập đến các thuộc tính như Request hay Response dùng để tương tác với môi trường của trang. Sự kiện *PreInit* sẽ kích hoạt trong giai đoạn này để trang đến giai đoạn Page Initialization.
Page Initialization	Giai đoạn này một số công việc cài đặt hay lập trình sẽ hợp lệ. Lớp Page sẽ kích hoạt 3 sự kiện *Init, InitComplete, và PreLoad*.
Load	Các thuộc tính điều khiển được tải (loaded) từ View State và Control State trong một postback (là qua trình dữ liệu từ server đến client và từ client trở ngược lại server). Sự kiện Load được kích hoạt trong giai đoạn này.
Validation	Các Validation controls sẽ được dùng để kiểm tra tính hợp lệ của thông tin người dùng.
Postback event handling	Các controls trong trang sẽ kích hoạt sự kiện của chúng, ví dụ sự kiện *SelectedIndexChanged* khi chọn một item trong DropDownListBox hay sự kiện *TextChanged* của TextBox. Khi sự kiện của các controls hoàn tất thì trang sẽ kích hoạt sự kiện *LoadComplete, sự kiện PreRender* thông báo chuẩn bị đến giai đoạn Rendering và sự kiện *SaveStateComplete* lưu các dữ liệu quan trọng của controls trong View State.
Rendering	Toàn bộ trang ASPX (các controls, nội dung,…) sẽ chuyển thành mã HTML khi đến Browser.
Unload	Giải phóng các tài nguyên mà trang hay các controls nắm giữ. Sự kiện unLoad được kích hoạt.

Tạo Base Page

Thực hành tạo Base Page trong Visual Studio 2019

Tạo thư mục tên App_Code. Nhấp chuột phải vào thư mục chọn Add > Add New Item, chọn Class và đặt tên là BasePage.vb (hoặc bất kì tên gì). Lớp mới được tạo như sau:

Thêm các đoạn mã vào lớp BasePage như sau:

Mã C#:


using System;

public class BasePage : System.Web.UI.Page
{
      private void Page_PreRender(object sender, EventArgs e)
      {
        if (string.IsNullOrEmpty(this.Title) || this.Title.Equals("Untitled Page",
            StringComparison.CurrentCultureIgnoreCase))
        {
           throw new Exception("Page title cannot be \"Untitled Page\" or an empty string.");
        }
      }
     public BasePage()
      {
         this.PreRender += Page_PreRender;
      }
}

Vào trang Login.aspx, vào phần code vb của nó (file Login.aspx.vb), nội dung ban đầu như sau:

Chỉnh sửa lại như sau:

Mã C#

public partial class Login : BasePage
{
  ...
}

Lưu và Ctrl + F5, kết quả:

Lỗi này phát sinh do phần Title của trang Login.aspx rỗng. Để gán giá trị cho Title của trang, chúng ta vào Login.aspx ở chế độ Resource, trong thuộc tính Title gõ nội dung “Dang nhap de hoc ASP.NET”:

Lưu và Ctrl + F5:

Thực hiện lại bước 1, 2 cho tất cả các trang trong site. Lúc này, các trang cần phải có nội dung trong Title, nếu không sẽ phát sinh lỗi như trang aspx ở trên.

Tạo các trang templates

Mỗi lần muốn một trang aspx kế thừa lớp BasePage, chúng ta phải đến từng file code VB của nó (*.aspx.vb) để thêm dòng code Inherits BasePage. Điều này rất mất thời gian nếu chúng ta có nhiều trang trong site. Phần này chúng ta sẽ tạo ra một template để các trang có thể sử dụng lại một cách nhanh chóng.

Tạo template

Trong Site tạo ra một trang tên Temporary.aspx với Code Behind, ngôn ngữ VB và liên kết trang master trong thư mục MasterPages:

Di chuyển đến file Temporary.aspx.vb sửa lại code thành Inherits BasePage
và sửa lại tên class từ Temporary thành $relurlnamespace$_$safeitemname$

Mã C#

public partial class $relurlnamespace$_$safeitemname$ : BasePage
{
     ...
}

Đừng lo lắng nếu phát sinh lỗi từ dấu $. Khi chúng ta tạo ra một trang aspx mới
dòng $relurlnamespace$_$safeitemname$ sẽ được thay bằng tên của trang mà
chúng ta tạo ra.
Vào file Temporary.aspx ở chế độ Resource và trong thuộc tính Inherits đổi
từ Temporary thành $relurlnamespace$_$safeitemname$

Lưu tất cả và vào Project > Export Template và trong hộp thoại Export Template
Wizard chọn một số tuỳ chọn như sau:

Nhấp Next và chọn Temporary.aspx:

Nhấp Next và không cần chọn gì trong Select Item Reference và tiếp tục Next.
Trong Select Template Options gõ tên template là MyBasePage trong Template
name và gõ vài dòng mô tả trong Template description:

Nhấp Finish và VS sẽ mở thư mục chứa MyBasePage.zip, đóng nó lại.
Trở lại VS, xoá trang Temporary.aspx. Nhấp chuột phải vào Site chọn Add >
Add New Item và chọn template MyBasePage:

Đổi tên trang thành TestPage.aspx và nhấp Add. Mở file code VB
TestPage.aspx.vb thì thấy tên lớp là _TestPage (chứ không còn là
$relurlnamespace$_$safeitemname$ ):

Như vậy, lúc này chúng ta có thể tạo ra các trang aspx sử dụng template một cách nhanh chóng và hiệu quả.

Themes

Theme là tập hợp các files (CSS, hình ảnh,…) để định nghĩa giao diện (hay hình thức) của các trang web trong site. Chúng ta đã tìm hiểu về master page, về base page, về template. Mục đích chung của chúng là tạo ra sự nhất quán, tính cấu trúc trong website và nhất là tận dụng tính kế thừa (hay khả năng dùng lại) các files, các đoạn mã,… để tiết kiệm thời gian trong thiết kế và lập trình web. Và theme cũng cùng mục đích này, tuy nhiên, theme có cấu trúc lớn hơn so với page, template. Một theme có thể chứa nhiều template. Sự tiến hoá giữa các thành phần này có thể được hình dung như sau:

Phân loại theme trong ASP.NET

Có hai thuộc tính khác nhau cho phép bạn tạo một theme là thuộc tính Theme và StyleSheetTheme. Các giá trị mặc định của các thuộc tính này được định nghĩa trong file Web.config. Sự khác biệt lớn nhất giữa StyleSheetTheme và Theme là thời gian thực thi (runtime); StyleSheetTheme được áp dụng các tuỳ chọn mặc định ngay khi một trang aspx được tạo, còn Theme sẽ được thực thi sau này theo tuỳ chọn của chúng ta.

Ứng dụng theme

Khi ứng dụng theme cho website, có 3 cấp độ: cấp độ trang, cấp độ toàn bộ website (bằng cách điều chỉnh thông tin trong file Web.config) và lập trình. Xem minh hoạ tạo hai themes là Monochrome và DarkGrey để hiểu về cách tạo và ứng ụng theme trong website.

Tạo và ứng dụng theme

Tạo một thư mục chứa theme bằng cách nhấp chuột phải vào Site chọn Add >Add ASP.NET Folder > Theme. Thư mục này khác các thư mục trước, nó có chứa một theme mặc định gọi là theme1. Đổi tên theme1 thành Monochrome

Copy file style.css từ thư mục Styles vào theme Monochrome (nhấp chuột phải vào style.css chọn Copy sau đó nhấp chuột phải theme Monochrome chọn Paste). Đổi tên file style.css thành Monochrome.css:

Lúc này chúng ta có thể xoá file style.css và dòng <link …> trong trang master (Frontend.master) vì lúc này các trang trong Site của chúng ta sẽ được kiểm soát bởi theme.
Áp dụng theme Monochrome cho toàn bộ website của chúng ta bằng cách vào file Web.config và bổ sung thêm dòng mã trong phần tử <system.web> như sau (dòng mã bôi đen):

Chọn trang bất kì trong Site (như Content.aspx ) và Crtl + F5:

Nhấp chuột phải vào Browser (Chrome) chọn View page source để xem code HTML:

Chúng ta thấy trang sử dụng file CSS trong theme.
Trở lại VS và mở trang master master trong chế độ Design. Ta thấy rằng, theme không ảnh hưởng gì đến trang master, giao diện như sau:

Để cho theme ảnh hưởng lên trang (trong chế độ Design), chúng ta vào Web.config, tới phần tử <pages> và bổ sung thêm thuộc tính styleSheetTheme như sau:

Lưu sự thay đổi. Mở lại trang Fontend.master ở chế độ Design, kết quả:

Thêm theme mới bằng cách tạo một thư mục tên DarkGrey trong App_Themes.
Copy file DarkGrey.css và Paste vào thư mục theme DarkGrey:

Vào file Web.config đến <pages> và thay theme Monochrome bằng DarkGrey.
Lưu và trở lại trang master Frontend.master trong chế độ Design như sau:

Chọn trang Content.aspx và Ctrl+F5:

Mở rộng themes

Trong theme có thể chứa hình ảnh và muốn liên kết đến file ảnh chúng ta có thể dùng các CSS selectors. Đường dẫn đến file ảnh là địa chỉ tương đối. Ví dụ muốn liên kết đến file ảnh tên MenuBackground.jpg trong thư mục Images ở trong theme Monochrome, chúng ta viết selector trong file Monochrome.css như sau:

nav
{
  background-image: url(Images/MenuBackground.jpg);
}

Hoặc muốn liên kết đến file ảnh (giả sử cũng tên là MenuBackground.jpg) trong thư mục Images chứa trong Site (thay vì chứa trong một theme nào đó) chúng ta viết selector như sau (để ý có dấu / trước Images dùng để chỉ thư mục gốc của Site):

  background-image: url(/Images/MenuBackground.jpg);

Liên kết file ảnh đến theme

Thực hành liên kết hình ảnh đến theme

Tìm đến thư mục Monochrome và Copy thư mục Images và file Monochrome.css. Chọn theme Monochrome trong cửa sổ Solution Explorer của VS và chọn Paste. Lúc này trong theme Monochrome sẽ như sau:

Tương tự đến thư mục DarkGrey và Copy thư mục Images và file DarkGrey.css và Paste vào theme DarkGrey, kết quả:

Vào trang master Fontend.master, đến thẻ <header> và xoá phần nội dung là dòng text Phần HEADER và chú ý là giữ lại thẻ <a>

Chọn một trang ASPX nào đó, ví dụ như Content.aspx và Ctrl+F5, kết quả:

Mở file Web.config và thay đổi theme từ DarkGrey đến Monochrome. Mở lại trang Content.aspx, kết quả:

Thay đổi các themes một cách tự động

Chúng ta có thể cho phép người dùng thay đổi các themes theo sở thích của họ, ví dụ tạo một danh sách DropDownList gồm themes để người dùng tuỳ chọn. Để làm được điều này, chúng ta sẽ tạo ra một cookie, là một file text được lưu trữ trên máy tính người dùng. Dữ liệu trong cookie sẽ được gửi trở lại sever tạo ra nó và không thể đọc từ các server khác. Tuy nhiên, vì được lưu trữ trong máy người dùng nên không nên lưu trữ các dữ liệu quan trọng trong cookie.

Để tạo cookie chúng ta dùng Cookie collection của đối tượng Response. Đoạn mã VB tạo cookie như sau:

Dim myCookie As HttpCookie = New HttpCookie("CookieName")
myCookie.Expires = DateTime.Now.AddMonths(3)
myCookie.Value = "Cookie value"
Response.Cookies.Add(myCookie)

Mã C#:

HttpCookie myCookie = new HttpCookie("CookieName");
myCookie.Expires = DateTime.Now.AddMonths(3);
myCookie.Value = "Cookie value";
Response.Cookies.Add(myCookie);

Đoạn mã này sẽ gửi cookie đến browser và được lưu trữ trên máy user cho đến ngày hết hạn (trong ví dụ trên là 3 tháng). Mỗi lần xuất hiện yêu cầu trang, cookie sẽ được gửi trở lại server và chúng ta có thể đọc nó bằng cách dùng Cookie collection trong đối tượng Request qua đoạn mã ví dụ sau:

Dim myCookie As HttpCookie = Request.Cookies.Get("CookieName")
If myCookie IsNot Nothing Then
   Label1.Text = myCookie.Value ' hiển thị "Cookie value"
End If

Mã C#

HttpCookie myCookie = Request.Cookies.Get("CookieName");
if (myCookie != null)
{
     Label1.Text = myCookie.Value; // Would display "Cookie value"
}

Thực hành tạo giao diện cho phép người dùng thay đổi themes

Mở trang master Frontend.master ở chế độ Source, tìm đến phần tử <aside> và xoá phần nội dung bên trong (dòng text Phần SIDEBAR) thay bằng DropDownList control được kéo từ Toolbox, gõ đoạn text Vui long chon Theme và kèm theo thẻ <br/>. Đổi ID của DropDownList thành ThemeList:

Chuyển sang chế độ Design, chọn mũi tên bên phải của DropDownList để mở khung Smart Tasks và chọn Enable AutoPostBack:

Cũng trên thanh Smart Tasks này, nhấp chuột vào Edit Items…và thêm hai item là Monochrome và DarkGrey (hai themes của chúng ta):

Nhấp đôi chuột vào DropDownList để đến sự kiện SelectedIndexChanged:

Thêm dòng mã nhận theme từ danh sách và lưu vào Cookie như sau:

Mã C#:

protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
{
     HttpCookie preferredTheme = new HttpCookie("PreferredTheme");
     preferredTheme.Expires = DateTime.Now.AddMonths(3);
     preferredTheme.Value = ThemeList.SelectedValue;
     Response.Cookies.Add(preferredTheme);
     Response.Redirect(Request.Url.ToString());
}

Trở lại trang Frontend.master ở chế độ Design và nhấp đôi chuột vào bất kì vị trí nào trong trang để đến sự kiện Load của trang hoặc tại file Frontend.master.vb chọn Page Events ở ô bên trái như hình:

Thêm code VB cho sự kiện Load như sau:

Mã C#:

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
     string selectedTheme = Page.Theme;
     HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
     if (preferredTheme != null)
     {
       selectedTheme = preferredTheme.Value;
     }
     if (!string.IsNullOrEmpty(selectedTheme))
     {
       ListItem item = ThemeList.Items.FindByValue(selectedTheme);
       if (item != null)
       {
         item.Selected = true;
       }
     }
   }
}

Lưu tất cả và chọn trang bất kì, như Content.aspx, và Ctrl + F5. Kết quả:

Mỗi lần chúng ta chọn theme từ danh sách thì trang sẽ reload và khi trang reload thì theme được chọn vẫn giữ nguyên. Tuy nhiên, ở đây vẫn chưa có sự thay đổi về giao diện.

Áp dụng theme người dùng chọn

Trong phần thực hành trên, chúng ta cho phép người dùng lựa chọn theme tuỳ ý. Tuy nhiên, khi người dùng chọn một theme nào đó trang sẽ reload nhưng trang không thay đổi giao diện tương ứng với theme được chọn. Trong bài thực hành này chúng ta sẽ lập trình để thay đổi giao diện theme tương ứng với lựa chọn người dùng.

Thực hành áp dụng theme người dùng

Trong thư mục App_Code, mở file BasePage.vb và chọn sự kiện PreInit:

Thêm đoạn mã sau:

Mã C#:

Đối với C#, chúng ta phải dùng using System.Web để có thể dùng lớp Request. Chúng ta cũng cần cài đặt trình xử lý sự kiện trong phương thức constructor của lớp cho sự kiện PreInit:

public BasePage()
{
   this.PreRender += Page_PreRender;
   this.PreInit += Page_PreInit;
}

Phương thức cho sự kiện PreInit của trang:

private void Page_PreInit(object sender, EventArgs e)
{
   HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
   if (preferredTheme != null)
   {
     string folder = Server.MapPath("~/App_Themes/" + preferredTheme.Value);
     if (System.IO.Directory.Exists(folder))
     {
        Page.Theme = preferredTheme.Value;
     }
   }
}

Lưu, chọn trang Content.aspx và Ctrl + F5. Giao diện sẽ bị chồng lấp các theme:

Vào file Web.config và xoá thuộc tính styleSheetTheme từ <pages>. Nếu trang vẫn không thay đổi giao diện thì phải đảm bảo trang được thừa kế từ BasePage (ví dụ trang Content.aspx thì vào file Content.aspx.vb và điều chỉnh Inherits BasePage).Ctrl + F5, chọn theme Monochrome:

Chọn DarkGrey:

Skins

Skin là một file text đơn giản chứa các markup cho phép chúng ta định nghĩa hình thức (hay giao diện) của một hay nhiều server control từ một vị trí trung tâm nào đó. Các file skin có phần mở rộng là .skin. Nếu file skin được đặt trong thư mục theme thì nó trở thành một phần của theme đó. Ví dụ một file skin định nghĩa giao diện cho một button có màu nền #cccccc và màu text trên button là #308462 như sau:

<asp:Button BackColor="#cccccc" ForeColor="#308462" runat="server" />

File skin có thể liên kết file CSS bằng thuộc tính CssClass. Ví dụ định dạng button như trên với file skin như sau:

<asp:Button CssClass="MyButton"  runat="server" />

File css (cùng theme với file skin) như sau:

.MyButton
{
  color: #308462;
  background-color: #cccccc;
}

Tạo một file skin đơn giản

Thêm một file skin vào theme Monochrome bằng cách nhấp chuột phải vào Monochrome chọn Add > Skin File (hay Add > Web Foms Skin File trong Visual Studio 2019), đặt tên file skin là Button:

Xoá toàn bộ nội dung trong file Button.skin và thay bằng dòng mã:

<asp:Button CssClass="MyButton" BackColor="#509EE7" runat="server" />

Mở file Monochrome.css và thêm đoạn mã sau vào cuối file:

Tạo trang SkinDemo.aspx và thêm một button vào trang. Chú ý trang
SkinDemo.aspx thừa kế trang BasePage, có tiêu đề trong thuộc tính title:

Lưu tất cả thay đổi. Ctrl + F5 trang SkinDemo.aspx (lưu ý button chỉ thay đổi khi chúng ta chọn theme Monochrome):

Định danh cho các Skins

Các skins có thể được định danh bằng SkinID. Nhờ thế mà một trang aspx có thể chọn một skin nào đó bất kì để áp dụng cho control.

Thực hành định danh cho skin

Mở file Button.skin, copy dòng mã có sẵn và paste ở dòng kế tiếp. Xoá thuộc tính CssClass, thêm và thay đổi các thuộc tính BackColor, ForeColor, SkinID như sau:

Lưu thay đổi. Mở trang SkinDemo.aspx ở chế độ Source, thêm button thứ hai vào trang và thêm thuộc tính SkinID như sau:

Lưu và Ctrl + F5 trang SkinDemo.aspx :

Chú ý: chúng ta có thể vô hiệu hoá ảnh hưởng của file skin lên control trong theme bằng thuộc tính EnableTheming (gồm hai giá trị là true hay false). Ví dụ vô hiệu hoá ảnh hưởng của file Button.skin lên Button1 như sau:

 <asp:Button ID="Button1" runat="server" EnableTheming="False" Text="Button" />

Lập trình trong ASP.NET (Visual Basic và C#) >

Trần Ngọc Minh Notes

Stay hungry, stay foolish!