Introduction to .NET and ASP.NET
Framework
Mauro Minella
[email protected]
http://blogs.msdn.com/mauromi
Microsoft Certified Solutions Developer
Microsoft Certified Systems Engineer + Internet
Politecnico di Torino
December 4th , 2007
Agenda
.NET Framework: architecture
WEB extension: ASP.NET 2.0
Development Tools: Visual Studio 2008
Membership: roles and controls
Localization, Master Pages, Skins and Themes
AJAX
Demo’s/Examples
From HTML to ASP.NET
ASP.NET
HTML
ASP pages
CGI apps
ISAPI filters
.NET and ASP.NET architecture
Win32 SDK
.NET Framework
ASP.NET
Unmanaged Windows Managed Applications WEB Managed Applications
(Win Forms, Console, Services, ...)
(WEB Forms / WEB Services)
Applications
Base Class Library
Base Class Library
Common Language
Common
Runtime
Language Runtime
WEB Server (IIS)
Sistema Operativo (Windows)
CLR
Class Library
WEB Forms
WEB Services
interoperability, security, garbage collection, versioning, ...
GUI, collections, threads, networking, reflection, XML, ...
Web GUI (object-oriented, event-based, browser-independent)
Distributed services over RPC (SOAP, HTTP)
.NET FRAMEWORK PROGRAMMING
Binary compatibility for all languages
Isolated code (only to allowed memery access)
Codice type-safe (no buffer overrun)
Just-in-time compiler
C#
C++
VB
J#
...
C#
if (a > b) max = a; else max = b;
IL
compiler
compiler compiler compiler
IL code
(+ metadata)
compiler
IL_0004:
IL_0005:
IL_0006:
IL_0008:
IL_0009:
IL_000a:
IL_000c:
IL_000d:
ldloc.0
ldloc.1
ble.s IL_000c
ldloc.0
stloc.2
br.s
IL_000e
ldloc.1
stloc.2
loader
verifier
JIT compiler
machine code
Intel code
mov ebx,[-4]
mov edx,[-8]
cmp ebx,edx
jle 17
mov ebx,[-4]
mov [-12],ebx
...
Indipendence from platform and code langauge
.NET is a CLI implementation
Common Language Infrastructure
CLI is an ECMA standard, defined with the C#
ECMA-334, ECMA-335
Existing CLI implementations:
SSCLI (Microsoft per Windows, FreeBSD and Macintosh)
Mono (for Linux)
DotGNU
Intel OCL (Open CLI Library)
…
ViewState
• Keeps the state at Page level
▫ It’s a name/value dictionary
• It’s a Hidden field of the page
• Can also be used programmatically
▫ ViewState.Add(“NomeUtente”, “Mauro”)
• Can be disabled at page level
▫ <%@ Page ... EnableViewState="false"%>
▫ Be aware: some controls might not work any more!
PostBack
Tipical usage: code optimiza-
tion for accessing hi cost
(like DB) resources just once
protected void Page_Load(..)
{
if(Page.IsPostBack == false)
{
// It’s the first access
// Let’s open the DB connection!
}
}
IsPostBack property is true since second time on
Page_Load happens when
Button Submit
Server-side controls with enabled AutoPostBack
Can be used to initialize controls
DEMO
Let’s build our first ASP.NET application!
Development Tool: Microsoft Notepad
A .aspx page tipically has 3 sections:
Page directives: environment setup, controls
registration, assemblies load if not in GAC,
namespace registration, code language declaration
Code section: server side business logic; can be
in-lin or separated
Page layout: page scheleton, including server side
controls, text, HTM tags
Let’s build our first application (cont.)
Create an empty.ASPX file
Prepare scheleton
Add controls
 Make controls server-side
 ASP.NET runtime parses the page and creates
instances of .NET framework classes for every
control where runat = “server”
 Add:
Click even handler: OnServerClick="MakeItUpper"
Chosen Language: <% @Page Language="C#"%>
C#, VB o C++ code (which is not sent to the client!)
Introduction a Visual Studio / VWD
• Free download from Microsoft website
http://www.microsoft.com/italy/msdn/prodotti/vs2005/editions/download/wdd.mspx
• Let’s explore the IDE
• Let’s create a Web Site
• Controls and base features
▫ Server-side controls whose output depends on client
• Diagnostics page life cycle
Controls
Controlli HTML:
Standard HTML
<a >..., <label>...
Server-side controls
Generated HTML depends on browser
They are tens!! Let’s look at some of them…
Validators
 Server-side controls to validate input
 They check if the browser supports client-side validation and in this case send
