Introduction to ASP.NET

Post on 06-May-2015

13,458 views 2 download

description

Overview of ASP.NET An ASP.NET Page Server Controls User Controls Validation Master Pages Themes & skins Page Cycle Events Menu, Navigation & Sitemaps Some cool new ASP.NET 2 Server Controls

transcript

Developing Windows and Web Applications using Visual Studio.NET

Peter Gfader

Senior Software Architect

SSA @ SSW

Loves C# and .NET (Java not anymore)

Specializes in

Windows Forms ASP.NET TFS testing Automated tests Silverlight

Peter Gfader

Homework?

Consume a public web service

Show users where they are

Session 6: ASP. NET The course ten sessions – Overview so far

Overview of ASP.NET

An ASP.NET Page

Server Controls

User Controls

Validation

Master Pages

Themes & skins

LAB

Page Cycle Events

Menu, Navigation & Sitemaps

Some cool new ASP.NET 2 Server Controls

http://sharepoint.ssw.com.au/Training/UTSNET/

Part 1: .NET Winforms

1. Overview of .NET2. Data in Forms3. Usability - Rules to Better Windows Forms4. Deployment and Security of Windows Forms5. Web Services and Threading

The 10 SessionsFirst 5 – Done – Winforms

http://sharepoint.ssw.com.au/Training/UTSNET/

Part 2: .NET Webforms

1. Overview of .NET Webforms TODAY2. Data in Webforms3. Usability

• Rich Web Forms and • Other ASP.NET Features

4. Web Security 5. Advanced Topics & Future Technology (Silverlight)

The 10 SessionsNext 5 – To Do – Webforms

The web

HyperText Markup Language

Describes a web page

http://en.wikipedia.org/wiki/HTML

HTML

<html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body></html>

Hypertext Transfer Protocol

Request – Response

http://en.wikipedia.org/wiki/Http

HTTP

GET /index.html HTTP/1.1 Host: www.example.com

HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Content-Length: 438 Content-Type: text/html; charset=UTF-8

ServerClient

TheInternet

Internet

HostingComputer

YourComputer

How a web page is shown

Request / Response

ServerClient

TheInternet

Response

HTML

Request

www.ssw.com.au

Files

IL = Intermediate Language

CLR = Runtime

.NET Overview

CLR Common Language Runtime

= Virtual machine

What Is ASP.NET?ASP.NET provides a complete environment for building, deploying, and

running .NET Web applications.

Developer Productivity

Simplified page development model Target any Web client (PC or mobile device) Modular, well-factored, extensible architecture Superior debugging and tracing support

Enhanced Performance, Scalability, and Reliability

Compiled, not interpreted Rich caching support Web farm scalable session state Automatically detects and recovers from errors

Simple Deployment and Configuration

No need to bring down Web server Deploy and upgrade running applications with XCOPY XML configuration files

1. User requests an application resource from the Web server.

2. IIS forwards the call to ASP.NET’s process

3. Application manager calls the Application domain & Processes the page.

ASP.NET Page Request

Evolution

The whole .NET FX

http://shrinkster.com/1515

.NET Framework

Response (HTML/js/dhtml/etc…)

PageClass

Instantiate, process and render

ASP.NET Compilation

Gen’dPageClassFile

Generate

Instantiate

Parse ASPXEngine

ASPXFile

Request

Request

Code-behindclassfile

2 Types of Projects – 1 – Web Site

Web Site Don’t use this, here for compatibility only

File > New > Web Site Each page is dynamically loaded into memory Slow on first load after deployment No need to recompile for code change

2 Types of Projects – 2 – Web Application

Web Application - Recommended

File > New > Projects, then Select Web Application Compiles all pages into one DLL Faster on first load after deployment Must recompile whole site for code change Not available in Default VS 2005, requires SP2

Response (HTML/js/dhtml/etc…)

PageClass

Instantiate, process and render

ASP.NETCompilation

Gen’dPageClassFile

Generate

Instantiate

Parse ASPXEngine

ASPXFile

Request

Request

Code-behindclassfile

Web Site

Response (HTML/js/dhtml/etc…)

PageClass

All pre compiled!

ASP.NETCompilation

Gen’dPageClassFile

Generate

Instantiate

Parse ASPXEngine

ASPXFile

Request

Request

Code-behindclassfile

Web Application

The Page

An ASP.NET Web page consists of two parts:

1. Visual elements, which include markup, server controls, and static text.

2. Programming logic for the page, which includes event handlers and other code.

ASP.NET –Page/Web Form

Things to Notice

ASP.NET – Page/Web Form

Things to Notice Page Directive

ASP.NET – Page/Web Form

Things to Notice Page Directive Server side code

ASP.NET – Page/Web Form

Things to Notice Page Directive Server side code Form

ASP.NET – Page/Web Form

Things to Notice Page Directive Server side code Form Normal HTML Structure

ASP.NET – Page/Web Form

Things to Notice Page Directive Server side code Form Normal HTML Structure Server Controls

ASP.NET – Page/Web Form

ASP.NET – Page Code Model

ASP.NET provides two models for managing the visual elements and code:

The Single-File Page Model<%@ Page Language="VB“><script runat=“server”> … </script>

The Code-Behind Page Model <%@ Page Language="VB“

CodeFile="SamplePage.aspx.vb“

Inherits="SamplePage“AutoEventWire="false" %>

A Page's Life

1. Page request

2. Start

3. Page Initialization

4. Load

5. Validation

6. Postback Event handling

7. Rendering

8. Unload

http://msdn.microsoft.com/en-us/library/ms178472.aspx

ASP.NET – Page Life Cycle Stages (SILVER-U)

Occurs before the page life cycle begins.

When the page is requested by a user

ASP.NET determines whether the page needs to be parsed and compiled (therefore beginning the life of a page), or if a cached version of the page can be sent in response without running the page.

ASP.NET – Page Life Cycle Stages (SILVER-U) 1) Page request

Page properties set Request and Response

Determines whether the request is a postback or a new request and sets the IsPostBack property.

Sets the page's UICulture property

ASP.NET – Page Life Cycle Stages (SILVER-U) 2) Start

Controls on the page are available Each control's UniqueID property is set. Themes are applied to the page. If the current request is a postback,

the postback data has not yet been loaded and control property values have not been restored to the values from view state.

ASP.NET – Page Life Cycle Stages (SILVER-U) 3) Page Initialization

If the current request is a postback, control properties are loaded with information recovered from view state and control state.

ASP.NET – Page Life Cycle Stages (SILVER-U) 4) Page Load

The Validate method of all validator controls is called Sets the IsValid property of

Individual validator controls The page

ASP.NET – Page Life Cycle Stages (SILVER-U) 5) Page Validation

If the request is a postback, Event handlers are called

ASP.NET – Page Life Cycle Stages (SILVER-U) 6) Postback Event Handling

Before rendering, view state is saved for the page and all controls.

During the rendering phase, the page calls the Render method for each control, providing a text writer that writes its output to the OutputStream of the page's Response property.

ASP.NET – Page Life Cycle Stages (SILVER-U) 7) Page Rendering

Unload is called after the page has been: Fully rendered, Sent to the client, and Is ready to be discarded.

At this point, page properties such as Response and Request are unloaded and any cleanup is performed.

ASP.NET – Page Life Cycle Stages (SILVER-U) 8) Page Unload

1. Page request

2. Start

3. Page Initialization

4. Load

5. Validation

6. Postback Event handling

7. Rendering

8. Unload

http://msdn.microsoft.com/en-us/library/ms178472.aspx

ASP.NET – Page Life Cycle Stages (SILVER-U)

Postback & ViewState

Click icon to add chart

ASP.NET Postbacks

A Page Postback is:

Where the client communicates back to the server,

Through the page that was originally served.

The post back is a submission of the Form element.

Click icon to add chart

ASP.NET Viewstate

Page ViewState

Allows the state of objects (serializable) to be stored in a hidden field on the page.  

ViewState is transported to the client and back to the server,

Is not stored on the server or any other external source.  

ViewState is used to retain the state of server-side objects between postbacks.

So program can see if values have changed

Server states

Click icon to add chart

ASP.NET States

Session State – allows the state of objects (serializable) to be stored for a single session (lifetime of the user’s browser or specific timeout)

Application State – allows the state of objects (serializable) to be stored for the application across different sessions.

Server controls

ASP.NET – Server Controls

Server controls are tags that are understood by the server.

Syntax:

<asp:control_name id="some_id" runat="server" />

Example:

<asp:Button

id="button1"

Text="Click me!"

runat="server"

OnClick="submit" />

Demo

How to create a web application

How to create a web form

Designer Features

Different Page Code models

Postbacks

Viewstate, Session State, Application State

User controls

Click icon to add chart

ASP.NET User Controls

A group of server controls that are created by the user.

Encapsulates certain functionality

Can be used on multiple pages

E.g Address User control (in your lab)

Contact User Control

ASP.NET Configuration

Click icon to add chart

ASP.NET Configuration

Web.Config

Similar to app.config in windows

Application-wide configuration

Provide application settings

In XML, so it’s easy to change

Who is the Master?

Click icon to add chart

ASP.NET 2: Master Pages

Master pages new concept in ASP.NET 2.0

Allows site developers to build master templates for their site's look and feel

Put common code shared by all the pages on the master page

A page that references a Master Page is called a Content Page.

ASP.NET 2: Master Pages

Click icon to add chart

How to define the Master page

At the page level (in the page)

<%@ Page Language="C#“ MasterPageFile="MySite.Master"

%>

At the application level (in web.config)

<pages masterPageFile="MySite.Master" />

Validation

ASP.NET: Validation

A Validation server control is used to validate the data of an input control. If the data does not pass validation, it will display an error message to the user.

Important Properties:

ControlToValidate: The ID of the control that this validator validates.

Display: Has three possible values:

Dynamic space the control uses isn’t reserved for the control Static space control uses is always reserved None control is invisible

EnableClientScript: Validation occurs on the Client’s Browser (default).

Text: Displayed when validation fails; often used to put an asterisk or an icon next to the error or for displaying the error message in a validation summary.

ASP.NET: Validation

Themes & Skins

ASP.NET 2: Themes & Skins

What is a theme?

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

A theme contains:

skins, cascading style sheets (CSS), images, and other resources

ASP.NET 2: Themes & Skins

What is a skin file?

A skin file has the file name extension .skin

Belongs to a certain theme

Contains property settings for individual controls

Contains settings for server controls only

ASP.NET 2: Themes & Skins

For Example:

<asp:button ID=“btnNew”

With css (before skin files were around):

<asp:button ID=“btnNew”

runat=“server”

cssclass=“blueBlackButton”/>

.blueBlackButton {

Background:lightblue;

Color:Black; }

ASP.NET 2: Themes & Skins

But with Skins, you let the skin do the design work.

In the page:

<asp:button ID=“btnNew”

runat="server" />

In the Skin file:

<asp:button runat="server"

BackColor="lightblue"

ForeColor="black" />

ASP.NET 2: Themes & Skins

So, when do we use css files?

When you need to style non-server controls, because skin files are only for asp.net controls.

Theme File Structure

MyWebSite

> App_Themes

> BlueTheme

> Controls.skin

> BlueTheme.css

> PinkTheme

> Controls.skin

> PinkTheme.css

Applying Themes

Apply a theme to a Web site

<configuration> <system.web>

<pages theme="ThemeName" /> </system.web>

</configuration>

Apply a theme to an individual page

<%@ Page Theme="ThemeName" %>

Done

So who thinks Win forms are better than web forms?

Firebug

http://getfirebug.com/

ASP.NET Webforms

http://www.asp.net/web-forms/

ASP.NET MVC

http://www.asp.net/mvc/

Resources

ASP.NET AJAX

http://www.asp.net/ajax/

Ramp up your skills

http://msdn.microsoft.com/rampup

Resources

Quickstarts

http://quickstarts.asp.net/

Master pages

http://www.asp.net/learn/master-pages/

Profiles, Themes and user controls

http://www.asp.net/learn/moving-to-asp.net-2.0/module-10.aspx

Page lifecycle

http://www.asp.net/learn/videos/video-6558.aspx

Resources – ASP.NET

Validation

http://quickstarts.asp.net/QuickStartv20/aspnet/doc/validation/default.aspx

Configuration & Deploying

http://www.asp.net/learn/videos/video-05.aspx

User controls

http://www.asp.net/learn/videos/video-194.aspx

Resources – ASP.NET

Silverlight Designer and Developer Network

http://www.sddn.org.au/

Sydney Deep .NET User Group

http://www.sdnug.org/

Newcastle Coders Group

http://www.ncg.asn.au/

Sydney .NET Users Group

http://www.ssw.com.au/ssw/NETUG/Sydney.aspx

Resources - Usergroups

3 things…

PeterGfader@ssw.com.au

http://peitor.blogspot.com

twitter.com/peitor

Thank You!

Gateway Court Suite 10 81 - 91 Military Road Neutral Bay, Sydney NSW 2089 AUSTRALIA

ABN: 21 069 371 900

Phone: + 61 2 9953 3000 Fax: + 61 2 9953 3105

info@ssw.com.auwww.ssw.com.au