Building CMS E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005 - Chương 2 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.19 MB, 25 trang )
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 1
Chươ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
Chọn Location: File System
Chọn Language: Visual C#
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”).
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 2
3. Tạo trang MasterPage.master:
Từ menu bar, chọn : Website Add New Item AJAX Master Page.
Đặt tên là : MasterPage.master.
Hình 02: Tạo trang MasterPage.master
4. Tạo theme SeaBlue:
Tạo thư mục theme SeaBlue:
Right-click project : KimSoft
Chọn : Add ASP.NET Folder Theme
Đặt tên là : SeaBlue
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 3
Hình
03
:
Tạo theme SeaBlue
Tạo thư mục Images cho theme SeaBlue
Right-click thư mục : App_Themes\SeaBlue
Chọn : New Folder.
Đặ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
Chọn : Add New Item Style Sheet
Đặt tên là : Default.css.
Hình 04: Tạo file Default.css cho theme SeaBlue
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 4
Viết code cho file Default.css như sau:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
/* Phần Header bên trái (có logo)
-Lấy kích thước thật 718x182 */
#subheader
{
padding: 0px;
margin: 0px;
width: 718px;
height: 182px;
background-image: url(images/HeaderLeft.jpg);
}
/* Phần Header
-Tiếp theo hình Header.jpg
-Với width: 100% lắp đầy các khoảng trống còn lại. */
#header
{
padding: 0px; margin: 0px; width: 100%; height: 182px;
background-image: url(images/HeaderRight.jpg);
}
/* Phần Header Menu
Home|Store|Forum| */
#headermenu
{
position: relative; top: 160px; left: 205px; width: 500px;
padding: 2px 2px 2px 2px;
text-transform: uppercase;
}
/* Phần Header Menu
Home|Store|Forum|
Trạng thái thông thường. */
.headermenulink a
{
text-decoration: none;
color:Orange;
}
/* Phần Header Menu
Home|Store|Forum|
Trạng hái khi chuột hover. */
.headermenulink a:hover
{
text-decoration: underline overline;
color:Highlight;
font-weight:bold;
}
/* Phần login box (Đăng nhập, thông tin, trang thái người dùng). */
#loginbox
{
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 5
position: absolute; top: 16px; right: 10px; width: 180px; height: 80px;
padding: 2px 2px 2px 2px; font-size: 9px;
}
/* Phần Theme
-Cho phép chọn theme động. */
#themeselector
{
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
{
padding: 6px 6px 6px 3px;
background-image: url(Images/TitleBackGround.jpg);
color: white;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 14px;
}
/* Phần text cột trái */
#leftcol div.text
{
padding: 6px 6px 6px 6px;
text-align: justify;
}
/* Phần alternatetext cột trái. */
#leftcol div.alternatetext
{
padding: 6px 6px 6px 6px;
background-color: #fcd4be;
text-align: justify;
}
/* Phần container */
#container
{
background-color:ActiveBorder;
}
#subcontainer
{
background-color: #bcbfc0;
margin-right: 200px;
}
/* Phần centercol */
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 6
background-color: white;
height: 500px;
}
/* Phần breadcrumb */
#breadcrumb
{
background-image: url(Images/TitleBackGround.jpg);
color: white;
padding: 6px 6px 6px 3px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding-left: 5px;
height: 14px;
}
/* Phần breadcrumb */
#breadcrumb a
{
text-decoration: none;
color:white;
}
/* Phần breadcrumb */
#breadcrumb a:hover
{
text-decoration: underline;
color:Highlight;
font-weight:bold;
}
/* Phần centercolcontent */
#centercolcontent
{
padding: 15px 6px 15px 6px;
}
#centercolcontent div.sectiontitle, #centercolcontent .sectiontitle span
{
font-weight: bold;
font-size: larger;
color: #b45d16;
}
#centercolcontent div.sectionsubtitle
{
font-weight: bold;
padding-bottom: 4px;
}
/* Phần rightcol */
#rightcol
{
position: absolute;
top: 182px;
right: 0px;
width: 199px;
color: black;
background-color: White;
font-size: 10px;
}
/* Phần rightcol */
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 7
#rightcol a
{
color: Yellow;
}
/* Phần rightcol */
#rightcol div.text
{
padding: 6px 6px 6px 6px;
text-align: justify;
}
/* Phần rightcol */
#rightcol div.sectiontitle, #rightcol .sectiontitle span
{
padding: 6px 6px 6px 3px;
background-image: url(Images/TitleBackGround.jpg);
color: #fc9a0e;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 14px;
}
/* Phần rightcol */
#footer
{
padding: 0px;
margin: 0px;
width: 100%;
height: 49px;
background-image: url(Images/Footer.jpg);
}
/* Phần Footer Menu */
#footermenu
{
text-align: center;
padding-top: 10px;
}
/* Phần Footer Menu */
.footermenulink
{
font-family: Arial, Serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
/* Phần Footer Menu */
.footermenulink a
{
text-decoration: none;
color: Orange;
}
/* Phần Footer Menu */
.footermenulink a:hover
{
text-decoration: underline overline;
color:Highlight;
font-weight:bold;
}
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 8
/* Phần Footer Text
Copyright */
#footertext
{
text-align: center;
padding-top: 3px;
}
/* Phần Highlight */
.highlight
{
background-color: #fefbd2; color: #000080;
}
5. Thêm vào trang MasterPage.master các control ASP.NET và thành phần HTML tĩnh 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>
Thêm div headermenu:
<div id ="subheader">
<div id="headermenu">
</div>
</div>
Thêm SiteMapDataSource control (vào div headermenu):
<div id="headermenu">
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
StartingNodeOffset="0" />
</div>
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 9
Thêm Menu control với các thuộc tính như sau:
<div id="headermenu">
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server"
StartingNodeOffset="0" />
<asp:Menu ID="mnuHeader"
runat="server"
CssClass="headermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
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"
"
<html xmlns="
<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">
</asp:ScriptManager>
<div id = "header">
<div id = "subheader">
<div id="headermenu">
<! Control SiteMapDataSource >
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server"
StartingNodeOffset="0" />
<! Control Menu >
<asp:Menu ID="mnuHeader"
runat="server"
CssClass="headermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme Selector</div>
</div>
</div>
</form>
</body>
</html>
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 10
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"
runat="server"
ImageUrl="~/Images/arrowr.gif"
ImageAlign="left"
hspace="6" />Site News
</div>
<div class="text">
<b>20 Aug 2005 :: News Header</b>
<br />News text
</div>
<div class="alternatetext">
<b>20 Aug 2005 :: News Header</b>
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
</asp:ContentPlaceHolder>
</div>
Thêm vào các div phần ở giữa Container:
<! Phần giữa (Container) >
<div id="container">
<div id="subcontainer">
<div id="centercol">
<div id="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" />
</div>
<div id="centercolcontent">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
</asp:ContentPlaceHolder>
</div>
</div>
</div>
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 11
Thêm vào các div phần bên phải RightCol:
<! Phần cột phải (RightCol) >
<div id="rightcol">
<div class="sectiontitle">
<asp:Image ID="Image1"
runat="server"
ImageUrl="~/Images/arrowr.gif"
ImageAlign="left"
hspace="6" />Title
</div>
<div class="text">
<b>20 Aug 2005 :: News Header</b>
<br />News text
</div>
<div class="alternatetext">
<b>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) >
<div id="footer">
<! Control Menu >
<div id="footermenu">
<asp:Menu ID="mnuFooter"
runat="server"
style="margin-left:auto; margin-right:auto;"
CssClass="footermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="footertext">
<small>Copyright © 2008 by KimSoft
</div>
</div>
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 12
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"
"
<html xmlns="
<head id="Head1" runat="server">
<title>KimSoft</title>
</head>
<body>
<form id="Main" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<! Phần đầu (Header) >
<div id = "header">
<div id = "subheader">
<div id="headermenu">
<! Control SiteMapDataSource >
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server"
StartingNodeOffset="0" />
<! Control Menu >
<asp:Menu ID="mnuHeader"
runat="server"
CssClass="headermenulink"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="loginbox">Login box</div>
<div id="themeselector">Theme Selector</div>
</div>
</div>
<! Phần cột trái (LeftCol) >
<div id="leftcol">
<div class="sectiontitle">
<asp:Image ID="imgArrow1"
runat="server"
ImageUrl="~/Images/arrowr.gif"
ImageAlign="left"
hspace="6" />Site News
</div>
<div class="text">
<b>20 Aug 2005 :: News Header</b>
<br />News text
</div>
<div class="alternatetext">
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 13
<b>20 Aug 2005 :: News Header</b>
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="LeftContent" runat="server" />
</asp:ContentPlaceHolder>
</div>
<! Phần giữa (Container) >
<div id="container">
<div id="subcontainer">
<div id="centercol">
<div id="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" />
</div>
<div id="centercolcontent">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<! Phần cột phải (RightCol) >
<div id="rightcol">
<div class="sectiontitle">
<asp:Image ID="Image1"
runat="server"
ImageUrl="~/Images/arrowr.gif"
ImageAlign="left"
hspace="6" />Title
</div>
<div class="text">
<b>20 Aug 2005 :: News Header</b>
<br />News text
</div>
<div class="alternatetext">
<b>20 Aug 2005 :: News Header</b>
<br />Other news text
</div>
<asp:ContentPlaceHolder ID="RightContent" runat="server" />
</div>
<! Phần cuối (Footer) >
<div id="footer">
<! Control Menu >
<div id="footermenu">
<asp:Menu ID="mnuFooter"
runat="server"
style="margin-left:auto; margin-right:auto;"
CssClass="footermenulink"
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 14
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
StaticDisplayLevels="2" />
</div>
<div id="footertext">
<small>Copyright © 2008 by KimSoft
</div>
</div>
</form>
</body>
</
html
>
6. Tạo file Web.sitemap:
Right-click project : KimSoft
Chọn : Add New Item Site Map.
Đặ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=" >
<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
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 15
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 %>
<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">
<PathSeparatorTemplate>
<asp:Image runat="server" ImageUrl="Images/SeparateWhite.gif"
align="middle" />
</PathSeparatorTemplate>
</asp:SiteMapPath>
9. Thêm trang Default.aspx
Right-click project : KimSoft
Chọn : Add New Item Web Form
Chọn checkbox : “Select master page” trong hộp hội thoại “Add New Item”.
Chọn master page : MasterPage.master.
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 16
Hình 06: Tạo trang Default.aspx
10. Tạo thư mục Images cho project
Right-click project : KimSoft
Chọn : New Folder.
Đặt tên là : Images
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"
runat="server"
ImageUrl="~/Images/Logo.jpg"
ImageAlign="left"
hspace="8" />
<asp:Label ID="Label1" runat="server" Text="Welcome to KimSoft"></asp:Label>
</
asp
:
Content
>
12. Á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:
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 17
<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
Chọn : Add Folder Theme Folder
Đặt tên là : Orange
15. Thêm thư mục Images cho Orange
Right-click thư mục : App_Themes\ Orange
Chọn : New Folder
Đặt tên là : Images
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
Chọn : Add Folder Regular folder
Đặt tên là : Controls.
19. Tạo Web User Control ThemeSelector
Right-click thư mục : Controls
Chọn : Add New Item Web User Control
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 18
Đặt tên là : ThemeSelector.ascx.
Hì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" %>
<b>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.
namespace
KimSoft.UI.Controls
{
public partial class Controls_ThemeSelector : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
ddlThemes.DataSource = Helpers.GetThemes();
ddlThemes.DataBind();
ddlThemes.SelectedValue = this.Page.Theme;
}
}
}
Chú ý: Đặt control ThemeSelector trong namespace KimSoft.UI.Controls.
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 19
22. Tạo thư mục App_Code:
Right-click project : KimSoft
Chọn : Add ASP.NET Folder App_Code
23. Tạo lớp Helpers
Right-Click thư mục : App_Code
Chọn: Add New Item.
Đặt tên là : Helpers.cs
Hì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.
/// </summary>
public static class Helpers
{
/// <summary>
/// Trả về 1 mảng (array) tên của các theme trong thư mục App_Theme.
/// </summary>
public static string[] GetThemes()
{
//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)
{
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 20
return (string[])HttpContext.Current.Cache["SiteThemes"];
}
else
{
//Lấy đường dẫn của thư mục App_Themes lưu vào biến themesDirPath.
string themesDirPath =
HttpContext.Current.Server.MapPath("~/App_Themes");
// Lấy mảng các thư mục theme dưới thư mục App_Themes theo biến
themesDirPath.
string[] themes = Directory.GetDirectories(themesDirPath);
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;
}
}
}
}
25. 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:
<%@ Register src="Controls/ThemeSelector.ascx" tagname="ThemeSelector" tagprefix="uc1" %>
<div id="themeselector">
<uc1:ThemeSelector ID="ThemeSelector1" runat="server" />
</div>
27. Thêm lớp Globals.cs vào thư mục App_Code và viết code cho nó như sau:
namespace KimSoft
{
/// <summary>
/// Đâ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 = "";
}
}
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 21
28. Quay trở lại ThemeSelector.ascx.cs và thêm code để lưu ID của theme được chọn vào
ThemesSelectorID :
namespace KimSoft.UI.Controls
{
public partial class Controls_ThemeSelector : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
//Lưu ID của theme được chọn từ DropDownListBox ddlThemes
if (Globals.ThemesSelectorID.Length == 0)
Globals.ThemesSelectorID = ddlThemes.UniqueID;
ddlThemes.DataSource = Helpers.GetThemes();
ddlThemes.DataBind();
ddlThemes.SelectedValue = this.Page.Theme;
}
}
}
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 22
29. Tạo lớp BasePage trong thư mục App_Code và viết code như sau:
namespace KimSoft.UI
{
/// <summary>
/// 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ử lý
/// chọn Theme tương ứng và hiển thị cho trang.
/// </summary>
protected override void OnPreInit(EventArgs e)
{
string id = Globals.ThemesSelectorID;
if (id.Length > 0)
{
// Nếu trang khởi tạo là sự kiện postback phát sinh bởi dropdownlist
theme, lấy theme được chọn và sử dụng nó cho trang hiện tại.
if (this.Request.Form["__EVENTTARGET"] == id &&
!string.IsNullOrEmpty(this.Request.Form[id]))
{
this.Theme = this.Request.Form[id];
this.Session["CurrentTheme"] = this.Theme;
}
else
{
// Nếu không phải là sự kiện postback, hay postback phát sinh bởi các
control khác thì, đặt theme của trang là giá trị tìm trong Session
// thông qua từ khoá (key) CurrentTheme
if (this.Session["CurrentTheme"] != null)
this.Theme = this.Session["CurrentTheme"].ToString();
}
}
base.OnPreInit(e);
}
}
}
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
{
protected void Page_Load(object sender, EventArgs e){ }
}
31. Chạy và kiểm tra chương trình.
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 23
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 24
32. 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
{
protected void Page_Load(object sender, EventArgs e){ }
}
public partial class About :
KimSoft.UI.
BasePage
{
protected void Page_Load(object sender, EventArgs e){ }
}
33. Thêm static method SetInputControlsHighlight vào lớp Helpers như sau:
public static class Helpers
{
public static string[] GetThemes(){…}
/// <summary>
/// Highlight cho các input control (control nhập liệu).
/// </summary>
/// <param name="container"></param>
/// <param name="className"></param>
/// <param name="onlyTextBoxes"></param>
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)
{
WebControl wctl = ctl as WebControl;
wctl.Attributes.Add("onfocus", string.Format(
"this.className = '{0}';", className));
wctl.Attributes.Add("onblur", "this.className = '';");
}
else
{
if (ctl.Controls.Count > 0)
SetInputControlsHighlight(ctl, className, onlyTextBoxes);
}
}
}
}
Building CMS / E-Commerce Project using ASP.NET 3.5 in C# 2008 and SQLServer 2005
GVHD: Dương Ngọc Long Nam – Page 25
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:
namespace KimSoft.UI
{
public class BasePage : System.Web.UI.Page
{
protected override void OnPreInit(EventArgs e){ }
/// <summary>
// Mỗi khi load trang thêm sự kiện onfocus và onblur javascripts cho tất cả input
control
// để các active control có giao diện khác.
/// </summary>
protected override void OnLoad(EventArgs e)
{
Helpers.SetInputControlsHighlight(this, "highlight", false);
base.OnLoad(e);
}
}
}
35. Chạy và kiểm tra chương trình.
***HẾT CHƯƠNG 2***