JScript to it
RequiredFieldValidator
ValidatorSummary
RangeValidator
RegularExpressionValidator
CompareValidator
CustomValidator (can also be used
to send a JS function back)
Demo
Validators
Debugging (Server-side)
Enabled within the web.config file
Debugging (Javascript)
A few more steps:
Use browser settings: Tools – Internet Options - Advanced
You can run debugger from IE and then set a breakpoint on
javascript code
Or from Visual Studio “attach to process” to IE process
Not supported on “Express” versions
“Trick”: “debugger;” instruciton in the JS code
Remember not to leave in production!
server-side vs. client-side:
OnServerClick  OnClick (you can have both!)
<script runat="server"> 
<script language="javascript" type="text/javascript">
Linguaggio vb.net/c#/c++/j#/f#/cobol.net/…  javascript syntax
Il postback happens only if the function returns TRUE
Pagina Life Cycle (hi level view)
PreInit: use it to:
Check IsPostBack property
Create dynamic controls
Apply themes and master pages dynamically
Read/write user profiles
Init: read and initialize control properties
Load: read and update control properties
PreRender: change page contents
UnLoad: fianal closing tasks
Tracing
Can be enabled in the web.config or on page level
 pageOutput enables output to page or by using trace
<trace enabled="true" pageOutput="false" />
<%@ Page Language="C#" ... Trace="true"%>
In you need to write a trace information:
Trace.Write (categoria, messaggio,
eccezione);
Trace.Warn (categoria, messaggio,
eccezione);
Trace.Write (messaggio);
...
Trace example
Membership, roles
and log-in controls
Authentication and Permissions
Authentication: scenarios
Identify who is accessing our web site
Two tipical scenarios:
Intranet: can leverage integrated server control
access
e.g. IIS uses Integrated Authentication
Tipically, users are hosted within the Active Directory
Users do not need to provide credentials explicitly
Internet:
can leverage a database to store users and permissions
Users must provide username and password
Authentication: an extensibile model
Controls
Un modello estendibile
Login
LoginStatus
LoginView
Other Login
Controls
Membership API
Membership
MembershipUser
Membership Providers
AspNetSqlMembershipProvider
Membership
Data
SQL Server
Other Membership
Providers
Other
Data Stores
Log-in controls
Interact with a provider for membership management
Login: allows to do a login providing username + pwd
LoginView: allows different content for authenticated
and not-authenticated users
PasswordRecovery: leverage the secret question to
regenerate password
LoginStatus: to check is the user is logged or not
LoginName: provides the current logged user
ChangePassword: to change password
CreateUserWizard: to save time in writing lot of code!
Using Web Site Administration tool (WSA)
Parameters are stored in the web.config file
Authentication type
SMTP server, tracing, debugging, errors, ...
Users handler
Create, Delete, Update ...
Roles and access rules management
Folder by folder
Provider configuration to access database
Can be used through a 7-steps Wizard
WSA: Security section
Membership API by code
MembershipCreateStatus ms;
MembershipUser user=Membership.CreateUser(
“mauro",
“Password1!",
“[email protected]",
“Colore preferito?",
“Blu",
true,out ms);
if (user==null)
Label1.Text = "Non è possibile creare un utente";
else
Label1.Text = "Utente creato";
if (Membership.ValidateUser(username.Text, password.Text))
FormsAuthentication.RedirectFromLoginPage(username.Text, false);
else
Label1.Text = "Username e password non corretti";
Demo
Web Site Creation:
Leverage integrated controls
Login, LoginName and LoginStatus
controls
Leverage WSA to create users and groups
Leverage IIS Manager to configure WEB
server
Localizzazione, Temi, Skin
e Pagine Master
Come creare una grafica del sito
omogenea e consistente
Localizzazione
Usa file di risorse selezionati a run-time da ASP.NET
Due cartelle:
 App_LocalResources: i file contengono risorse per una singola pagina
 App_GlobalResources: i file possono essere letti da qualsiasi pagina del sito Web
Indicazione della localizzazione nelle direttive di pagina
- UICulture="auto"
Naming convention per la pagina:
- linguaggio neutrale: pagina.aspx.resx
- linguaggio specifico (es. italiano): pagina.aspx.it.resx
Naming convention per le risorse:
- meta:resourcekey="ResourceXYZ" nelle proprietà controllo (tag HTML)
- Name=ResourceXYZ.<Proprietà> e Value=Valore nei file <page>.resx e
<page>.<language>.resx
Impostare nel browser del client lingua e priorità
Tipi di risorse: stringhe, immagini, audio, file, icone, altro
DEMO
Temi (CSS e Skin)
Definiscono la grafica della pagina
Sono un superset dei CSS (Cascading Style Sheets)
Sono disponibili solo in ASP.NET 2.0
Assegnano un insieme di stili e attributi visuali agli
elementi personalizzabili del sito
Sono strettamente legati ai temi di XP: impostare un
tema è rapido e facile come impostare una proprietà
Si applicano controlli individuali, pagine o siti
Creazione di CSS
Si usa un tool integrato nell’ ambiente, che si attiva dal
menu “Stili” dopo avere aggiunto un file CSS
File di Skin - esempio
▫ Creo una cartella per ogni stile sotto App_Themes
▫ Creo un file per ogni skin nella cartella creata sopra
▫ In fondo ad ogni file .skin: <asp:label runat="server"
backColor= "Green" SkinID="lblTitolo"/>
▫ Definisco uno SkinID altrimenti lo skin viene applicato a
tutti i controlli di quel tipo, e lo seleziono nelle proprietà
▫ Imposto lo skin nella direttiva
di pagina StylesheetTheme
▫ Seleziono lo SkinID per il controllo
▫ DEMO
Pagine Master
Content Page
Pagine master
Le pagine master definiscono la struttura e i
placeholder (<asp:ContentPlaceHolder>)
Le pagine “figlie” referenziano la master e creano
il contenuto (<asp:Content>)
Le pagine master sono trasparenti all’utente, il
quale invoca solo le pagine content
Site.master
<%@ Master %>
<asp:ContentPlaceHolder
ID="Main"
RunAt="server" />
default.aspx
<%@ Page MasterPageFile=“MasterPage.master" %>
<asp:Content
ContentPlaceHolderID=
"Main" RunAt="server" />
</asp:Content>
http://.../default.aspx
La proprietà Page.Master
Ottiene un riferimento alla pagina
master dalla pagina figlia
Usata per avere accesso
programmatico al contenuto della
pagina master
Usare FindControl per weak typing
Usere public property nella master page
per strong typing
ASP.NET AJAX
Concetti e fondamenti
AJAX
• Che cos’è e come funziona
• Da dove partire
• AJAX ASP.NET Extensions 1.0
• XMLHttpRequest : la base
• AJAX Control Toolkit
• AJAX Futures CTP
Cos’è AJAX?
• AJAX = Asynchronous JavaScript and XML
▫ Una nuova tecnica per lo sviluppo di applicazioni web
• Risolve molti dei problemi che affliggono le moderne
applicazioni web
▫ Elimina il “flickering” delle pagine
• Usa XmlHttpRequest per recuperare dati dal server
in modo asincrono e il JavaScript per aggiornare il
contenuto della pagina
• Nasce con OWA (Outlook Web Access)
• Tecnologia abilitante per il Web 2.0
AJAX: Come funziona?
1
Il browser invia una richiesta HTTP al server
2
Il server restituisce il contenuto.
Il browser ne fa il rendereing
3
IL browser invia una richiesta
asincrona XML-HTTP al server. La
UI non si blocca e non ha effetti
di flickering
Browser
4
La richiesta XML-HTTP si conclude.
Il JavaScript aggiorna la porzione
della pagina interessata
Web Server
XmlHttpRequest
• Introdotto nel 1999 con Internet Explorer 5
▫ Oggetto ActiveX per le chiamate di callback dal Web
server
▫ In IE 7 fa parte del modello ad oggetti del browser
• Successivamente adottato da Firefox, Safari e altri
▫ In via di standardizzazione dal W3C
 http://www.w3.org/TR/XMLHttpRequest/
