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]