2007113112916aj - มหาวิทยาลัยเทคโนโลยีมหานคร

Download Report

Transcript 2007113112916aj - มหาวิทยาลัยเทคโนโลยีมหานคร

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]