• Supportatato oggi da circa il 99% dei browser
▫ Circa 85%-95% hanno abilitato il JavaScript
Instanziare XmlHttpRequest
var xhr = null;
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
if (typeof XMLHttpRequest != "undefined") {
xhr = new XMLHttpRequest();
}
}
Verifica supporto AJAX per il client
xhr.open ('GET', 'AjaxDemo.aspx?mode=ajax', true);
xhr.onreadystatechange = checkForCompletion;
xhr.send ();
...
function checkForCompletion()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
window.alert(xhr.responseText);
}
}
Che cos’è Microsoft ASP.NET AJAX ?
Un FRAMEWORK per realizzare applicazioni WEB,
interattive e dalla ricca interfaccia utente
Facilita lo sviluppo di applicazioni AJAX
Estende e completa ASP.NET 2.0
Anche se può essere usato con PHP
Multi-browser
Estendibile
Microsoft AJAX: i componenti base
ASP.NET 2.0
AJAX Futures
CTPs
ASP.NET
AJAX Toolkit
Server Side
Client Side
ASP.NET 2.0
AJAX
Extensions
Microsoft AJAX
Library
• Supporto Microsoft
standard per le ASP.NET 2.0
AJAX Extension
• Supporto della comunity
per le Futures CTPs ed il
Toolkit.
AJAX: da dove partire
Componenti essenziali di AJAX ASP.NET
Contengono:
-Template AJAX per VS/WD 2005
-Controlli
lato server community
-Progetto
share-source
--Ajax
Estendono
la(JavaScript
piattaformalato
core
client)
-EsempiLibrary
già pronti
- Richiedono le ASP.NET 2.0 AJAX Extensions 1.0
-SDK per la creazione di nuovi controlli
- Aggiungono funzionalità come
-Richiede ASP.NET Extensions
- Drag-and-Drop
- XML Script
- etc
-Possono essere utilizzate
anche con server non MS
-Fanno parte di ASP.NET
Extensions
Microsoft AJAX Library
• La parte client di ASP.NET 2.0 AJAX
▫ Tipicamente installata in “%ProgramFiles%\Microsoft
ASP.NET\ASP.NET 2.0 AJAX
Extensions\v1.0.61025\MicrosoftAjaxLibrary”
• Indipendente dal browser e dalla piattaforma
▫ Internet Explorer, Firefox, Mozilla, Safari, etc.
▫ Si astrae dalla piattaforma sottostante
• Un JavaScript “arricchito”
▫ Namespaces, classi, interface, ereditarietà, etc.
▫ Un sistema dei tipi
• File *.js scaricati una sola volta sul client
ASP.NET AJAX 2.0 Extensions
UpdatePanel
• È il controllo ASP.NET AJAX più importante
• Consente di trasformare facilmente una
applicazione ASP.NET 2.0 in un’applicazione AJAX
• Permette di fare il rendering di parte della pagina
▫ Converte postbacks in chiamate asincrone
▫ Aggiorna parte della pagina web con il risultato
▫ Non si scrive JavaScript
Passo 1
Aggiungere lo ScriptManager
Aggiungere ad una pogina aspx:
<asp:ScriptManager ID="MyScriptManager" Runat="server" />
Lo ScriptManager genera:
<script src="/.../WebResource.axd?d=iQ15p6LHcT2T5QE..."
type="text/javascript"></script>
Riferimento allo script .js da scaricare
Passo 2
Usare un UpdatePanel
<asp:ScriptManager ID="..." Runat="server"
EnablePartialRendering="true" />
.
.
.
<asp:UpdatePanel ID="..." Runat="server">
<Triggers>
<!– Se necessario definire dei trigger-->
</Triggers>
<ContentTemplate>
<!– Il contenuto va qui -->
</ContentTemplate>
</asp:UpdatePanel>
Update Panel
Estendiamo la piattaforma ASP.NET
ASP.NET AJAX Control Toolkit
• Aggiunge nuovi controlli server ad ASP.NET AJAX
• Template per la realizzazione di nuovi Extender
• Sviluppato in collaborazione con la community, in
Shared Source
Da dove partire - 1
Da dove partire - 2
Da dove partire - 3
AJAX Control Toolkit
Estendiamo la piattaforma ASP.NET
ASP.NET AJAX Futures CTPs
• Estende la piattaforma core
• Richiede le ASP.NET 2.0 AJAX Extensions 1.0
• Aggiunge funzionalità
▫ Drag-and-Drop
▫ XML Script
▫ etc
Quindi ...
• AJAX = Asynchronous JavaScript and XML
▫ Applicazioni web più ricche ed interattive
• ASP.NET AJAX = Framework per lo sviluppo con AJAX
▫ Microsoft AJAX Library (client-side framework)
▫ ASP.NET 2.0 AJAX Extensions (server-side framework)
• ASP.NET AJAX è…
▫ Ottimizzato per l’uso su internet
▫ Supporta numerosi browser
▫ Compatibile con PHP, ColdFusion ed altre piattaforme
• Per lo sviluppo di applicazioni web nei prossimi anni
• Estende ed arrichisce la piattaforma Web
▫ da ASP.NET 2.0 a ASP.NET 2.0 AJAX Extensions
Link utili
• About Native XMLHTTP
▫ http://msdn.microsoft.com/library/default.asp?url=/workshop/author/d
html/overview/aboutxmlhttp.asp
• Sito ufficiale ASP.NET AJAX
▫ http://ajax.asp.net
• Blogs:
▫ http://weblogs.asp.net/scottgu
▫ http://www.nikhilk.net
Q&A
[email protected]