Xoá trang Default.aspx: • Right-click trang Default.aspx chọn delete để xoá Chúng ta sẽ tạo lại trang Default.aspx sau khi đã tạo trang “Master page”... Đặt tên là : Images Copy các
Trang 1Chương 2 Tạo website và xây dựng phần giao diện
***
1 Tạo web site KimSoft (sử dụng Visual Studio NET 2008) như sau:
• Từ menu bar, chọn: File New Web Site
• Chọn Templates: ASP.NET Web Site
• Chọn version NET Framework : NET Framework 3.5
Hình 01: Tạo website KimSoft.
2 Xoá trang Default.aspx:
• Right-click trang Default.aspx chọn delete để xoá (Chúng ta sẽ tạo lại trang Default.aspx sau khi đã tạo trang “Master page”).
Trang 23 Tạo trang MasterPage.master:
• Từ menu bar, chọn : Website Add New Item AJAX Master Page.
Hình 02: Tạo trang MasterPage.master
4 Tạo theme SeaBlue:
• Tạo thư mục theme SeaBlue :
Right-click project : KimSoft
Hình 03: Tạo theme SeaBlue
• Tạo thư mục Images cho theme SeaBlue
Right-click thư mục : App_Themes\SeaBlue
Trang 3 Đặt tên là : Images
Copy các hình ảnh của theme SeaBlue vào thư mục Images vừa tạo (Từ thư mục Resources).
• Tạo file Default.css cho theme SeaBlue
Right-click thư mục : App_Themes\SeaBlue
Đặt tên là : Default.css
Hình 04: Tạo file Default.css cho theme SeaBlue
• Viết code cho file Default.css như sau:
/* Phần Header bên trái (có logo)
-Lấy kích thước thật 718x182 */
Trang 4padding: 0px; margin: 0px; width: 100%; height: 182px;
position: absolute; text-align: right; top: 156px; right: 0px; width: 180px;
height: 80px; padding: 2px 0px 2px 2px; font-size: 9px;
}
/* Phần bên trái
-Sau khi trừ chiều cao của Header Baner (top: 12px, width: 200px (fix)) */
#leftcol
{
position: absolute; top: 182px; left: 0px; width: 199px;
background-color: white; font-size: 10px;
}
/* Tiêu đề của phần cột trái (sectiontitle) */
#leftcol div.sectiontitle, #leftcol sectiontitle span
Trang 75 Thêm các control ASP.NET và HTML tĩnh vào trang MasterPage.master như sau:
• Thêm vào các div phần header:
Thêm div header:
< form id ="Main" runat ="server">
< div id "header"> </ div >
</ form >
Thêm div subheader, loginbox, themeselector:
<div id "header">
<div id ="subheader"> </div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme selector</div>
</div>
Trang 8 Thêm div headermenu:
• Kết quả các bước trên như sau:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>KimSoft</title>
</head>
<body>
<form id="Main" runat="server">
<! Phần đầu (Header) >
<asp:ScriptManager ID="ScriptManager1" runat="server">
Trang 9SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme Selector</div>
• Thêm vào các div phần bên trái LeftCol:
<! Phần cột trái (LeftCol) >
<div id="leftcol">
<div class="sectiontitle">
<asp:Image ID="imgArrow1"
<div class="text">
< >20 Aug 2005 :: News Header</b
<br />News text
</div>
<div class="alternatetext">
< >20 Aug 2005 :: News Header</b
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
</div>
• Thêm vào các div phần ở giữa Container:
<! Phần giữa (Container) >
<asp:ContentPlaceHolder ID="MainContent" runat="server">
< > </p><p </p><p </p><p </p
< > </p><p </p><p </p><p </p
Trang 10<! Phần cột phải (RightCol) >
<div id="rightcol">
<div class="sectiontitle">
<asp:Image ID="Image1"
<div class="text">
< >20 Aug 2005 :: News Header</b
<br />News text
</div>
<div class="alternatetext">
< >20 Aug 2005 :: News Header</b
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="RightContent" runat="server" />
</div>
• Thêm vào các div phần cuối Footer:
<! Phần cuối (Footer) >
Trang 11• Kết quả các bước trên như sau:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>KimSoft</title>
</head>
<body>
<form id="Main" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<div id="loginbox">Login box</div>
<div id="themeselector">Theme Selector</div>
<div class="sectiontitle">
<asp:Image ID="imgArrow1"
<div class="text">
< >20 Aug 2005 :: News Header</b
<br />News text
</div>
<div class="alternatetext">
< >20 Aug 2005 :: News Header</b
<br />Other news text
</div>
Trang 12
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
<asp:ContentPlaceHolder ID="MainContent" runat="server">
< > </p><p </p><p </p><p </p
< > </p><p </p><p </p><p </p
<div class="sectiontitle">
<asp:Image ID="Image1"
<div class="text">
< >20 Aug 2005 :: News Header</b
<br />News text
</div>
<div class="alternatetext">
< >20 Aug 2005 :: News Header</b
<br />Other news text
Trang 13</body>
</html>
6 Tạo file Web.sitemap:
• Right-click project : KimSoft
• Đặt tên là : Web.sitemap
• Thêm vào file Web.sitemap vừa tạo các XML node như sau:
<?xml version= 1.0" encoding= utf-8" ?>
<siteMap xmlns= http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode title= Home" url= ~/Default.aspx"
<siteMapNode title= Store" url= ~/Store/Default.aspx"
<siteMapNode title= Shopping cart" url= ~/Store/ShoppingCart.aspx" />
</siteMapNode>
<siteMapNode title= Forum" url= ~/Forum/Default.aspx" />
<siteMapNode title= About" url= ~/About.aspx" />
<siteMapNode title= Contact" url= ~/Contact.aspx" />
<siteMapNode title= Admin" url= ~/Admin/Default.aspx" />
</siteMapNode>
</siteMap>
7 Thêm file Controls.skin
• Right-click thư mục: SeaBlue
• Chọn : Add New Item Skin File
• Đặt tên là : Controls.skin
Hình 05: Tạo file Controls.skin.
8 Thêm code vào file Controls.skin như sau:
<% TextBox - Thiết lập skin cho TextBox %>
<asp:TextBox runat="server" BorderStyle="dashed" BorderWidth="1px" />
<% Label Thiết lập skin cho Label %>
Trang 14<asp:Label runat="server" SkinID="FeedbackOK" ForeColor="green" />
<asp:Label runat="server" SkinID="FeedbackKO" ForeColor="red" />
<% SiteMapPath - Thiết lập skin cho SiteMapPath %>
<asp:SiteMapPath runat="server">
9 Thêm trang Default.aspx
• Right-click project : KimSoft
• Chọn checkbox : “Select master page” trong hộp hội thoại “Add New Item”.
• Chọn master page : MasterPage.master
Hình 06: Tạo trang Default.aspx
10 Tạo thư mục Images cho project
• Right-click project : KimSoft
• Copy các hình ảnh của project vào thư mục Images vừa tạo (Từ thư mục Resources).
11 Thêm hình và text vào phần ContentPlaceHolder MainContent như sau:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:Image ID="imgLogo"
Trang 1512 Áp dụng Theme cho các trang:
• Thay vì áp dụng Theme cho từng trang bằng cách thêm trực tiếp vào thuộc tính @Page, chúng ta thêm vào file web.config, chỉ 1 lần và áp dụng cho tất cả các trang bằng cách thêm theme="SeaBlue"
masterPageFile="~/MasterPage.master" vào tag pages như sau:
<pages theme= SeaBlue " masterPageFile= ~/MasterPage.master "
</pages>
13 Xoá thuộc tính MasterPageFile từ trang Default.aspx
• Vì đã đặt trong tag pages của file web.config nên các trang không cần đặt MasterPageFile nữa.
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
14 Thêm theme thứ 2 tên Orange
• Right click project : KimSoft
15 Thêm thư mục Images cho Orange
• Right-click thư mục : App_Themes\ Orange
• Copy hình của theme Orange vào thư mục Images vừa tạo (Từ thư mục Resources).
16 Thêm file Default.css
• Copy và paste file Default.css từ SeaBlue
17 Thêm file Controls.skin
• Copy và paste file controls.skin của SeaBlue
• Chú ý: Ngoài hình ảnh, nếu các bạn muốn theme Orange khác theme SeaBlue về vị trí, màu sắc, hiệu ứng,
…của các đối tượng thì các bạn chỉnh sửa 2 file Default.css và Controls.skin vừa copy từ theme SeaBlue.
18 Tạo thư mục "Controls" cho project
• Right-click project : KimSoft
• Đặt tên là : Controls
19 Tạo Web User Control ThemeSelector
• Right-click thư mục : Controls
• Đặt tên là : ThemeSelector.ascx
Trang 16Hình 07: Tạo Web User Control ThemeSelector.ascx.
20 Thêm chuỗi “Theme:” và control DropDownList vào ThemeSelector.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ThemeSelector.ascx.cs"
Inherits="KimSoft.UI.Controls.Controls_ThemeSelector" %>
< >Theme:</b
<asp:DropDownList runat="server" ID="ddlThemes" AutoPostBack="true" />
21 Thêm code cho ThemeSelector.ascx.cs như sau:
• Lấy danh sách cho drop-down list bằng phương thức GetThemes của lớp Helper
• Đặt giá trị mặc định là Theme của trang hiện tại
• Chú ý: Đặt control ThemeSelector trong namespace KimSoft.UI.Controls.
22 Tạo thư mục App_Code:
• Right-click project : KimSoft
23 Tạo lớp Helpers
• Right-Click thư mục : App_Code
• Đặt tên là : Helpers.cs
Trang 17Hình 08: Tạo lớp Helpers.cs
24 Viết code cho lớp Helpers như sau:
namespace KimSoft.UI
{
/// <summary>
/// Đây là lớp tĩnh không cần khởi tạo khi sử dụng
/// Bao gồm các phương thức (tiện ích) hỗ trợ cho các trang,
/// các đối tượng khác của project
//Trả về 1 mảng tên các theme được lưu trong Cache
// sử dụng từ khoá (key) SiteThemes
if (HttpContext.Current.Cache["SiteThemes"] != null)
for (int i = 0; i <= themes.Length - 1; i++)
themes[i] = Path.GetFileName(themes[i]);
//Lưu mảng theme vừa lấy vào cache để cung cấp cho lần thứ 2 trở đi
CacheDependency dep = new CacheDependency(themesDirPath);
HttpContext.Current.Cache.Insert("SiteThemes", themes, dep);
return themes;
}
}
}
Trang 1825 Thêm 2 namespace cho Directory và CacheDependency
using System.IO;//Directory
using System.Web.Caching;//CacheDependency
26 Kéo thả ThemeSelector.ascx vào MasterPage.master:
• Kết quả như sau:
/// Đây là lớp tĩnh (static)==> không cần khởi tạo khi sử dụng
/// Lớp lưu trữ các biến toàn cục cho ứng dụng
/// </summary>
public static class Globals
{
//Khai báo và khởi tạo biến tĩnh ThemesSelectorID
// để lưu lại ID của theme hiện hành được chọn
public static string ThemesSelectorID = "";
Trang 19/// Lớp BasePage kế thừa từ System.Web.UI.Page
/// Bao gồm các phương thức viết chồng (override) lên các phương thức có sẵn của lớp Page /// Được các trang Defalt.aspx, Contact.aspx, About.aspx, kế thừa
/// thay vì phải viết nhiều lần trong các trang trên
/// </summary>
public class BasePage : System.Web.UI.Page
{
/// <summary>
/// Vì project này sử dụng nhiều Theme và cho phép người dùng
/// chọn thay đổi trực tiếp, nên mỗi khi load trang ta cần xử ly
/// chọn Theme tương ứng và hiển thị cho trang
if (this.Request.Form[" EVENTTARGET"] == id &&
!string.IsNullOrEmpty(this.Request.Form[id]))
{
this.Theme = this.Request.Form[id];
this.Session["CurrentTheme"] = this.Theme;
// thông qua từ khoá (key) CurrentTheme
if (this.Session["CurrentTheme"] != null)
this.Theme = this.Session["CurrentTheme"].ToString();
30 Thay đổi code cho trang Default.aspx.cs kế thừa từ lớp BasePage thay vì System.Web.UI.Page:
public partial class _Default : KimSoft.UI BasePage
Trang 2032 Thêm vào 2 trang Contact.aspx và About.aspx sử dụng MasterPage.master để test
• Tạo trang Contac.aspx và About.aspx
• Thay đổi code cho trang Contact.aspx.cs và About.aspx.cs kế thừa từ lớp BasePage thay vì
System.Web.UI.Page như sau:
public partial class Contact : KimSoft.UI BasePage
33 Thêm static method SetInputControlsHighlight vào lớp Helpers như sau:
public static class Helpers
public static void SetInputControlsHighlight(Control container,
string className, bool onlyTextBoxes)
{
foreach (Control ctl in container.Controls)
{
if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox ||
ctl is DropDownList || ctl is ListBox || ctl is CheckBox ||
ctl is RadioButton || ctl is RadioButtonList || ctl is CheckBoxList)
34 Để thực thi code trong sự kiện Load của mỗi trang, tạo phương thức “override void OnLoad”
trong lớp BasePage class như sau: