BÀI 5: Thiết kê và lập trình web với ASP.NET - CẤU HÌNH GIAO DIỆN WEDSITE

Lp trình và Thit k Web 2 Bà i 5 Bà i 5 CuCu hìnhhình GiaoGiao dindin WebsiteWebsite CuCu hìnhhình GiaoGiao dindin WebsiteWebsite Ths Trn Th Bích Hnh Ths . Trn Th Bích Hnh Khoa CNTT Khoa CNTT –– H.KHTNH.KHTN © 2009 Khoa Công ngh thông tin LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website NidNid Ni d ung Ni d ung  Master Page Master Page  S dng CSS vi ASP.NET Server Control  Skin và Theme  Site Navigation © 2009 Khoa CNTT - HKHTN 2 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website NidNid Ni d ung Ni d ung  Master Page Master Page  S dng CSS vi ASP.NET Server Control  Skin và Theme  Site Navigation © 2009 Khoa CNTT - HKHTN 3 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website MtPMtP M as t er P age M as t er P age  Master Page cho phép đnh ngha layout template nht Master Page cho phép đnh ngha layout template nht quán cho toàn b WebForm trong site  Content Page là các WebForm k tha Master Page và b Content Page là các WebForm k tha Master Page và b sung thêm ni dung © 2009 Khoa CNTT - HKHTN Master Page ( .master ) Content Page ( .aspx ) 4 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website MtPMtP M as t er P age M as t er P age  Master page s đnh nghacác PlaceHolderControl Master page s đnh ngha các PlaceHolderControl  Content page s chèn ni dung tng ng vào các PlaceHolderControl trong master page PlaceHolderControl trong master page . © 2009 Khoa CNTT - HKHTN 5 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website TT tt // ThTh điđi MtPMtP tt CttPCttP T ruy T ruy xu t xu t // Th ay Th ay điđi M as t er P age M as t er P age tt C on t en t P age C on t en t P age  Cách 1 : S dng phng thc FindControl t đi tng Cách 1 : S dng phng thc FindControl t đi tng Master • Ví d – Trong Master Page có 1 Hyperlink vi ID= “controlInMasterPage“. C CS – Trong C ontent Page.aspx. CS : HyperLink ad = ( HyperLink) Master.FindControl ( “ controlInMasterPage " ); HyperLink ad ( HyperLink) Master.FindControl ( controlInMasterPage ); if (ad != null) { ad.ImageUrl = "images/Logo.gif"; ad.NavigateUrl = "http://www.interneturl.com"; © 2009 Khoa CNTT - HKHTN } 6 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website TT tt // ThTh điđi MtPMtP tt CttPCttP T ruy T ruy xu t xu t // Th ay Th ay điđi M as t er P age M as t er P age tt C on t en t P age C on t en t P age  Cách 2 : Cách 2 : – Master Page: óng gói d liu thành các thuc tính có th tru y xut ( Pro p erties ) y (p ) public string AdImageUrl { get { return controlInMasterPage.ImageUrl; } } set { c ontrolInMasterPa g e.ImageUrl = value; g } } © 2009 Khoa CNTT - HKHTN 7 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website TT tt // ThTh điđi MtPMtP tt CttPCttP T ruy T ruy xu t xu t // Th ay Th ay điđi M as t er P age M as t er P age tt C on t en t P age C on t en t P age  Cách 2( tt ): Cách 2 ( tt ): – Content Page: • Ch đnh kiu c th ca Master Page trong Content page aspx Ch đnh kiu c th ca Master Page trong Content page . aspx <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" …%> / <%@ MasterType V irtualPath="~ / MasterPage.master" %> hoc <%@ MasterType TypeName=“MyMasterPageClassName" %> • Truy xut/Thay đi Master Page trong Content page.aspx.CS Master AdImageUrl = "images/Logo gif"; Master . AdImageUrl = "images/Logo . gif"; © 2009 Khoa CNTT - HKHTN 8 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website LL tì htì h thth điđi MtPMtP L p L p t r ì n ht r ì n h th ay th ay điđi M as t er P age M as t er P age  Gán MasterPage mi cho Page.MasterPageFile trong Gán MasterPage mi cho Page.MasterPageFile trong hàm x lý s kin Page_PreInit protected void Page_PreInit(object sender, EventArgs e) { Page.MasterPageFile = "~/AnotherMasterPage.master"; } © 2009 Khoa CNTT - HKHTN 9 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website  CC X  X  lýlý ss kinkin phátphát sinhsinh tt Master Master trongtrong C ontent Page C ontent Page  óng gói control phát sinh s kin trong MasterPage óng gói control phát sinh s kin trong MasterPage // MasterPage.aspx.cs public RadioButtonList MyRadioList { get { return RadioButtonList1; } }  Bts kinx lý trong ContentPage // ContentPage.aspx.cs protected void Page_Load(object sender, EventArgs e) { Master.MyRadioList.SelectedIndexChanged += new System.EventHandler( ContentList_Changed); } protected void ContentList_Changed(object sender, EventArgs e) { RadioButtonList myRadioList = (RadioButtonList)sender; Response.Write(myRadioList.SelectedValue); © 2009 Khoa CNTT - HKHTN 10 } Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website NidNid Ni d ung Ni d ung  Master Page Master Page  S dng CSS vi ASP.NET Server Control  Skin và Theme  Site Navigation © 2009 Khoa CNTT - HKHTN 11 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd CSSCSS ii ASP NET S C t lASP NET S C t l SS d ng d ng CSS CSS v i v i ASP . NET S erver C on t ro lASP . NET S erver C on t ro l  Cách 1: Thay đi Properties ca các asp.net server Cách 1: Thay đi Properties ca các asp.net server control lúc thitk ( inline css) • Ví d: <span id="LabelMsg" style="display:inline-block; lRd co l or: R e d ; background-color:#FFFF80; border-color:Lime; border-st y le:Dashed ; y ; font-weight:bold; font-style:italic; text-decoration:underline;"> Hll W ld © 2009 Khoa CNTT - HKHTN H e ll o W or ld </span> 12 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd CSSCSS ii ASP NET S C t lASP NET S C t l SS d ng d ng CSS CSS v i v i ASP . NET S erver C on t ro lASP . NET S erver C on t ro l  Cách 2: Thay đini dung thuc tính Style (inline css) ca đitng server control tng ng • Ví d: Code behind: LabelMsg.Style[“font-style"] = "italic“ ; LabelMsg.Style[“text-decoration"] = “underline“ ; LabelMsg.Style [ “ color " ] = “ Red “ ; LabelMsg.Style [ color ] Red ; <span id="LabelMsg" s tyle="font-style:italic; text-decoration:underline; color:Red;“> Hll W ld © 2009 Khoa CNTT - HKHTN H e ll o W or ld </span> 13 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd CSSCSS ii ASP NET S C t lASP NET S C t l SS d ng d ng CSS CSS v i v i ASP . NET S erver C on t ro lASP . NET S erver C on t ro l  Cách 3: Thit lp giá tr thuc tính CssClass ca Cách 3: Thit lp giá tr thuc tính CssClass ca đitng control (embeded, external css) • Ví d : . myStyle { Ví d : . myStyle { font-style: bold; text-decoration: line-through; l } co l or: green; } • Code behind: LabelMsg.Style.Clear (); LabelMsg.Style.Clear ( ); LabelMsg.CssClass = “myStyle”; © 2009 Khoa CNTT - HKHTN <span id="Label1" class="myStyle">Hello World</span> 14 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website NidNid Ni d ung Ni d ung  Master Page Master Page  S dng CSS vi ASP.NET Server Control  Skin và Theme  Site Navigation © 2009 Khoa CNTT - HKHTN 15 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website Th & SkiTh & Ski Th eme & Ski n Th eme & Ski n © 2009 Khoa CNTT - HKHTN 16 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website ThTh Th eme Th eme  1 Theme có th xem là 1 giao din ca trang web 1 Theme có th xem là 1 giao din ca trang web  Ttc theme phi đt trong th mc App_Themes    M  i theme đnh ngha nhi  u skin file, css file, hình nh, © 2009 Khoa CNTT - HKHTN 17 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website Ski FilSki Fil Ski n Fil e Ski n Fil e  Skin file đ  nh d  n g hinth  các as p .net server control   g  p – Ví d: nh nghastyle ápdng đivimi Label và TextBox trong trang web < a sp:Label runat="server" ForeColor="Blue" Font-Size="10pt“ Font-Name="Verdana" /> < asp : TextBox runat ="server" < asp : TextBox runat ="server" BackColor="#FFFFC0" ForeColor="Green“ /> Lu ý : Skin file ch cha các đ  nh n g hast y le cho control © 2009 Khoa CNTT - HKHTN ý  g y Và KHÔNG CÓ thuctínhID 18 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website Ski IDSki ID Ski n IDSki n ID  SkinID dùng thit lp nhiu đnh dng khác nhau SkinID dùng thit lp nhiu đnh dng khác nhau – Ví d: • Skin File: Skin File: <asp:TextBox runat="server" BackColor="#FF0000" ForeColor="White" SkinID="skin1" /> • S dng trong WebForm < asp : TextBox ID = " TextBoxUsername " runat = " server “ < asp : TextBox ID = TextBoxUsername runat = server SkinID="skin1" /> © 2009 Khoa CNTT - HKHTN 19 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd ThTh SS d ng d ng Th eme Th eme  S dng Theme trong 1Webform S dng Theme trong 1 Web form – <%@ Page Theme="Theme1“  S dng Theme trong mi Web form Trong file web.config, b sung: <system.web> … <pages theme=“Theme1" /> … </system.web> © 2009 Khoa CNTT - HKHTN 20 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website LL tì htì h ThTh điđi ThTh L p L p t r ì n ht r ì n h Th ay Th ay điđi Th eme Th eme  Gán theme mi cho Page.Theme trong hàm x lý s kin Gán theme mi cho Page.Theme trong hàm x lý s kin Page_PreInit protected void Page_PreInit(object sender, EventArgs e) { { Page.Theme = “Theme2”; } © 2009 Khoa CNTT - HKHTN 21 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website NidNid Ni d ung Ni d ung  Master Page Master Page  S dng CSS vi ASP.NET Server Control  Skin và Theme  Site Navigation © 2009 Khoa CNTT - HKHTN 22 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website Sit N i tiSit N i ti Sit e N av i ga ti on Sit e N av i ga ti on  XML Site Map XML Site Map  SiteMapDataSource  SiteMapPath Control  Menu Control  TreeView Control © 2009 Khoa CNTT - HKHTN 23 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website CC tútú bitbit C u C u t r ú c t r ú cwe b s it ewe b s it e © 2009 Khoa CNTT - HKHTN 24 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website XML Sit MXML Sit M XML Sit e M ap XML Sit e M ap  nh ngha cu trúc website trong file Web.sitemap nh ngha cu trúc website trong file Web.sitemap <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode url=“Home.aspx" title="Home" description="HomePage" > <siteMapNode url=“Product.aspx" title=“Product" > <siteMapNode url = “Manufactory.aspx" title=“Manufactory" / > <siteMapNode url=“Category.aspx" title=“Category“ > … / id < / s i teMapNo d e> </siteMapNode> <siteMapNode url=“Search.aspx" title=“Search" /> < it M N d l “H l " titl “H l " > < s it e M ap N o d eur l =“H e l p.aspx " titl e= “H e l p " > … </siteMapNode> </ siteMapNode > © 2009 Khoa CNTT - HKHTN 25 </ siteMapNode > </siteMap> LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd XML Sit MXML Sit M SS d ng d ng XML Sit e M ap XML Sit e M ap  To SiteMapDataSource To SiteMapDataSource <asp:SiteMapDataSource ID="SiteSource" runat="server" /> Web.Sitemap © 2009 Khoa CNTT - HKHTN 26 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website CC hì hhì h Sit MSit M FilFil C u C u hì n hhì n h Sit e M ap Sit e M ap Fil e Fil e  Cu hình thay đi file sitemap trong Web.Config Cu hình thay đi file sitemap trong Web.Config <configuration> <system.web> <siteMap defaultProvider=“XmlSiteMapProvider" enabled="true"> <providers> <add name=“ SpecialSiteMapProvider" type= " System Web XmlSiteMapProvider " type= System . Web . XmlSiteMapProvider siteMapFile="~/Special.Sitemap"/> <add name=“ XmlSiteMapProvider" type="System.Web.XmlSiteMapProvider" siteMapFile="~/web.Sitemap"/> </providers> </siteMap> </system web> </system . web> </configuration> © 2009 Khoa CNTT - HKHTN 27 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website Sit M P thSit M P th CtlCtl Sit e M ap P a thSit e M ap P a th C on t ro lC on t ro l  Hin th đng dn truy cp t root node ( trang ch ) đn Hin th đng dn truy cp t root node ( trang ch ) đn node hinti (breadcrumb)  Mi node phân cách nhau bi PathSeperator Mi node phân cách nhau bi PathSeperator © 2009 Khoa CNTT - HKHTN 28 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website MCtlMCtl M enu C on t ro lM enu C on t ro l  Hin th cu trúc website di dng Menu Hin th cu trúc website di dng Menu <asp:Menu ID="MenuMain" runat="server“ DataSourceID="SiteSource“> </asp:Menu> Orientation =“ Vertical " Orientation Vertical StaticDisplayLevels="2" StaticSubMenuIndent="0px" Orientation="Horizontal" StaticDisplayLevels="2" St ti S bM I d t " 10 © 2009 Khoa CNTT - HKHTN 29 St a ti c S u bM enu I n d en t =" 10 px LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website TViTVi CtlCtl T ree Vi ew T ree Vi ew C on t ro lC on t ro l  Hin th cu trúc website di dng TreeView Hin th cu trúc website di dng TreeView <asp:TreeView ID="TreeViewMain" runat="server" DataSourceID="SiteSource”> </asp:TreeView> ImageSet=“Arrows" ImageSet="WindowsHelp"ImageSet=“BulletedList6" © 2009 Khoa CNTT - HKHTN 30 Lp trình và Thitk Web 2 – Bài 5: CuhìnhGiaodin Website TT ktkt T ng T ng ktkt  Master Page Master Page – Master Page, Content Page, PlaceHolderControl Thay đi / Truy xut Master Page t Content Page – Thay đi / Truy xut Master Page t Content Page  S dng CSS vi ASP.NET Server Control – Inline CSS – Embedded, external CSS © 2009 Khoa CNTT - HKHTN 31 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website TT ktkt (( tttt )) T ng T ng ktkt (( tttt ))  Skin và Theme Skin và Theme – Theme Skin File SkinID – Skin File , SkinID  Site Navigation – XML Site Ma p p – SiteMapDataSource – SiteMapPath Control SiteMapPath Control – Menu Control Tree View Control © 2009 Khoa CNTT - HKHTN – Tree View Control 32 . Lp trình và Thit k Web 2 Bà i 5 Bà i 5 CuCu hìnhhình GiaoGiao dindin WebsiteWebsite CuCu hìnhhình GiaoGiao dindin WebsiteWebsite Ths Trn Th Bích Hnh Ths . Trn Th Bích Hnh Khoa. style="display:inline-block; lRd co l or: R e d ; background-color:#FFFF80; border-color:Lime; border-st y le:Dashed ; y ; font-weight:bold; font-style:italic; text-decoration:underline;"> Hll. s tyle="font-style:italic; text-decoration:underline; color:Red;“> Hll W ld © 2009 Khoa CNTT - HKHTN H e ll o W or ld </span> 13 LptrìnhvàThitk Web 2 – Bài 5: CuhìnhGiaodin Website SS dd CSSCSS ii ASP