Advance Web Advance Web ProgrammingProgrammingAdvance Web Advance Web ProgrammingProgramming
ออ..ชไลเวท พิพิ�ฒพิรรณวงศ์�ชไลเวท พิพิ�ฒพิรรณวงศ์�Chalaivate PipatpannawongComputer InstructorMicrosoft Certificate ProfessionalWeb : www.9Expert.co.th ; Thaiwebdev.comE-Mail: [email protected]
ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ
ITEC5620 - Advance Web Programming
What's New with What's New with Visual Studio Visual Studio 2005 and 2005 and ASP.NET 2.0ASP.NET 2.0
What's New with What's New with Visual Studio Visual Studio 2005 and 2005 and ASP.NET 2.0ASP.NET 2.0
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
3ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
New Features at New Features at a Glancea Glance
DataControls
DataControls
LoginControls
LoginControls Web PartsWeb Parts Other New
Controls
Other NewControls
Master PagesMaster Pages Themesand Skins
Themesand Skins
Mobility andLocalization
Mobility andLocalization CompilationCompilation
MembershipMembership RoleManagement
RoleManagement ProfilesProfiles ConfigurationConfiguration
SiteMaps
SiteMaps
HealthMonitoring
HealthMonitoring
OtherServices
OtherServices
Con
trols
Pag
eFr
am
ew
ork
Serv
ices
an
d A
PIs
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
4ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New in Data What's New in Data AccessAccess
Data source controlsDeclarative 2-way data binding
Data controlsGridView - Like the DataGrid, only betterDetailsView - Companion to GridView
SQL cache dependenciesKey cached items to database entities
Simplified data binding expressions
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
5ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ASP.NET 1.x Data ASP.NET 1.x Data BindingBinding<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
6ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ASP.NET 2.0 Data ASP.NET 2.0 Data BindingBinding
<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" />
<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" />
Declarative Declarative Data BindingData BindingDeclarative Declarative Data BindingData Binding
Chalaivate Pipatpannawong
Chalaivate.COM
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
8ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New for What's New for UIsUIs
Master pages"Visual inheritance" for Web pagesApplied declaratively or programmatically
Themes and skinsTheme controls, pages, and entire sitesApplied declaratively or programmatically
New controls (more than 50 in all)Menus, TreeViews, Wizards, and more
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
9ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Theming a PageTheming a Page<%@ Page Theme="BasicBlue"><%@ Page Theme="BasicBlue">
Before After
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
11ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New in What's New in SecuritySecurity
Membership serviceService for managing users and credentialsProvider-based for flexible data storage
Login controlsControls for logging in, creating new users,
recovering lost passwords, and more Role Management service
Combine forms authentication and role-based authorization without writing code!
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
12ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Validating LoginsValidating Logins
if (Membership.ValidateUser (UserName.Text, Password.Text))
RedirectFromLoginPage (UserName.Text, RememberMe.Checked);
if (Membership.ValidateUser (UserName.Text, Password.Text))
RedirectFromLoginPage (UserName.Text, RememberMe.Checked);
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
13ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The Login The Login ControlControl
<html> <body> <form runat="server"> <asp:Login RunAt="server" /> </form> </body></html>
<html> <body> <form runat="server"> <asp:Login RunAt="server" /> </form> </body></html>
Membership Membership and Loginsand LoginsMembership Membership and Loginsand Logins
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
15ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ProfilesProfiles 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
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
16ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Defining a ProfileDefining a Profile
<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
17ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using a ProfileUsing a Profile
// Increment the current user's post countProfile.Posts = Profile.Posts + 1;
// Update the current user's last post dateProfile.LastPost = DateTime.Now;
// Increment the current user's post countProfile.Posts = Profile.Posts + 1;
// Update the current user's last post dateProfile.LastPost = DateTime.Now;
Persisting Persisting Data with Data with ProfilesProfiles
Persisting Persisting Data with Data with ProfilesProfiles
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
19ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Site NavigationSite Navigation Navigation UIs are tedious to implement
Especially if they rely on client-side script New controls simplify site navigation
TreeView and Menu - Navigation UISiteMapDataSource - XML site mapsSiteMapPath - "Bread crumb" control
Public API provides foundation for controls Provider-based for flexibility
Data-Driven Data-Driven Site Site NavigationNavigation
Data-Driven Data-Driven Site Site NavigationNavigation
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
21ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ProvidersProvidersNew model for storing and managing state
Makes storage adaptable to different mediaUsed by many key ASP.NET services
Membership serviceRole Management service and more
Built-in providers make ASP.NET state storage very flexible
Custom providers make it infinitely flexible
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
22ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The Provider The Provider ModelModel
Membership API
MembershipData
Access OtherData Stores
Controls LoginLogin LoginStatusLoginStatus LoginViewLoginView
AccessMembershipProviderAccessMembershipProvider Other MembershipProviders
Other MembershipProviders
Membership Providers
MembershipMembership MembershipUserMembershipUser
SqlMembershipProviderSqlMembershipProvider
SQL Server
Other LoginControls
Other LoginControls
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
23ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ConfigurationConfigurationAdministrative tools
ASP.NET MMC snap-inWeb Site Administration Tool (Webadmin.axd)
Configuration APIRead/write access to configuration settingsSimplified custom configuration sections
InstrumentationPerf counters, health monitoring, and more
Web Site Web Site AdministratiAdministration Toolon Tool
Web Site Web Site AdministratiAdministration Toolon ToolChalaivate Pipatpannawong
Chalaivate.COM
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
25ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Web PartsWeb Parts Framework for building portal-style apps
Patterned after SharePoint Portal ServerSystem.Web.UI.WebControls.WebParts
Rich UIs with minimal codeEdit page layout using drag-and-dropEdit appearance and behavior and more
Seamless personalization
Intercommunication ("connections")
Web PartsWeb PartsWeb PartsWeb Parts
Chalaivate Pipatpannawong
Chalaivate.COM
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
27ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New in What's New in MobilityMobility
Unified Control ArchitectureAdapters enable pages and controls to render
markup for different device typesWML adapters provided by third parties
Device filters
<asp:Label Text="Hello, world" RunAt="server" Nokia:Text="Hello, Nokia" Up:Text="Hello, OpenWave" />
<asp:Label Text="Hello, world" RunAt="server" Nokia:Text="Hello, Nokia" Up:Text="Hello, OpenWave" />
Nokia browsersOpenWave browsers
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
28ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New in What's New in LocalizationLocalizationAuto-culture handling
Declarative mapping of Accept-Language headers to relevant thread properties
Simplified resource handlingDeclarative mapping of control properties to resources using <%$ … %> expressions
Strongly typed programmatic resource loading
<asp:localize runat="server"> and more
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
29ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
What's New in What's New in CompilationCompilationAutocompile anything
CS files, VB files, RESX files, and so onSimply drop files into special directoriesExtensible with custom build providers
New code-behind model (code-behind 2.0)Fixes fragilities in version 1Relies on partial class support in compilers
Precompile and deploy without source
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
30ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Dynamic Dynamic CompilationCompilation
vroot
Code
Resources
CS
VB
WSDL
XSD
RESX
RESOURCE
Files auto-compiled on first access
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
31ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Build ProvidersBuild 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>
<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>
Components that autocompile files <buildProviders> config section
maps file types and directories to build providers
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
32ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Code-Behind 2.0Code-Behind 2.0
<%@ 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>
<%@ 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>
Hello.aspx
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
33ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Code-Behind 2.0, Code-Behind 2.0, Cont.Cont.
using System;
partial class MyPage_aspx{ void OnTest (Object sender, EventArgs e) { Output.Text = "Hello, " + Input.Text; }}
using System;
partial class MyPage_aspx{ void OnTest (Object sender, EventArgs e) { Output.Text = "Hello, " + Input.Text; }}
Hello.aspx.cs
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
34ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
PrecompilationPrecompilationPrecompile.axd
precompiles sites in place to avoid first-access delays
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
35ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Deploying without Deploying without SourceSource
Aspnet_compiler.exe precompiles sites and deploys without source code
Dynamic Dynamic CompilationCompilationDynamic Dynamic CompilationCompilation
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
37ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
$ Expressions$ Expressions
<asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="<%$ ConnectionStrings:Pubs %>" SelectCommand="select title_id, title, price from titles" />
<asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="<%$ ConnectionStrings:Pubs %>" SelectCommand="select title_id, title, price from titles" />
<configuration> <connectionStrings> <add name="Pubs" connectionString="server=localhost;database=pubs;..." /> </connectionStrings></configuration>
<configuration> <connectionStrings> <add name="Pubs" connectionString="server=localhost;database=pubs;..." /> </connectionStrings></configuration>
ASPX
Web.config
Declarative mechanism for loading resources, connection strings, and more
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
38ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Expression BuildersExpression Builders 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>
<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>
Custom Custom Expression Expression BuildersBuilders
Custom Custom Expression Expression BuildersBuilders
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
40ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Cross-Page PostingCross-Page Posting 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
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
41ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Posting Back to Posting Back to Another PageAnother Page
<html> <body> <form runat="server"> <asp:TextBox ID="Input" RunAt="server" /> <asp:Button Text="Test" PostBackUrl=
"PageTwo.aspx" RunAt="server" /> </form> </body></html>
<html> <body> <form runat="server"> <asp:TextBox ID="Input" RunAt="server" /> <asp:Button Text="Test" PostBackUrl=
"PageTwo.aspx" RunAt="server" /> </form> </body></html>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
42ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Referencing a Control on Referencing a Control on the Previous Page (Weak the Previous Page (Weak Typing)Typing)<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
43ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Referencing a Control on Referencing a Control on the Previous Page (Strong the Previous Page (Strong Typing)Typing)
<%@ 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>
<%@ 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
Chalaivate Pipatpannawong
Chalaivate.COM
Cross-Page Cross-Page PostbacksPostbacksCross-Page Cross-Page PostbacksPostbacks
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
45ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Validation GroupsValidation Groups Validation controls can now be grouped
using new ValidationGroup property
Implemented by validation controlsAlso 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
Validation Validation GroupsGroupsValidation Validation GroupsGroups
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
47ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Client CallbacksClient Callbacks "Lightweight" 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 Internet Explorer 5.0 or higher
Great way to improve UI responsiveness
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
48ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
How Client How Client Callbacks WorkCallbacks Work
Client CallbackManager
PageClient initiates callback by calling function returned by GetCallback-EventReference
Callback manager launches async XML-HTTP call to server
Callback manager is notified that the call completed
Client is notified that the call completed and handed the result
Client Server
Page's RaiseCall-backEvent method is called
11 22
33
4455
Client Client CallbacksCallbacksClient Client CallbacksCallbacks
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
50ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Who's Got the Focus?Who's Got the Focus? 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>
<asp:TextBox ID="UserName" RunAt="server" /> . . .<script language="C#" runat="server">void Page_Load (Object sender, EventArgs e){ SetFocus ("UserName");}</script>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
51ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Panel.DefaultButtonPanel.DefaultButton 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>
<asp:Panel DefaultButton="Button1" RunAt="server"> ... <asp:Button ID="Button1" ... /></asp:Panel><asp:Panel DefaultButton="Button2" RunAt="server"> ... <asp:Button ID="Button2" ... /></asp:Panel>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
52ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
URL MappingURL Mapping 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>
<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 URLPhysical URL
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
53ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Machine.configMachine.config Default settings "baked in" to system
Reduces size of Machine.configImproves application startup performance
New Machine.config-related files:Machine.config.defaults - Documents default
settings baked into the run-timeMachine.config.comments - Documents syntax
of config elements, many of which are newSame directory as Machine.config
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
54ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Visual Studio Using Visual Studio 2005 to Build Data-2005 to Build Data-Driven ASP.NET 2.0 Driven ASP.NET 2.0 ApplicationsApplications
Using Visual Studio Using Visual Studio 2005 to Build Data-2005 to Build Data-Driven ASP.NET 2.0 Driven ASP.NET 2.0 ApplicationsApplications
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
55ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
AgendaAgendaSimplified data bindingData source controlsData controls
GridView and DetailsView controlsEditing with GridView and DetailsView
CachingSQL cache dependenciesCache configuration
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
56ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Simplified Data Simplified Data BindingBinding
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") %>
<!-- 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") %>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
57ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
DataSource DataSource ControlsControls
NameName DescriptionDescription
SqlDataSourceSqlDataSource Connects data-binding controls to SQL databasesConnects data-binding controls to SQL databases
AccessDataSourceAccessDataSource Connects data-binding controls to Access databasesConnects data-binding controls to Access databases
XmlDataSourceXmlDataSource Connects data-binding controls to XML dataConnects data-binding controls to XML data
ObjectDataSourceObjectDataSource Connects data-binding controls to data componentsConnects data-binding controls to data components
SiteMapDataSourceSiteMapDataSource Connects site navigation controls to site map dataConnects site navigation controls to site map data
Declarative (no-code) data binding
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
58ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
SqlDataSourceSqlDataSource Declarative data binding to SQL databases
Any database served by a managed provider
Two-way data binding
SelectCommand defines query semanticsInsertCommand, UpdateCommand, and
DeleteCommand define update semantics
Optional caching of query results
Parameterized operation
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
59ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Using SqlDataSourceSqlDataSource
<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" />
<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" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
60ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Key SqlDataSource Key SqlDataSource PropertiesProperties
NameName DescriptionDescription
ConnectionStringConnectionString Connection string used to connect to data sourceConnection string used to connect to data source
SelectCommandSelectCommand Command used to perform queriesCommand used to perform queries
InsertCommandInsertCommand Command used to perform insertsCommand used to perform inserts
UpdateCommandUpdateCommand Command used to perform updatesCommand used to perform updates
DeleteCommandDeleteCommand Command used to perform deletesCommand used to perform deletes
DataSourceModeDataSourceMode Specifies whether DataSet or DataReader is used(default = DataSet)
Specifies whether DataSet or DataReader is used(default = DataSet)
ProviderNameProviderName Specifies provider (default = SQL Server .NET provider)Specifies provider (default = SQL Server .NET provider)
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
61ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using an Oracle Using an Oracle DatabaseDatabase
<asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="..." SelectCommand="select title_id, title, price from titles" ProviderName="System.Data.OracleClient" />
<asp:SqlDataSource ID="Titles" RunAt="server" ConnectionString="..." SelectCommand="select title_id, title, price from titles" ProviderName="System.Data.OracleClient" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
62ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
SqlDataSource and SqlDataSource and CachingCaching
SqlDataSource supports declarative caching of results through these properties:NameName DescriptionDescription
EnableCachingEnableCaching Specifies whether caching is enabled (default = false)Specifies whether caching is enabled (default = false)
CacheDurationCacheDuration Length of time in seconds results should be cachedLength of time in seconds results should be cached
CacheExpirationPolicyCacheExpirationPolicySpecifies whether cache duration is sliding or absoluteSpecifies whether cache duration is sliding or absolute
CacheKeyDependencyCacheKeyDependencyCreates dependency on specified cache keyCreates dependency on specified cache key
SqlCacheDependencySqlCacheDependencyCreates dependency on specified database entityCreates dependency on specified database entity
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
63ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
<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" />
<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" />
Caching Query Caching Query ResultsResults
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
64ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Parameterized Parameterized CommandsCommands
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
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
65ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
XxxParameters XxxParameters PropertiesProperties
NameName DescriptionDescription
SelectParametersSelectParameters Specifies parameters for SelectCommand Specifies parameters for SelectCommand
InsertParametersInsertParameters
UpdateParametersUpdateParameters
DeleteParametersDeleteParameters
FilterParametersFilterParameters Specifies parameters for FilterExpressionSpecifies parameters for FilterExpression
Specifies parameters for InsertCommand Specifies parameters for InsertCommand
Specifies parameters for UpdateCommand Specifies parameters for UpdateCommand
Specifies parameters for DeleteCommand Specifies parameters for DeleteCommand
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
66ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
XxxParameter XxxParameter TypesTypes
NameName DescriptionDescription
ControlParameterControlParameter Binds a replaceable parameter to a control propertyBinds a replaceable parameter to a control property
CookieParameterCookieParameter Binds a replaceable parameter to a cookie valueBinds a replaceable parameter to a cookie value
FormParameterFormParameter Binds a replaceable parameter to a form fieldBinds a replaceable parameter to a form field
QueryStringParameterQueryStringParameterBinds a replaceable parameter to a query string parameterBinds a replaceable parameter to a query string parameter
SessionParameterSessionParameter Binds a replaceable parameter to a session variableBinds a replaceable parameter to a session variable
ParameterParameter Binds a replaceable parameter to a data fieldBinds a replaceable parameter to a data field
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
67ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Using ControlParameteControlParameterr <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" />
<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" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
68ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Calling Stored Calling Stored ProceduresProcedures
<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" />
<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 = @CountryGO
CREATE PROCEDURE proc_GetCustomers@Country nvarchar (32) AS SELECT * FROM Customers WHERE Country = @CountryGO
CREATE PROCEDURE proc_GetCountries AS SELECT DISTINCT Country FROM Customers ORDER BY CountryGO
CREATE PROCEDURE proc_GetCountries AS SELECT DISTINCT Country FROM Customers ORDER BY CountryGO
SqlDataSourSqlDataSourceceSqlDataSourSqlDataSourcece
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
70ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
XmlDataSourceXmlDataSourceDeclarative data binding to XML
dataSupports caching and XSL
transformationsOne-way data binding only; no
updating
<asp:XmlDataSource ID="Rates" DataFile="Rates.xml" RunAt="server" />
<asp:TreeView ID="MyTreeView" DataSourceID="Rates" RunAt="server" />
<asp:XmlDataSource ID="Rates" DataFile="Rates.xml" RunAt="server" />
<asp:TreeView ID="MyTreeView" DataSourceID="Rates" RunAt="server" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
71ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Key XmlDataSource Key XmlDataSource PropertiesProperties
NameName DescriptionDescription
DataFileDataFile Path to file containing XML dataPath to file containing XML data
TransformFileTransformFile Path to file containing XSL style sheetPath to file containing XSL style sheet
EnableCachingEnableCaching
XPathXPath XPath expression used to filter dataXPath expression used to filter data
CacheDurationCacheDuration Length of time in seconds data should be cachedLength of time in seconds data should be cached
CacheExpirationPolicyCacheExpirationPolicy Specifies whether cache duration is sliding or absoluteSpecifies whether cache duration is sliding or absolute
CacheKeyDependencyCacheKeyDependencyCreates dependency on specified cache keyCreates dependency on specified cache key
Specifies whether caching is enabled (default = false)Specifies whether caching is enabled (default = false)
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
72ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ObjectDataSourceObjectDataSourceDeclarative binding to data components
Leverage middle-tier data access components
Keep data access code separate from UI layer
Two-way data bindingSelectMethod, InsertMethod,
UpdateMethod, and DeleteMethod
Optional caching of query results
Parameterized operation
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
73ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Key ODS PropertiesKey ODS Properties
NameName DescriptionDescription
TypeNameTypeName Type name of data componentType name of data component
SelectMethodSelectMethod Method called on data component to perform queriesMethod called on data component to perform queries
InsertMethodInsertMethod
UpdateMethodUpdateMethod
DeleteMethodDeleteMethod
EnableCachingEnableCaching Specifies whether caching is enabled (default = false)Specifies whether caching is enabled (default = false)
Method called on data component to perform insertsMethod called on data component to perform inserts
Method called on data component to perform updates
Method called on data component to perform deletesMethod called on data component to perform deletes
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
74ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Key ODS Key ODS Properties, Cont.Properties, Cont.
NameName DescriptionDescription
InsertParametersInsertParameters Specifies parameters for InsertMethodSpecifies parameters for InsertMethod
UpdateParametersUpdateParameters Specifies parameters for UpdateMethodSpecifies parameters for UpdateMethod
DeleteParametersDeleteParameters Specifies parameters for DeleteMethodSpecifies parameters for DeleteMethod
SelectParametersSelectParameters Specifies parameters for SelectMethodSpecifies parameters for SelectMethod
CacheDurationCacheDuration Length of time in seconds data should be cachedLength of time in seconds data should be cached
SqlCacheDependencySqlCacheDependency Creates dependency on specified database entityCreates dependency on specified database entity
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
75ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Initialization and Initialization and Clean-UpClean-Up
ObjectDataSource.SelectMethod et al can identify static methods or instance methods
If instance methods are used:ODS creates new class instance on each
callClass must have public default constructor
Use ObjectCreated and ObjectDisposing events to perform specialized initialization or clean-up work on data components
ObjectDataSObjectDataSourceourceObjectDataSObjectDataSourceource
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
77ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The GridView The GridView ControlControlEnhanced 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 CheckBoxFieldsDeclared in <Columns> element
Highly customizable UI
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
78ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
GridView GridView ExampleExample
<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" />
<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" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
79ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
OutputOutput
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
80ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
GridView Field TypesGridView Field Types
NameName DescriptionDescription
BoundFieldBoundField Renders columns of text from fields in data sourceRenders columns of text from fields in data source
ButtonFieldButtonField Renders columns of buttons (push button, image, or link)Renders columns of buttons (push button, image, or link)
CheckBoxFieldCheckBoxField Renders Booleans as check boxesRenders Booleans as check boxes
HyperLinkFieldHyperLinkField Renders columns of hyperlinksRenders columns of hyperlinks
TemplateFieldTemplateField Renders columns using HTML templatesRenders columns using HTML templates
CommandFieldCommandField Renders controls for selecting and editing GridView dataRenders controls for selecting and editing GridView data
ImageFieldImageField Renders columns of imagesRenders columns of images
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
81ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Specifying Field TypesSpecifying Field Types<asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;...“
SelectCommand="select photo, lastname, firstname, title 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>
<asp:SqlDataSource ID="Employees" RunAt="server" ConnectionString="server=localhost;database=northwind;...“
SelectCommand="select photo, lastname, firstname, title 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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
82ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
OutputOutput
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
83ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The DetailsView The DetailsView ControlControl
Renders individual recordsPair with GridView for master-detail views
Or use without GridView to display individual records
Built-in paging, inserting, updating, deleting
Uses same field types as GridViewDeclared in <Fields> element
Highly customizable UI
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
84ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
DetailsView ExampleDetailsView Example<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
85ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
OutputOutput
Master-Master-Detail ViewsDetail ViewsMaster-Master-Detail ViewsDetail Views
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
87ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Inserting, Inserting, Updating, and Updating, and DeletingDeletingData controls supply editing UIs
AutoGenerateXxxButton propertiesInsert/EditRowStyle properties
Data source controls supply editing logicInsert/Update/DeleteCommand propertiesInsert/Update/DeleteParameters properties
Inserting/ed, Updating/ed, Deleting/ed events
Visual Studio supplies the glue
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
88ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Editing with GridViewsEditing with GridViews
<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" />
<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" />
Edit buttonsPrimary key
Update commandUpdate parameters
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
89ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Conflict DetectionConflict Detection First-in wins
Update fails if data has changedStructure UpdateCommand accordinglySet ConflictDetection="CompareAllValues“
Last-in winsUpdate succeeds even if data has changedStructure UpdateCommand accordinglySet ConflictDetection="OverwriteChanges"
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
90ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
First-In-Wins UpdatesFirst-In-Wins Updates<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" />
<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" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
91ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Error DetectionError DetectionControls fire events after database updates
GridView.RowUpdatedDetailsView.ItemUpdatedSqlDataSource.Updated, etc.
Event handlers receive "status" objectsReveal whether database exception occurred
Allow exceptions to be handled or rethrownReveal how many rows were affected
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
92ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Handling Update Handling Update ErrorsErrors<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 }}
<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 }}
Editing with Editing with GridViews GridViews and and DetailsViewsDetailsViews
Editing with Editing with GridViews GridViews and and DetailsViewsDetailsViews
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
94ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
SQL Cache SQL Cache DependenciesDependencies
New cache dependency typeEmbodied in SqlCacheDependency
classConfigured through
<sqlCacheDependency> configuration section
Links cached items to database entitiesASP.NET application cacheASP.NET output cache
Compatible with SQL Server 7, 2000, 2005
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
95ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Preparing a Preparing a DatabaseDatabase
Use Aspnet_regsql.exe or SqlCache-DependencyAdmin to prepare database*
aspnet_regsql -S localhost -E -d Northwind -edaspnet_regsql -S localhost -E -d Northwind -ed
Trusted connection
Database name
Enable database
* Not necessary for SQL Server 2005
Server name
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
96ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Preparing a TablePreparing a Table Use Aspnet_regsql.exe or
SqlCache-DependencyAdmin to prepare table*
aspnet_regsql -S localhost -E -d Northwind -t Products -etaspnet_regsql -S localhost -E -d Northwind -t Products -et
Trusted connection
Database name
Table name
Server name
Enable table
* Not necessary for SQL Server 2005
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
97ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Preparing Web.configPreparing Web.config<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
98ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Using SqlCacheDependencSqlCacheDependency with the y with the Application CacheApplication Cache
Cache.Insert ("Products", products, new SqlCacheDependency ("Northwind", "Products");
Cache.Insert ("Products", products, new SqlCacheDependency ("Northwind", "Products");
Database name
Table name
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
99ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Using SqlCacheDependencSqlCacheDependency with the Output y with the Output CacheCache<%@ OutputCache Duration="60" VaryByParam="None"
SqlDependency="Northwind:Products" %><%@ OutputCache Duration="60" VaryByParam="None" SqlDependency="Northwind:Products" %>
Database name
Table name
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
100ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using Using SqlCacheDependency SqlCacheDependency with SqlDataSourcewith 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" />
<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
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
101ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Cache Cache ConfigurationConfiguration <cache>
Enable/disable application cacheEnable/disable item expiration and
more
<outputCache>, <outputCacheSettings>Enable/disable output cachingEnable/disable disk-based persistenceSet maximum size per app and more
<sqlCacheDependency>
SQL Cache SQL Cache DependencieDependenciess
SQL Cache SQL Cache DependencieDependenciess
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
103ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Managing Managing Look, Feel, and Look, Feel, and Layout with Layout with Visual Studio Visual Studio 2005 and 2005 and ASP.NET 2.0ASP.NET 2.0
Managing Managing Look, Feel, and Look, Feel, and Layout with Layout with Visual Studio Visual Studio 2005 and 2005 and ASP.NET 2.0ASP.NET 2.0
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
105ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
AgendaAgenda Master pages
Master pages and content pagesAccessing controls defined in master pages
Themes and skinsApplying themesGlobal themes vs. local themesTheme and skin definitions
New controls
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
106ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Master PagesMaster PagesMaster Page
Content Page
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
107ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Master Page Master Page BasicsBasics
Masters define common content and placeholders (<asp:ContentPlaceHolder>)
Content pages reference masters and fill placeholders with content (<asp:Content>)<%@ 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>
Site.master default.aspx http://.../default.aspx
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
108ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Defining a Master Defining a Master PagePage<%@ 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>
<%@ 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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
109ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Master Applying a Master PagePage
<%@ Page MasterPageFile="~/Site.master" %>
<asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the place holder "Main"
defined in the master page</asp:Content>
<%@ Page MasterPageFile="~/Site.master" %>
<asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the place holder "Main"
defined in the master page</asp:Content>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
110ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Master Page Applying a Master Page to a Siteto a Site
<configuration> <system.web> <pages masterPageFile="~/Site.master" /> </system.web></configuration>
<configuration> <system.web> <pages masterPageFile="~/Site.master" /> </system.web></configuration>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
111ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Master Applying a Master Page Page ProgrammaticallyProgrammaticallyvoid Page_PreInit (Object sender, EventArgs e){ Page.MasterPageFile = "~/Site.master";}
void Page_PreInit (Object sender, EventArgs e){ Page.MasterPageFile = "~/Site.master";}
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
112ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Default ContentDefault 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>
<%@ 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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
113ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The Page.Master The Page.Master PropertyProperty
Retrieves reference to master pageInstance of class derived from
System.Web.UI.MasterPageNull if page doesn't have a master
Used to programmatically access content defined in the master pageUse FindControl for weak typingUse public property in master page
for strong typing (preferred)
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
114ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Accessing a Control in Accessing a Control in the Master Page the Master Page (Weak Typing)(Weak Typing)
((Label) Master.FindControl ("Title")).Text = "Orders";((Label) Master.FindControl ("Title")).Text = "Orders";
In the content page…
<asp:Label ID="Title" RunAt="server" /><asp:Label ID="Title" RunAt="server" />
In the master page…
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
115ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Accessing a Control in Accessing a Control in the Master Page the Master Page (Strong Typing)(Strong Typing)
Master.TitleText = "Orders";Master.TitleText = "Orders";
In the content page…
<asp:Label ID="Title" RunAt="server" /> . . .<script language="C#" runat="server">public string TitleText{ get { return Title.Text; } set { Title.Text = value; }}</script>
<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 master page…
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
116ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Nesting Master Nesting Master PagesPages
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>
<!-- Orders.Master --><%@ Master MasterPageFile="~/Site.Master" %>
<asp:Content ContentPlaceHolderID="..." RunAt="server"> <asp:ContentPlaceHolder ID="..." RunAt="server"> ... </asp:ContentPlaceHolder><asp:Content>
Master Master PagesPagesMaster Master PagesPages
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
118ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Themes and SkinsThemes and Skins Mechanism for theming controls, pages,
and sites by group-initializing control properties
Skin = Visual attributes for control(s)Physically stored in .skin filesDefault skins and named skins
Theme = Collection of one or more skinsPhysically stored in Themes subfoldersGlobal themes and local themes
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
119ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Theme to Applying a Theme to a Pagea Page
<%@ Page Theme="BasicBlue"><%@ Page Theme="BasicBlue">
Before After
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
120ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Theme to Applying a Theme to a Sitea Site
<configuration> <system.web> <pages theme="BasicBlue" /> </system.web></configuration>
<configuration> <system.web> <pages theme="BasicBlue" /> </system.web></configuration>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
121ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Applying a Theme Applying a Theme ProgrammaticallyProgrammaticallyvoid Page_PreInit (Object sender, EventArgs e){ Page.Theme = "BasicBlue";}
void Page_PreInit (Object sender, EventArgs e){ Page.Theme = "BasicBlue";}
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
122ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Global ThemesGlobal Themes
Themes
BasicBlue
Smoke-AndGlass
SKIN
SKIN
SKIN
SKIN
ASP.NET-ClientFil
es Theme name =Subdirectory name
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
123ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Local ThemesLocal Themes
Themes
Shocking-Pink
Autumn-Leaves
SKIN
SKIN
SKIN
SKIN
vroot
Theme name =Subdirectory name
Theme name =Subdirectory name
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
124ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
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>
...
<!-- 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>
...
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
125ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Named SkinsNamed Skins Skins without SkinIDs are default skins
Skins with SkinIDs are named skinsSkinIDs 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
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
126ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Defining Named Defining Named SkinsSkins
<!-- 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>
...
<!-- 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>
...
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
127ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Using a Named SkinUsing a Named Skin
<asp:DropDownList ID="Countries" SkinID="Blue" RunAt="server" /><asp:DropDownList ID="Countries" SkinID="Blue" RunAt="server" />
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
128ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The The EnableTheming EnableTheming PropertyProperty 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" /><asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" />
Themes and Themes and SkinsSkinsThemes and Themes and SkinsSkins
Chalaivate PipatpannawongComputer [email protected]
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
130ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
ASP.NET 2.0 contains ~50 new controls
New ControlsNew Controls
CategoryCategory ControlsControls
Data controlsData controls GridView and DetailsViewGridView and DetailsView
Data source controlsData source controls SqlDataSource, ObjectDataSource, XmlDataSource, etc.SqlDataSource, ObjectDataSource, XmlDataSource, etc.
Login controlsLogin controls Login, CreateUserWizard, PasswordRecovery, etc.Login, CreateUserWizard, PasswordRecovery, etc.
Navigation controlsNavigation controls Menu, TreeView, and SiteMapPathMenu, TreeView, and SiteMapPath
Web Parts controlsWeb Parts controls WebPartManager, WebPartZone, etc.WebPartManager, WebPartZone, etc.
UI controlsUI controls FileUpload, BulletedList, MultiView, Wizard, etc.FileUpload, BulletedList, MultiView, Wizard, etc.
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
131ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
UI ControlsUI ControlsNameName DescriptionDescription
BulletedListBulletedList Renders bulleted lists of itemsRenders bulleted lists of items
FileUploadFileUpload UI for uploading files to Web serversUI for uploading files to Web servers
HiddenFieldHiddenField Renders hidden fieldsRenders hidden fields
ImageMapImageMap Renders HTML image mapsRenders HTML image maps
MultiViewMultiView Defines multiple views displayed one at a timeDefines multiple views displayed one at a time
ViewView Defines views in MultiView controlsDefines views in MultiView controls
WizardWizard Guides users through stepwise proceduresGuides users through stepwise procedures
SubstitutionSubstitution Designates non-cached regions of cached pagesDesignates non-cached regions of cached pages
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
132ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The ImageMap The ImageMap ControlControl
<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
133ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
The FileUpload The FileUpload ControlControl
<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>
<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>
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
134ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
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}
<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}
ITEC5620 - Advance Web ProgrammingITEC5620 - Advance Web Programming::::
135ปริ�ญญาโท สาขาวิ�ชา เทคโนโลยี�สาริสนเทศ มหาวิ�ทยีาล�ยีเทคโนโลยี�มหานคริ
Declarative View Declarative View SwitchingSwitching
<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: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 ASP.NET 2.0 ControlsControlsASP.NET 2.0 ASP.NET 2.0 ControlsControls
Chalaivate PipatpannawongComputer [email protected]