Embed Size (px)
Citation preview
Managing Look, Feel, and Layout with Visual Studio 2005 and ASP.NET 2.0
Managing Look, Feel, and Layout with Visual Studio 2005 and ASP.NET 2.0
AgendaAgenda
Master PagesMaster Pages
Master Page BasicsMaster Page Basics
<%@ Master %>
<asp:ContentPlaceHolder ID="Main" RunAt="server" />
<%@ Master %>
<asp:ContentPlaceHolder ID="Main" RunAt="server" />
<%@ Page MasterPage- File="Site.master" %>
<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
</asp:Content>
<%@ Page MasterPage- File="Site.master" %>
<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
</asp:Content>
Defining a Master PageDefining a Master Page<%@ Master %>
<html> <body> <!-- Banner shown on all pages that use this master --> <table width="100%"> <tr> <td bgcolor="darkblue" align="center"> <span style="font-size: 36pt; color: white">ACME Inc.</span> </td> </tr> </table>
<!-- Placeholder for content below banner --> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> </body></html>
Applying a Master PageApplying a Master Page<%@ Page MasterPageFile="~/Site.master" %>
<asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the place holder "Main" defined in the master page</asp:Content>
Applying a Master Page to a SiteApplying a Master Page to a Site<configuration> <system.web> <pages masterPageFile="~/Site.master" /> </system.web></configuration>
Applying a Master Page ProgrammaticallyApplying a Master Page Programmaticallyvoid Page_PreInit (Object sender, EventArgs e){ Page.MasterPageFile = "~/Site.master";}
Default ContentDefault Content
<%@ Master %> ...<asp:ContentPlaceHolder ID="Main" RunAt="server"> This is default content that will appear in the absence of a matching Content control in a content page<asp:ContentPlaceHolder>
The Page.Master PropertyThe Page.Master Property
Accessing a Control in the Master Page (Weak Typing)Accessing a Control in the Master Page (Weak Typing)
((Label) Master.FindControl ("Title")).Text = "Orders";
<asp:Label ID="Title" RunAt="server" />
Accessing a Control in the Master Page (Strong Typing)Accessing a Control in the Master Page (Strong Typing)
Master.TitleText = "Orders";
<asp:Label ID="Title" RunAt="server" /> . . .<script language="C#" runat="server">public string TitleText{ get { return Title.Text; } set { Title.Text = value; }}</script>
Nesting Master PagesNesting Master Pages
<!-- Orders.Master --><%@ Master MasterPageFile="~/Site.Master" %>
<asp:Content ContentPlaceHolderID="..." RunAt="server"> <asp:ContentPlaceHolder ID="..." RunAt="server"> ... </asp:ContentPlaceHolder><asp:Content>
Master PagesMaster Pages
Themes and SkinsThemes and Skins
Applying a Theme to a PageApplying a Theme to a Page<%@ Page Theme="BasicBlue">
Applying a Theme to a SiteApplying a Theme to a Site<configuration> <system.web> <pages theme="BasicBlue" /> </system.web></configuration>
Applying a Theme ProgrammaticallyApplying a Theme Programmaticallyvoid Page_PreInit (Object sender, EventArgs e){ Page.Theme = "BasicBlue";}
Folder structureFolder structure
App_Themes
Shocking-Pink
Autumn-Leaves
SKIN
SKIN
SKIN
SKIN
vroot
Defining SkinsDefining Skins<!-- Default look for DropDownList controls --><asp:DropDownList runat="server" BackColor="hotpink" ForeColor="white" />
<!-- Default look for DataGrid controls --><asp:DataGrid runat="server" BackColor="#CCCCCC" BorderWidth="2pt" BorderStyle="Solid" BorderColor="#CCCCCC" GridLines="Vertical" HorizontalAlign="Left"> <HeaderStyle ForeColor="white" BackColor="hotpink" /> <ItemStyle ForeColor="black" BackColor="white" /> <AlternatingItemStyle BackColor="pink" ForeColor="black" /></asp:DataGrid>
...
Named SkinsNamed Skins
Defining Named SkinsDefining Named Skins<!-- Default look for DropDownList controls --><asp:DropDownList runat="server" BackColor="blue" ForeColor="white" SkinID="Blue" />
<!-- Default look for DataGrid conotrols --><asp:DataGrid runat="server" BackColor="#CCCCCC" BorderWidth="2pt" BorderStyle="Solid" BorderColor="#CCCCCC" GridLines="Vertical" HorizontalAlign="Left" SkinID="Blue"> <HeaderStyle ForeColor="white" BackColor="blue" /> <ItemStyle ForeColor="black" BackColor="white" /> <AlternatingItemStyle BackColor="lightblue" ForeColor="black" /></asp:DataGrid>
...
Using a Named SkinUsing a Named Skin<asp:DropDownList ID="Countries" SkinID="Blue" RunAt="server" />
The EnableTheming PropertyThe EnableTheming Property
<asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" />
Themes and SkinsThemes and Skins
New ControlsNew Controls
Category Controls
Data controls GridView and DetailsView
Data source controls SqlDataSource, ObjectDataSource, XmlDataSource, etc.
Login controls Login, CreateUserWizard, PasswordRecovery, etc.
Navigation controls Menu, TreeView, and SiteMapPath
Web Parts controls WebPartManager, WebPartZone, etc.
UI controls FileUpload, BulletedList, MultiView, Wizard, etc.
UI ControlsUI ControlsName Description
BulletedList Renders bulleted lists of items
FileUpload UI for uploading files to Web servers
HiddenField Renders hidden fields
ImageMap Renders HTML image maps
MultiView Defines multiple views displayed one at a time
View Defines views in MultiView controls
Wizard Guides users through stepwise procedures
Substitution Designates non-cached regions of cached pages
The ImageMap ControlThe ImageMap Control<asp:ImageMap ImageUrl="Shapes.jpg" OnClick="OnUpdate" RunAt="server"> <asp:CircleHotSpot X="50" Y="50" Radius="50" PostBackValue="Circle" AlternateText="Circle" HotSpotMode="Postback" RunAt="server" /> <asp:RectangleHotSpot Left="0" Top="100" Right="100" Bottom="200" PostBackValue="Rectangle" AlternateText="Rectangle" HotSpotMode="Postback" RunAt="server" /> <asp:PolygonHotSpot Coordinates="50, 200, 0, 300, 100, 300" PostBackValue="Triangle" AlternateText="Triangle" HotSpotMode="Postback" RunAt="server" /></asp:ImageMap> . . .<script language="C#" runat="server">void UpdateLabel (Object sender, ImageMapEventArgs e){ ...}</script>
The FileUpload ControlThe FileUpload Control<asp:FileUpload ID="UploadControl" RunAt="server" /><asp:Button Text="Upload" OnClick="OnUpload" RunAt="server" /> . . .<script language="C#" runat="server">void OnUpload (Object sender, EventArgs e){ if (FileUploadControl.HasFile) { string name = UploadControl.PostedFile.FileName; // Path name Stream bits = UploadControl.PostedFile.InputStream; // Contents ... // Use the SaveAs method to persist to a local file FileInfo file = new FileInfo (UploadControl.PostedFile.FileName); UploadControl.SaveAs (Server.MapPath ("~/Uploads/" + file.Name); }}</script>
The MultiView ControlThe MultiView Control<asp:MultiView ID="Main" ActiveViewIndex="0" RunAt="server"> <asp:View RunAt="server"> ... </asp:View> <asp:View RunAt="server"> ... </asp:View> <asp:View RunAt="server"> ... </asp:View></asp:MultiView> . . .void OnSwitchView (Object sender, EventArgs e){ Main.ActiveViewIndex = 1; // Switch views}
Declarative View SwitchingDeclarative View Switching<asp:MultiView ID="Main" ActiveViewIndex="0" RunAt="server"> <asp:View RunAt="server"> ... <asp:Button CommandName="SwitchViewByIndex" CommandArgument="1" Text="Switch to view 2" RunAt="server" /> </asp:View> <asp:View RunAt="server"> ... <asp:Button CommandName="SwitchViewByIndex" CommandArgument="0" Text="Switch to view 1" RunAt="server" /> </asp:View></asp:MultiView>
ASP.NET 2.0 ControlsASP.NET 2.0 Controls
![02 - [ASP.NET Core] ASP.NET Core MVC](https://img.dokumen.tips/doc/110x75/58ab940f1a28abe3188b5603/02-aspnet-core-aspnet-core-mvc.jpg)
