Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download 2007113112916aj - มหาวิทยาลัยเทคโนโลยีมหานคร
Document related concepts
Transcript
ITEC5620 - Advance Web Programming Advance Web Programming อ.ชไลเวท พิพฒ ั พรรณวงศ์ Chalaivate Pipatpannawong Computer Instructor Microsoft Certificate Professional Web : www.9Expert.co.th ; Thaiwebdev.com E-Mail: [email protected] ปริญญาโท สาขาวิชา เทคโนโลยีสารสนเทศ What's New with Visual Studio 2005 and ASP.NET 2.0 New Features at a Glance Services and APIs Page Framework Controls ITEC5620 - Advance Web Programming:: Data Controls Login Controls Web Parts Other New Controls Master Pages Themes and Skins Mobility and Localization Compilation Membership Role Management Profiles Configuration Site Maps Health Monitoring Other Services 3 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี What's New in Data Access Data ITEC5620 - Advance Web Programming:: source controls Declarative 2-way data binding Data controls GridView - Like the DataGrid, only better DetailsView - Companion to GridView SQL cache dependencies Key cached items to database entities Simplified data binding expressions 4 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ASP.NET 1.x Data Binding ITEC5620 - Advance Web Programming:: <asp:DataGrid ID="MyDataGrid" RunAt="server" /> ... <script language="C#" runat="server"> void Page_Load (Object sender, EventArgs e) { SqlConnection connection = new SqlConnection ("server=localhost;database=pubs;integrated security=true"); try { connection.Open (); SqlCommand command = new SqlCommand ("select title_id, titles, price from titles"); MyDataGrid.DataSource = command.ExecuteReader (); MyDataGrid.DataBind (); } finally { connection.Close (); } } </script> 5 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ASP.NET 2.0 Data Binding ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="server=localhost; database=pubs;integrated security=true" SelectCommand="select title_id, title, price from titles"/> <asp:DataGrid DataSourceID="Titles" RunAt="server" /> 6 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Declarative Data Binding Chalaivate Pipatpannawong Chalaivate.COM What's New for UIs ITEC5620 - Advance Web Programming:: Master pages "Visual inheritance" for Web pages Applied declaratively or programmatically Themes and skins Theme controls, pages, and entire sites Applied declaratively or programmatically New controls (more than 50 in all) Menus, TreeViews, Wizards, and more 8 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Theming a Page ITEC5620 - Advance Web Programming:: <%@ Page Theme="BasicBlue"> Before After 9 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] What's New in Security ITEC5620 - Advance Web Programming:: Membership service Service for managing users and credentials Provider-based for flexible data storage Login controls Controls for logging in, creating new users, recovering lost passwords, and more Role Management service Combine forms authentication and role-based authorization without writing code! 11 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Validating Logins ITEC5620 - Advance Web Programming:: if (Membership.ValidateUser (UserName.Text, Password.Text)) RedirectFromLoginPage (UserName.Text, RememberMe.Checked); 12 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The Login Control ITEC5620 - Advance Web Programming:: <html> <body> <form runat="server"> <asp:Login RunAt="server" /> </form> </body> </html> 13 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Membership and Logins Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: Profiles Store per-user data persistently Strongly typed access (unlike session state) On-demand lookup (unlike session state) Long-lived (unlike session state) Supports authenticated and anonymous users Accessed through dynamically compiled HttpProfileBase derivatives (HttpProfile) Provider-based for flexible data storage 15 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Defining a Profile ITEC5620 - Advance Web Programming:: <configuration> <system.web> <profile> <properties> <add name="ScreenName" /> <add name="Posts" type="System.Int32" defaultValue="0" /> <add name="LastPost" type="System.DateTime" /> </properties> </profile> </system.web> </configuration> 16 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Using a Profile ITEC5620 - Advance Web Programming:: // Increment the current user's post count Profile.Posts = Profile.Posts + 1; // Update the current user's last post date Profile.LastPost = DateTime.Now; 17 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Persisting Data with Profiles Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: Site Navigation Navigation UIs are tedious to implement Especially New if they rely on client-side script controls simplify site navigation TreeView and Menu - Navigation UI SiteMapDataSource - XML site maps SiteMapPath - "Bread crumb" control Public API provides foundation for controls Provider-based for flexibility 19 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Data-Driven Site Navigation Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] Providers New model for storing and managing state Makes Used ITEC5620 - Advance Web Programming:: storage adaptable to different media by many key ASP.NET services Membership service Role Management service and more Built-in providers make ASP.NET state storage very flexible Custom providers make it infinitely flexible 21 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The Provider Model Controls Login LoginStatus ITEC5620 - Advance Web Programming:: Other Login Controls LoginView Membership API Membership MembershipUser Membership Providers AccessMembershipProvider SqlMembershipProvider Membership Data Access SQL Server Other Membership Providers Other Data Stores 22 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Configuration Administrative ITEC5620 - Advance Web Programming:: tools ASP.NET MMC snap-in Web Site Administration Tool (Webadmin.axd) Configuration API Read/write access to configuration settings Simplified custom configuration sections Instrumentation Perf counters, health monitoring, and more 23 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Web Site Administration Tool Chalaivate Pipatpannawong Chalaivate.COM ITEC5620 - Advance Web Programming:: Web Parts Framework for building portal-style apps Patterned after SharePoint Portal Server System.Web.UI.WebControls.WebParts Rich UIs with minimal code Edit page layout using drag-and-drop Edit appearance and behavior and more Seamless personalization Intercommunication ("connections") 25 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Web Parts Chalaivate Pipatpannawong Chalaivate.COM What's New in Mobility ITEC5620 - Advance Web Programming:: Unified Control Architecture Adapters enable pages and controls to render markup for different device types WML adapters provided by third parties Device filters <asp:Label Text="Hello, world" RunAt="server" Nokia:Text="Hello, Nokia" Up:Text="Hello, OpenWave" /> Nokia browsers OpenWave browsers 27 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: What's New in Localization Auto-culture handling Declarative mapping of Accept-Language headers to relevant thread properties Simplified resource handling Declarative mapping of control properties to resources using <%$ … %> expressions Strongly typed programmatic resource loading <asp:localize runat="server"> and more 28 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: What's New in Compilation Autocompile anything CS files, VB files, RESX files, and so on Simply drop files into special directories Extensible with custom build providers New code-behind model (code-behind 2.0) Fixes fragilities in version 1 Relies on partial class support in compilers Precompile and deploy without source 29 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Dynamic Compilation ITEC5620 - Advance Web Programming:: vroot CS VB Code WSDL XSD Files autocompiled on first access RESX Resources RESOURCE 30 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Build Providers ITEC5620 - Advance Web Programming:: Components that autocompile files <buildProviders> config section maps file types and directories to build providers <compilation ... > <buildProviders> <add extension=".resx" appliesTo="Code,Resources" type="System.Web.Compilation.ResXBuildProvider"/> <add extension=".wsdl" appliesTo="Code" type="System.Web.Compilation.WsdlBuildProvider"/> <add extension=".xsd" appliesTo="Code" type="System.Web.Compilation.XsdBuildProvider"/> ... </buildProviders> </compilation> 31 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Code-Behind 2.0 ITEC5620 - Advance Web Programming:: Hello.aspx <%@ Page CompileWith="Hello.aspx.cs" ClassName="MyPage_aspx" %> <html> <body> <form runat="server"> <asp:TextBox ID="Input" RunAt="server" /> <asp:Button Text="Test" OnClick="OnTest" RunAt="server" /> <asp:Label ID="Output" RunAt="server" /> </form> </body> </html> 32 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Code-Behind 2.0, Cont. ITEC5620 - Advance Web Programming:: Hello.aspx.cs using System; partial class MyPage_aspx { void OnTest (Object sender, EventArgs e) { Output.Text = "Hello, " + Input.Text; } } 33 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Precompilation Precompile.axd precompiles sites in place to avoid first-access delays 34 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Deploying without Source Aspnet_compiler.exe precompiles sites and deploys without source code 35 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Dynamic Compilation Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] $ Expressions ITEC5620 - Advance Web Programming:: Declarative mechanism for loading resources, connection strings, and more ASPX <asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="<%$ ConnectionStrings:Pubs %>" SelectCommand="select title_id, title, price from titles" /> Web.config <configuration> <connectionStrings> <add name="Pubs" connectionString="server=localhost;database=pubs;..." /> </connectionStrings> </configuration> 37 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Expression Builders ITEC5620 - Advance Web Programming:: Components that evaluate $ expressions <expressionBuilders> config section maps prefixes to expression builders <compilation ... > <expressionBuilders> <add expressionPrefix="Resources" type="System.Web.Compilation.ResourceExpressionBuilder" /> <add expressionPrefix="ConnectionStrings" type="System.Web.Compilation.ConnectionStringsExpressionBuilder" /> <add expressionPrefix="AppSettings" type="System.Web.Compilation.AppSettingsExpressionBuilder" /> </expressionBuilders> </compilation> 38 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Custom Expression Builders Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] Cross-Page Posting ITEC5620 - Advance Web Programming:: Pages can now post back to other pages Relevant properties: control.PostBackUrl - Identifies postback target Page.PreviousPage - Returns reference to page that originated a cross-page postback PreviousPage.IsCrossPagePostBack - Reveals whether a cross- page postback occurred @ PreviousPageType directive provides strongly typed access to previous page 40 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Posting Back to Another Page <html> <body> <form runat="server"> <asp:TextBox ID="Input" RunAt="server" /> <asp:Button Text="Test" PostBackUrl= "PageTwo.aspx" RunAt="server" /> </form> </body> </html> 41 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Referencing a Control on the Previous Page (Weak Typing) ITEC5620 - Advance Web Programming:: <html> <body> <asp:Label ID="Output" RunAt="server" /> </body> </html> <script language="C#" runat="server"> void Page_Load (Object sender, EventArgs e) { if (PreviousPage != null && PreviousPage.IsCrossPagePostBack) { TextBox input = (TextBox) PreviousPage.FindControl ("Input"); Output.Text = "Hello, " + input.Text; } } </script> 42 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Referencing a Control on the Previous Page (Strong Typing) ITEC5620 - Advance Web Programming:: <%@ PreviousPageType VirtualPath="~/PageOne.aspx" %> <html> <body> <asp:Label ID="Output" RunAt="server" /> </body> </html> <script language="C#" runat="server"> void Page_Load (Object sender, EventArgs e) { if (PreviousPage != null && PreviousPage.IsCrossPagePostBack) Output.Text = "Hello, " + PreviousPage.InputBox.Text; } </script> Public property wrapping TextBox 43 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Cross-Page Postbacks Chalaivate Pipatpannawong Chalaivate.COM ITEC5620 - Advance Web Programming:: Validation Groups Validation controls can now be grouped using new ValidationGroup property Implemented by validation controls Also implemented by Button, LinkButton, and ImageButton controls Allows page to post back when validators in target group are satisfied Fixes deficiency in ASP.NET 1.x 45 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Validation Groups Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] Client Callbacks "Lightweight" ITEC5620 - Advance Web Programming:: postbacks Client-side callback manager transmits asynchronous XML- HTTP requests to server Server receives and processes the request, but does not rerender the page Callback manager receives the response and notifies the client via registered callback Requires Great Internet Explorer 5.0 or higher way to improve UI responsiveness 47 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี How Client Callbacks Work ITEC5620 - Advance Web Programming:: Client Client 1 Client initiates callback by calling function returned by GetCallbackEventReference Callback Manager Server 2 Page Callback manager launches async XML-HTTP call to server 3 Page's RaiseCallbackEvent method is called 5 4 Client is notified that the call completed and handed the result Callback manager is notified that the call completed 48 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Client Callbacks Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] Who's Got the Focus? ITEC5620 - Advance Web Programming:: In ASP.NET 1.x, client-side script was needed to assign focus to a control In ASP.NET 2.0, use Page.SetFocus <asp:TextBox ID="UserName" RunAt="server" /> . . . <script language="C#" runat="server"> void Page_Load (Object sender, EventArgs e) { SetFocus ("UserName"); } </script> 50 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Panel.DefaultButton ITEC5620 - Advance Web Programming:: Designates button to be "clicked" when Enter is pressed with focus in panel Work-around for the fact that ASP.NET limits pages to one runat="server" <form> each <asp:Panel DefaultButton="Button1" RunAt="server"> ... <asp:Button ID="Button1" ... /> </asp:Panel> <asp:Panel DefaultButton="Button2" RunAt="server"> ... <asp:Button ID="Button2" ... /> </asp:Panel> 51 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี URL Mapping ITEC5620 - Advance Web Programming:: Maps virtual URLs to physical URLs Great for declaratively transforming physical pages into multiple logical pages <urlMappings enabled="true"> <add url="~/Home.aspx"mappedUrl="~/default.aspx?tabindex=0"/> <add url="~/Forums.aspx"mappedUrl="~/default.aspx?tabindex=1"/> <add url="~/Faq.aspx"mappedUrl="~/default.aspx?tabindex=2"/> </urlMappings> Virtual URL Physical URL 52 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Machine.config ITEC5620 - Advance Web Programming:: Default settings "baked in" to system Reduces size of Machine.config Improves application startup performance New Machine.config-related files: Machine.config.defaults - Documents default settings baked into the run-time Machine.config.comments - Documents syntax of config elements, many of which are new Same directory as Machine.config 53 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Using Visual Studio 2005 to Build Data-Driven ASP.NET 2.0 Applications Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] 54 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Agenda ITEC5620 - Advance Web Programming:: Simplified data binding Data source controls Data controls GridView and DetailsView controls Editing with GridView and DetailsView Caching SQL cache dependencies Cache configuration 55 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Simplified Data Binding ITEC5620 - Advance Web Programming:: Data binding expressions are now simpler and support hierarchical (XML) data binding <!-- ASP.NET 1.x data binding expression --> <%# DataBinder.Eval (Container.DataItem, "Price") %> <!-- Equivalent ASP.NET 2.0 data binding expression --> <%# Eval ("Price") %> <!-- XML data binding --> <%# XPath ("Price") %> 56 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี DataSource Controls Declarative ITEC5620 - Advance Web Programming:: (no-code) data binding Name Description SqlDataSource Connects data-binding controls to SQL databases AccessDataSource Connects data-binding controls to Access databases XmlDataSource Connects data-binding controls to XML data ObjectDataSource Connects data-binding controls to data components SiteMapDataSource Connects site navigation controls to site map data 57 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี SqlDataSource Declarative ITEC5620 - Advance Web Programming:: data binding to SQL databases Any database served by a managed provider Two-way data binding SelectCommand defines query semantics InsertCommand, UpdateCommand, and DeleteCommand define update semantics Optional caching of query results Parameterized operation 58 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Using SqlDataSource ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Titles" RunAt="server“ ConnectionString="server=localhost; database=pubs;integrated security=true" SelectCommand="select title_id, title, price from titles" /> <asp:DataGrid DataSourceID="Titles" RunAt="server" /> 59 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Key SqlDataSource Properties ITEC5620 - Advance Web Programming:: Name Description ConnectionString Connection string used to connect to data source SelectCommand Command used to perform queries InsertCommand Command used to perform inserts UpdateCommand Command used to perform updates DeleteCommand Command used to perform deletes DataSourceMode Specifies whether DataSet or DataReader is used (default = DataSet) ProviderName Specifies provider (default = SQL Server .NET provider) 60 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Using an Oracle Database ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="..." SelectCommand="select title_id, title, price from titles" ProviderName="System.Data.OracleClient" /> 61 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี SqlDataSource and Caching ITEC5620 - Advance Web Programming:: SqlDataSource supports declarative caching of results through these properties: Name Description EnableCaching Specifies whether caching is enabled (default = false) CacheDuration Length of time in seconds results should be cached CacheExpirationPolicy Specifies whether cache duration is sliding or absolute CacheKeyDependency Creates dependency on specified cache key SqlCacheDependency Creates dependency on specified database entity 62 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Caching Query Results ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Countries" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="select distinct country from customers order by country" EnableCaching="true" CacheDuration="60" /> <asp:DropDownList ID="MyDropDownList" DataSourceID="Countries" DataTextField="country" AutoPostBack="true" RunAt="server" /> 63 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Parameterized Commands XxxParameters properties permit database commands to be parameterized Example: Get value for WHERE clause in SelectCommand from query string parameter or item selected in drop-down list Example: Get value for WHERE clause in DeleteCommand from GridView XxxParameter types specify source of parameter values 64 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: XxxParameters Properties Name Description SelectParameters Specifies parameters for SelectCommand InsertParameters Specifies parameters for InsertCommand UpdateParameters Specifies parameters for UpdateCommand DeleteParameters Specifies parameters for DeleteCommand FilterParameters Specifies parameters for FilterExpression 65 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี XxxParameter Types Name ITEC5620 - Advance Web Programming:: Description Parameter Binds a replaceable parameter to a data field ControlParameter Binds a replaceable parameter to a control property CookieParameter Binds a replaceable parameter to a cookie value FormParameter Binds a replaceable parameter to a form field QueryStringParameter Binds a replaceable parameter to a query string parameter SessionParameter Binds a replaceable parameter to a session variable 66 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Using ControlParameter ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Countries" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="select distinct country from customers order by country" /> <asp:SqlDataSource ID="Customers" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="select * from customers where country=@Country"> <SelectParameters> <asp:ControlParameter Name="Country" ControlID="MyDropDownList" PropertyName="SelectedValue" /> </SelectParameters> </asp:SqlDataSource> <asp:DropDownList ID="MyDropDownList" DataSourceID="Countries" DataTextField="country" AutoPostBack="true" RunAt="server" /> <asp:DataGrid DataSourceID="Customers" RunAt="server" /> 67 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Calling Stored Procedures ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Countries" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="proc_GetCountries" /> <asp:SqlDataSource ID="Customers" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="proc_GetCustomers"> <SelectParameters> <asp:ControlParameter Name="Country" ControlID="MyDropDownList" PropertyName="SelectedValue" /> </SelectParameters> </asp:SqlDataSource> <asp:DropDownList ID="MyDropDownList" DataSourceID="Countries" DataTextField="country" AutoPostBack="true" RunAt="server" /> <asp:DataGrid DataSourceID="Customers" RunAt="server" /> CREATE PROCEDURE proc_GetCustomers @Country nvarchar (32) AS SELECT * FROM Customers WHERE Country = @Country GO CREATE PROCEDURE proc_GetCountries AS SELECT DISTINCT Country FROM Customers ORDER BY Country GO 68 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี SqlDataSource Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] XmlDataSource ITEC5620 - Advance Web Programming:: Declarative data binding to XML data Supports caching and XSL transformations One-way data binding only; no updating <asp:XmlDataSource ID="Rates" DataFile="Rates.xml" RunAt="server" /> <asp:TreeView ID="MyTreeView" DataSourceID="Rates" RunAt="server" /> 70 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Key XmlDataSource Properties Name Description DataFile Path to file containing XML data TransformFile Path to file containing XSL style sheet EnableCaching Specifies whether caching is enabled (default = false) CacheDuration Length of time in seconds data should be cached CacheExpirationPolicy Specifies whether cache duration is sliding or absolute CacheKeyDependency Creates dependency on specified cache key XPath XPath expression used to filter data 71 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ObjectDataSource Declarative ITEC5620 - Advance Web Programming:: binding to data components Leverage middle-tier data access components Keep data access code separate from UI layer Two-way data binding SelectMethod, InsertMethod, UpdateMethod, and DeleteMethod Optional caching of query results Parameterized operation 72 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Key ODS Properties Name ITEC5620 - Advance Web Programming:: Description TypeName Type name of data component SelectMethod Method called on data component to perform queries InsertMethod Method called on data component to perform inserts UpdateMethod Method called on data component to perform updates DeleteMethod Method called on data component to perform deletes EnableCaching Specifies whether caching is enabled (default = false) 73 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Key ODS Properties, Cont. ITEC5620 - Advance Web Programming:: Name Description CacheDuration Length of time in seconds data should be cached SqlCacheDependency Creates dependency on specified database entity SelectParameters Specifies parameters for SelectMethod InsertParameters Specifies parameters for InsertMethod UpdateParameters Specifies parameters for UpdateMethod DeleteParameters Specifies parameters for DeleteMethod 74 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Initialization and Clean-Up ITEC5620 - Advance Web Programming:: ObjectDataSource.SelectMethod et al can identify static methods or instance methods If instance methods are used: ODS creates new class instance on each call Class must have public default constructor Use ObjectCreated and ObjectDisposing events to perform specialized initialization or clean-up work on data components 75 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ObjectDataSource Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] The GridView Control ITEC5620 - Advance Web Programming:: Enhanced DataGrid control Renders sets of records as HTML tables Built-in sorting, paging, selecting, updating, and deleting support Supports rich assortment of field types, including ImageFields and CheckBoxFields Declared in <Columns> element Highly customizable UI 77 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี GridView Example ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Employees" RunAt="server“ ConnectionString="server=localhost;database=northwind;...“ SelectCommand="select lastname, firstname, title from employees" /> <asp:GridView DataSourceID="Employees" Width="100%" RunAt="server" /> 78 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Output ITEC5620 - Advance Web Programming:: 79 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี GridView Field Types Name ITEC5620 - Advance Web Programming:: Description BoundField Renders columns of text from fields in data source ButtonField Renders columns of buttons (push button, image, or link) CheckBoxField Renders Booleans as check boxes CommandField Renders controls for selecting and editing GridView data HyperLinkField Renders columns of hyperlinks ImageField Renders columns of images TemplateField Renders columns using HTML templates 80 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Specifying Field Types ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;...“ SelectCommand="select photo, lastname, firstname, t itle from employees" /> <asp:GridView DataSourceID="Employees" Width="100%“ RunAt="server" AutoGenerateColumns="false" > <Columns> <asp:ImageField HeaderText="" DataField="photo" /> <asp:TemplateField HeaderText="Name"> <ItemTemplate> <%# Eval ("firstname") + " " + Eval ("lastname") %> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="Title" DataField="title" /> </Columns> </asp:GridView> 81 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Output ITEC5620 - Advance Web Programming:: 82 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The DetailsView Control ITEC5620 - Advance Web Programming:: Renders individual records Pair with GridView for master-detail views Or use without GridView to display individual records Built-in Uses paging, inserting, updating, deleting same field types as GridView Declared in <Fields> element Highly customizable UI 83 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี DetailsView Example ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="select employeeid, photo, ... from employees" /> <asp:DetailsView DataSourceID="Employees" RunAt="server" AllowPaging="true" AutoGenerateRows="false" PagerSettings-Mode="NextPreviousFirstLast"> <Fields> <asp:ImageField HeaderText="" DataField="photo" /> <asp:BoundField HeaderText="Employee ID" DataField="employeeid" /> <asp:BoundField HeaderText="Date Hired" DataField="hiredate" /> <asp:TemplateField HeaderText="Name"> <ItemTemplate> <%# Eval ("firstname") + " " + Eval ("lastname") %> </ItemTemplate> </asp:TemplateField> <asp:BoundField HeaderText="Title" DataField="title" /> </Fields> </asp:DetailsView> 84 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Output ITEC5620 - Advance Web Programming:: 85 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Master-Detail Views Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: Inserting, Updating, and Deleting Data controls supply editing UIs AutoGenerateXxxButton properties Insert/EditRowStyle properties Data source controls supply editing logic Insert/Update/DeleteCommand properties Insert/Update/DeleteParameters properties Inserting/ed, Updating/ed, Deleting/ed events Visual Studio supplies the glue 87 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Editing with GridViews Update command ITEC5620 - Advance Web Programming:: Update parameters <asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;...“ SelectCommand="select employeeid, lastname, firstname, from employees“ UpdateCommand="update employees set lastname=@lastname, firstname= @firstname where employeeid=@original_employeeid"> <UpdateParameters> <asp:Parameter Name="EmployeeID" Type="Int32" /> <asp:Parameter Name="lastname" Type="String" /> <asp:Parameter Name="firstname" Type="String" /> </UpdateParameters> </asp:SqlDataSource> <asp:GridView DataSourceID="Employees" Width="100%" RunAt="server" DataKeyNames="EmployeeID" AutoGenerateEditButton="true" /> Primary key Edit buttons 88 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Conflict Detection ITEC5620 - Advance Web Programming:: First-in wins Update fails if data has changed Structure UpdateCommand accordingly Set ConflictDetection="CompareAllValues“ Last-in wins Update succeeds even if data has changed Structure UpdateCommand accordingly Set ConflictDetection="OverwriteChanges" 89 ปริญญาโท สาขาวิชา เทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร First-In-Wins Updates ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;..." SelectCommand="select employeeid, lastname, firstname, from employees“ UpdateCommand="update employees set lastname=@lastname, firstname = @firstname where employeeid=@original_employeeid and lastname = @original_lastname and firstname=@original_firstname" ConflictDetection="CompareAllValues"> <UpdateParameters> <asp:Parameter Name="EmployeeID" Type="Int32" /> <asp:Parameter Name="lastname" Type="String" /> <asp:Parameter Name="firstname" Type="String" /> </UpdateParameters> </asp:SqlDataSource> <asp:GridView DataSourceID="Employees" Width="100%" RunAt="server" DataKeyNames="EmployeeID" AutoGenerateEditButton="true" /> 90 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Error Detection Controls ITEC5620 - Advance Web Programming:: fire events after database updates GridView.RowUpdated DetailsView.ItemUpdated SqlDataSource.Updated, Event etc. handlers receive "status" objects Reveal whether database exception occurred Allow exceptions to be handled or rethrown Reveal how many rows were affected 91 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Handling Update Errors ITEC5620 - Advance Web Programming:: <asp:SqlDataSource ID="Employees" RunAt="server" ... UpdateCommand="..." OnUpdated="OnUpdateComplete"> ... </asp:SqlDataSource> ... void OnUpdateComplete (Object source, SqlDataDataSourceStatusEventsArgs e) { if (e.Exception != null) { // Exception thrown. Set e.ExceptionHandled to true to prevent // the SqlDataSource from throwing an exception, or leave it set // to false to allow SqlDataSource to rethrow the exception } else if (e.AffectedRows == 0) { // No exception was thrown, but no records were updated, either. // Might want to let the user know that the update failed } } 92 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Editing with GridViews and DetailsViews Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: SQL Cache Dependencies New cache dependency type Embodied in SqlCacheDependency class Configured through <sqlCacheDependency> configuration section Links cached items to database entities ASP.NET application cache ASP.NET output cache Compatible with SQL Server 7, 2000, 2005 94 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Preparing a Database ITEC5620 - Advance Web Programming:: Use Aspnet_regsql.exe or SqlCache-DependencyAdmin to prepare database* aspnet_regsql -S localhost -E -d Northwind -ed Server name Trusted connection Database name Enable database * Not necessary for SQL Server 2005 95 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Preparing a Table ITEC5620 - Advance Web Programming:: Use Aspnet_regsql.exe or SqlCache-DependencyAdmin to prepare table* aspnet_regsql -S localhost -E -d Northwind -t Products -et Server name Trusted connection Database name Table name Enable table * Not necessary for SQL Server 2005 96 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Preparing Web.config ITEC5620 - Advance Web Programming:: <configuration> <connectionStrings> <add name="Northwind“ connectionString="server=localhost;database= northwind;..." /> </connectionStrings> <system.web> <caching> <sqlCacheDependency enabled="true" pollTime="5000"> <databases> <add name="Northwind" connectionStringName= "Northwind" /> </databases> </sqlCacheDependency> </caching> <system.web> </configuration> 97 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Using SqlCacheDependency with the Application Cache Cache.Insert ("Products", products, new SqlCacheDependency ("Northwind", "Products"); Database name Table name 98 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Using SqlCacheDependency with the Output Cache <%@ OutputCache Duration="60" VaryByParam="None" SqlDependency="Northwind:Products" %> Database name Table name 99 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Using SqlCacheDependency with SqlDataSource <asp:SqlDataSource ID="Countries" RunAt="server" ConnectionString="server=localhost;database=northwind;...“ SelectCommand="select distinct country from customers order by country“ EnableCaching="true" CacheDuration="60000" SqlCacheDependency="Northwind:Customers" /> <asp:DropDownList ID="MyDropDownList" DataSourceID="Countries" DataTextField="country" AutoPostBack="true" RunAt="server" /> Database name Table name 100 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Cache Configuration ITEC5620 - Advance Web Programming:: <cache> Enable/disable application cache Enable/disable item expiration and more <outputCache>, <outputCacheSettings> Enable/disable output caching Enable/disable disk-based persistence Set maximum size per app and more <sqlCacheDependency> 101 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี SQL Cache Dependencies Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: 103 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Managing Look, Feel, and Layout with Visual Studio 2005 and ASP.NET 2.0 Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] ITEC5620 - Advance Web Programming:: Agenda Master pages Master pages and content pages Accessing controls defined in master pages Themes and skins Applying themes Global themes vs. local themes Theme and skin definitions New controls 105 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Master Pages ITEC5620 - Advance Web Programming:: Master Page Content Page 106 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Master Page Basics ITEC5620 - Advance Web Programming:: Masters define common content and placeholders (<asp:ContentPlaceHolder>) Content pages reference masters and fill placeholders with content (<asp:Content>) Site.master <%@ Master %> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> default.aspx http://.../default.aspx <%@ Page MasterPageFile="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> </asp:Content> 107 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Defining a Master Page ITEC5620 - Advance Web Programming:: <%@ 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> 108 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Applying 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> 109 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Applying a Master Page to a Site <configuration> <system.web> <pages masterPageFile="~/Site.master" /> </system.web> </configuration> 110 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Applying a Master Page Programmatically ITEC5620 - Advance Web Programming:: void Page_PreInit (Object sender, EventArgs e) { Page.MasterPageFile = "~/Site.master"; } 111 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Default Content ContentPlaceHolder controls can define content of their own ("default content") Default content is displayed ONLY if not overridden by content page <%@ Master %> ... <asp:ContentPlaceHolder ID="Main" RunAt="server"> This is default content that will appear in the absence of amatching Content control in a content page <asp:ContentPlaceHolder> 112 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The Page.Master Property Retrieves ITEC5620 - Advance Web Programming:: reference to master page Instance of class derived from System.Web.UI.MasterPage Null if page doesn't have a master Used to programmatically access content defined in the master page Use FindControl for weak typing Use public property in master page for strong typing (preferred) 113 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Accessing a Control in the Master Page (Weak Typing) ITEC5620 - Advance Web Programming:: In the master page… <asp:Label ID="Title" RunAt="server" /> In the content page… ((Label) Master.FindControl ("Title")).Text = "Orders"; 114 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Accessing a Control in the Master Page (Strong Typing) ITEC5620 - Advance Web Programming:: In the master page… <asp:Label ID="Title" RunAt="server" /> . . . <script language="C#" runat="server"> public string TitleText { get { return Title.Text; } set { Title.Text = value; } } </script> In the content page… Master.TitleText = "Orders"; 115 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Nesting Master Pages ITEC5620 - Advance Web Programming:: Master pages can be nested Master pages that have masters must contain only Content controls, but Content controls can contain ContentPlaceHolders <!-- Orders.Master --> <%@ Master MasterPageFile="~/Site.Master" %> <asp:Content ContentPlaceHolderID="..." RunAt="server"> <asp:ContentPlaceHolder ID="..." RunAt="server"> ... </asp:ContentPlaceHolder> <asp:Content> 116 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Master Pages Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] Themes and Skins ITEC5620 - Advance Web Programming:: Mechanism for theming controls, pages, and sites by groupinitializing control properties Skin = Visual attributes for control(s) Physically stored in .skin files Default Theme skins and named skins = Collection of one or more skins Physically stored in Themes subfolders Global themes and local themes 118 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Applying a Theme to a Page ITEC5620 - Advance Web Programming:: <%@ Page Theme="BasicBlue"> Before After 119 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Applying a Theme to a Site ITEC5620 - Advance Web Programming:: <configuration> <system.web> <pages theme="BasicBlue" /> </system.web> </configuration> 120 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ITEC5620 - Advance Web Programming:: Applying a Theme Programmatically void Page_PreInit (Object sender, EventArgs e) { Page.Theme = "BasicBlue"; } 121 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Global Themes ASP.NETClientFiles ITEC5620 - Advance Web Programming:: Theme name = Subdirectory name Themes SKIN BasicBlue SmokeAndGlass SKIN SKIN SKIN 122 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Local Themes ITEC5620 - Advance Web Programming:: vroot Theme name = Subdirectory name Themes ShockingPink AutumnLeaves SKIN SKIN SKIN SKIN 123 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Defining Skins ITEC5620 - Advance Web Programming:: <!-- 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> ... 124 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Named Skins ITEC5620 - Advance Web Programming:: Skins without SkinIDs are default skins Skins with SkinIDs are named skins SkinIDs must be unique per control type Can be defined in same SKIN file as default skins or in separate files Use controls' SkinID properties to apply named skins 125 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Defining Named Skins ITEC5620 - Advance Web Programming:: <!-- 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> ... 126 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Using a Named Skin ITEC5620 - Advance Web Programming:: <asp:DropDownList ID="Countries" SkinID="Blue" RunAt="server" /> 127 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The EnableTheming Property ITEC5620 - Advance Web Programming:: Supported by all pages and controls Defaults to true Set EnableTheming to false to disable theming for individual controls or entire pages <asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" /> 128 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Themes and Skins Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected] New Controls ASP.NET ITEC5620 - Advance Web Programming:: 2.0 contains ~50 new 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. 130 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี UI Controls Name ITEC5620 - Advance Web Programming:: 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 Substitution Designates non-cached regions of cached pages Wizard Guides users through stepwise procedures 131 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The ImageMap Control ITEC5620 - Advance Web Programming:: <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> 132 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The FileUpload Control ITEC5620 - Advance Web Programming:: <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> 133 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี The MultiView Control ITEC5620 - Advance Web Programming:: <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 } 134 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี Declarative View Switching ITEC5620 - Advance Web Programming:: <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> 135 สารสนเทศ มหาวิทยาลัยเทคโนโลยีมหานคร ปริญญาโท สาขาวิชา เทคโนโลยี ASP.NET 2.0 Controls Chalaivate Pipatpannawong Computer Instructor www.9Expert.co.th [email protected]
