kako do bogatejše spletne izkušnje z asp.net ajax

Kako do bogatejše spletne izkušnje z ASP.NET AJAX

Dušan Zupančič, MVP [ASP.NET]

O predavatelju … Dušan Zupančič

Zaposlitev: Cetis d.d. – CeNT (Cetis Nove Tehnologije)vodja svetovanja

E-pošta: [email protected] Blog: http://dusanz.gnarus.org/

2

AGENDA Web 2.0 in AJAX AJAX tehnologije komponente ASP.NET AJAX

ASP.NET AJAX Extensions 1.0 ASP.NET AJAX Control Toolkit ASP.NET AJAX Library ASP.NET AJAX Futures

Razhroščevanje ASP.NET AJAX rešitev Varnost AJAX rešitev

3

Web 2.0 in AJAX

Kako deluje klasična spletna rešitev

Zahtevek

5

Dobri, slabi in grdi (pri spletnih rešitvah) Dobro

Centraliziran nadzor nad delovanjem rešitve

Ni težav z nameščanjem Slabo

Rešitev se izvaja v okviru brskalnikovega “peskovnika” (varnost)

Manjkajo določene bogate uporabniške izkušnje, ki smo jih navajeni s “težkih” odjemalcev

Samo en način, da pridemo do svežih podatkov: osvežitev strani (postback)

Grdo Kompatibilnost med brskalniki

6

Vendar uporabniki želijo več ...

7

Več interakcije Več možnosti Večjo odzivnost

Skratka, želijo si da bi bile spletne aplikacije bolj podobne namiznim

Web 2.0 Nova generacija storitev na spletu zajema:

Tehnologijo za bogate spletne aplikacije (npr. AJAX)

CSS (Cascading Style Sheets) XHTML RSS / ATOM Čiste in pomenske URL naslove Spletne dnevnike (Weblog) Hibridne spletne aplikacije (mashup) Spletne protokole REST in SOAP

Poskus standardizacije uporabljanih tehnologij

8

Kako lahko pomaga AJAX? Obdržimo vse dobre lastnosti lahkega

odjemalca

Pridobimo nekatere zmožnosti, ki smo jih navajeni s težkih odjemalcev

Do svežih podatkov lahko pridemo brez osveževanja celotne strani

9

DEMO – Primer AJAX spletne strani

10

AJAX tehnologije

Kaj je AJAX? Asynchronous Javascript and XML Skovanka, ki jo je prvič javno uporabil Jesse James Garrett v

svojem eseju objavljenem Februarja 2005 na: http://www.adaptivepath.com/publications/essays/archives/000385.php

Razvijalski vzorec, ki vključuje širok nabor obstoječih tehnologij: Standardiziran prikaz s pomočjo XHTML in CSS Dinamičen prikaz preko DOM Izmenjava in manipulacija podatkov s pomočjo XML (ali z JSON)

in XSL-T Asinhrono pridobivanje podatkov s pomočjo XmlHttp ... in JavaScript, ki vse skupaj povezuje v celoto

AJAXJavaScript

XMLXHTML

CSS

DOM

XMLHTTP

Objekt XmlHttpRequest Prvič se pojavi leta1999 z brskalnikom Internet

Explorer 5 ActiveX objekt, ki podpira asinhrone klice na spletni

strežnik V prvi fazi narejen predvsem za Outlook Web Access

(OWA) Pozneje so ga posvojili Firefox, Safari in ostali

brskalniki Implementiran kot domoroden objekt

(XMLHttpRequest) in ne kot ActiveX V postopku standardizacije s strani W3C

http://www.w3.org/TR/XMLHttpRequest/

Je glavna tehnologija, ki omogoča AJAX13

Delo z XmlHttpRequest

14

1. Instanciranje objekta XmlHttpRequest

2. Odpiranje HTTP povezave

3. Nastavljanje glav

4. Pošiljanje zahtevka

5. Asinhrona obdelava rezultata poizvedbe

XmlHttp: instanciranje V odvisnosti od uporabljenega brskalnika se

objekt XmlHttpRequest instancira različno:

var xmlHttp = null;function loadXmlHttp() { if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, itd. xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 5.x in 6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }}

15

XmlHttp: pošiljanje zahtevka

function sendRequest(url) { if (xmlHttp) { // povratna funkcija za asinhroni povratni klic// povratna funkcija za asinhroni povratni klic xmlHttp.onreadystatechange = onCallback; // Odpiranje HTTP povezave do url.// Odpiranje HTTP povezave do url. xmlHttp.open("GET", url, true); // true = asinhroni klic // nastavljanje glave klica// nastavljanje glave klica xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // pošiljanje zahtevka brez dodatnih parametrov// pošiljanje zahtevka brez dodatnih parametrov xmlHttp.send(null); // nastavljanje napisa// nastavljanje napisa document.getElementById('rezultat').innerHTML="Nalaganje"; }}

16

XmlHttp: obdelava rezultatafunction onCallback() { // Preverjanje ali je klic končan// Preverjanje ali je klic končan if (xmlHttp.readyState == 4) { // Je odgovor uspešen// Je odgovor uspešen if (xmlHttp.status == 200){ document.getElementById('rezultat').innerHTML

= xmlHttp.responseText; } else { // napaka HTTP// napaka HTTP alert('Napaka: ' + xmlHttp.status); } }}

17

DEMO 01: Uporaba XMLHttp “Končna točka”: PodatkiTekst.ashx Instanciranje in uporaba XMLHttp v DemoTekst.aspx

18

Click

InitInitLoad StateLoad State

Process Postback Process Postback DataData

LoadLoadCallback EventCallback Event

ICallbackEventHandlerICallbackEventHandler

Script Event Script Event HandlerHandler

Script CallbackScript Callback

TriggerAsync Request

Return result ofCallback

UnloadUnload

ASP.NET 2.0 in XML-HTTPClient Script Callback

ASP.NET 2.0 in XML-HTTPClient Script Callback ClientScriptManager.GetCallbackEventReference

Vrne ime JavaScript funkcije, ki izvede XML-HTTP zahtevek (sinhrono ali asinhrono)

Funkcije uporabljajo POST in pošljejo vsa polja v formi (vključno z __VIEWSTATE)

ICallbackEventHandler Vmesnik, ki ga implementirajo strani, ki so cilj povratnih

klicev ICallbackEventHandler.RaiseCallbackEvent je klican

najprej ICallbackEventHandler.GetCallbackResult je klican za

njim Skrije kompleksnost dela z XMLHTTP vendar še

vedno ostane precej dela20

Callback – odjemalski del (.aspx)<script type="text/ecmascript"> function LookUpStock(){ var lb = document.getElementById("ListBox1"); var product = lb.options[lb.selectedIndex].text; CallServer(product, ""); } function ReceiveServerData(rValue){ document.getElementById("ResultsSpan").innerHTML = rValue; }</script>

21

Callback – strežniški del (1/2) (.cs)public partial class ClientCallback : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler{ protected String returnValue; protected void Page_Load(object sender, EventArgs e) { String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context"); String callbackScript; callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + ";}"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true); }

22

Callback – strežniški del (2/2) (.cs)

public void RaiseCallbackEvent(String eventArgument){ if (catalog[eventArgument] == null) { returnValue = "-1"; } else { returnValue = catalog[eventArgument].ToString(); }}

public String GetCallbackResult(){ return returnValue;}

23

Demo: Client Callback

24

“Koristni tovor” v AJAXu

“Koristni tovor” v AJAXu so podatki, ki jih dobimo s pomočjo HTTP zahtevka

Ker gre pri AJAX-u za standarden HTTP zahtevek in odgovor je lahko vsebina poljubna (tekst, XML, HTML, JSON, …)

Najpogostejša tipa za prenosa podatkov sta: XML

Uveljavljen standard za prenos podatkov JSON

Enostavnejša deserializacija na odjemalcu (v JavaScriptu)

Primer XML paketa

<oseba><ime>Janezek Novak</ime><starost>11</starost><zivali>Reks</zivali><zivali>Pika</zivali>

</oseba><oseba><ime>Minka Novak</ime><starost>11</starost>

<oseba>

Uporaba spletne storitve z XMLHTTP

Dokaj pogost pristop k asinhronemu pridobivanju podatkov v AJAXu je uporaba spletnih storitev

Kako uporabiti spletno storitev v AJAX: Ustvariti je potrebno SOAP ovojnico in predati

parametre S pomočjo XMLHTTP poslati SOAP V rezultirajočem XML s parserjem poiskati rezultat

Kako do parametrov za klic spletne storitve

Glave sporočila SOAP Zahtevek

28

Ustvarjanje SOAP ovojnice// ustvarjanje SOAP ovojnicevar soapEnvelop = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";soapEnvelop+= "<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";soapEnvelop+= "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" ";soapEnvelop+= "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" >";soapEnvelop+= " <soap:Body>";soapEnvelop+= " <getTemperature xmlns=\"http://Cetis.si/TemperatureService\">";soapEnvelop+= " <city>" + city + "</city>";soapEnvelop+= " </GetTemperature>";soapEnvelop+= " </soap:Body>";soapEnvelop+= "</soap:Envelope>";

29

Pošiljanje zahtevka in obdelava rezultata

//lociranje rezultata v XML odgovoru in prikaz na stranivar xmldoc = xmlHttp.responseXML;var responseNode = xmldoc.getElementsByTagName("GetTemperatureResult").item(0);document.getElementById('rezultat').innerHTML = responseNode.text;

// nastavljanje glav sporočilaxmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","text/xml"); xmlHttp.setRequestHeader("SOAPAction", http://Cetis.si/TemperatureService/getTemperature");

// pošiljanje zahtevka s SOAP ovojnicoxmlHttp.send(soapEnvelop);

30

JSON: JavaScript Object Notation JSON = JavaScript Object Notation) Alternativa XML serializaciji vendar

“brez odvečnega ‘špeha’”

Na strani JavaScripta ni potrebe po parserju

[ { “ime”: “Janezek Novak”, “starost” : 11, “zivali”: [“Reks”, “Pika”] }, { “ime”: “Minka Novak”, “starost” : 11, }]

var name = eval("(" + paketJSON + ")");31

JSON : XML JSON uporablja JavaScript shemo za opis

podatkov

JavaScript ima samo en podatkovni tip – variant, tako da JSON ne hrani podatkovnega tipa

AJAX uporablja JSON za poenostavitev in pohitritev klicev na strežnik, vendar v določenih implementacijah še vedno najdemo XML (ali pa klice do XML spletnih storitev)

32

AJAX knjižnice

Knjižnice za delo za AJAX-om Delo neposredno z XMLHTTP je relativno

kompleksno, zato je nastalo precej AJAX knjižnic:

Prototype (http://www.prototypejs.org/ ) Ogrodje v JavaScriptu, ki olajša programiranje

AJAX rešitev Ajax.NET Pro (http://www.ajaxpro.info/ )

Ogrodje za ASP.NET 1.1 in 2.0

Microsoft ASP.NET AJAX (tema te delavnice)

In še mnogo drugih …34

Kje je smisleno razmisliti o ASP.NET AJAX? Strežniško okolje, ki uporablja Microsoft IIS.

> .NET 2.0.

Omejen prenos podatkov.

Majhne spremembe.

Omejena pasovna širina.

35

Slabosti Pri razvoju Javascripta v VS2005 ni Intellisense. Gumbek “Nazaj” (Back) Podpora za slabovidne Iskalniki Hramba stanja Manj zmogljivi brskalniki Razhroščevanje Javascripta Preveč nalog na odjemalcu.

Brskalniki so krhke “živalce”.

36

Komponente ASP.NET AJAX

Kaj je ASP.NET AJAX? Ogrodje za izgradnjo AJAX spletnih rešitev

Več platform, brskalniško agnostičen Zelo razširljiv

V grobem je razdeljen na dva dela Microsoft AJAX Library (ogrodje za odjemalce -

JavaScript) ASP.NET 2.0 AJAX Extensions (ogrodje za strežnik)

Strežniški del rešitve je tesno povezan z ASP.NET 2.0

Odjemalski del pa je mogoče uporabiti tudi v PHP, ColdFusion, itd.

38

Razvijalski scenariji Strežniško orientiran razvoj

Omogoča postopno uvajanje AJAX pristopa v obstoječe spletne rešitve

Bogatenje spletnih rešitev brez pisanja velike količina JavaScript kode

Omogoča, da večino logike obdržimo na strežniku (in ju napišemo v C#, VB.NET, …)

Odjemalsko orientiran razvoj Uporaba polne moči DHTML Omogoča bogatejšo uporabniško izkušnjo

39

Arhitektura ASP.NET AJAX

40

Sestavni deli ASP.NET AJAX

ASP.NET 2.0 AJAX Extensions Microsoft AJAX Library ASP.NET AJAX Control Toolkit ASP.NET 2.0 AJAX Extensions CTP

ASP.NET 2.0 AJAX Extensions

Microsoft AJAX Library(Podprti: IE, Mozilla, Safari, Opera 9)

ASP.NET 2.0ASP.NET 2.0

ASP.NET AJAX Control Toolkit

ASP.NET 2.0 AJAX Extensions CTP

Namestitev ASP.NET AJAX(http://ajax.asp.net/downloads)

42


ASP.NET AJAX Extensions 1.0

Asinhrono osveževanje dela strani

44

ASP.NET AJAX Extensions Strežniški kontrolniki

Script Manager Script Manager Proxy Update Panel Update Progress Timer

Strežniške razširitve Web Services Bridge

JSON serializacija Generiranje posrednika (proxy) v JavaScriptu

45

Arhitektura ASP.NET AJAX Extensions

46

Script Manager Ključna komponenta v ASP.NET AJAX Registrira AJAX Client Library Omogoča delno osveževanje strani (Update

Panel) Lahko ga uporabimo za registracijo lastnih

skript Script Reference

Za spletne storitve generira JS Proxy razrede Service Reference

47

ScriptManager Na vsakem AJAX

spletnem obrazcu potrebujemo le en ScriptManager

Skrbi za asinhrono komunikacijo med odjemalcem in strežnikom

48

Kontrolnik UpdatePanel Omogoča delno osveževanje strani in

kontrolnikov Samodejno prevede postbacke v asinhrone povratne

klice Samodejno osveži vsebino po povratnem klicu Ne zahteva poznavanja JavaScripta ali XmlHttp

Omogoča enostavno definiranje regij spletne strani za osveževanje Asinhroni dostop do osveženih podatkov na

strežniku ASP.NET AJAX poskrbi za vso potrebno infrastrukturo Na eni spletni strani lahko imate poljubno število

UpdatePanel kontrolnikov49

Življenjski cikel ASP.NET strani

PageRequestManager (v ScriptManagerju) se vključi v fazi PreRender() in zamenja metodo za izris strani Render() z metodo, ki izrisuje vsebino Update Panela.

50

Povratna informacija o osveževanju Kontrola <asp:UpdateProgress>

Omogoča nastavitev sporočila, ki naj se prikaže ob asinhronem osveževanju dela strani

V ProgressTemplate lahko vpišemo poljubno HTML besedilo

Večinoma dodamo sličico (animirani GIF). Nekaj zanimivih tovrstnih sličic najdete na: http://www.napyfab.com/ajax-indicators/ http://www.ajaxload.info/

51

UpdatePanel

UpdateMode:UpdateMode:• Always – samodejna posodobitev ob vsaki spremembi na straniAlways – samodejna posodobitev ob vsaki spremembi na strani• Conditional – posodobitev samo ob nastavljenih prožilcihConditional – posodobitev samo ob nastavljenih prožilcih

52

Kdaj se osveži vsebina UpdatePanel-a

UpdateMode nastavljen na “Always”: vsebina se osveži ob vsakem “postbacku”

UpdateMode nastavljen na “Conditional”: Če je postback zahteval prožilec (trigger) za ta

UpdatePanel Ob klicu metode “Update” na UpdatePanelu Če je UpdatePanel vgnezden znotraj drugega

UpdatePanela Če je lastnost ChildrenAsTriggers nastavljena na

True in katerakoli od kontrol povzroči “postback”

UpdatePanel pod pokrovom Client script prepreči normalno pošiljanje forme

Simulira post-back preko objekta XMLHttpRequest Pošlje vse vrednosti polj vključno z viewstate

En dodaten header za zahtevek delnega osveževanja Server normalno obdela post-back

Enak življenjski cikel strani kot pri navadnem post-back UpdatePanel-i ugotovijo če jih je potrebno osvežiti

Načina: Always in Conditional ScriptManager prevzame izrisovanje (rendering)

Samo vsebina UpdatePanela, ki jo je potrebno osvežiti Response vključuje posodobljen viewstate

Client script obdela “delta” odgovor Posodobi vsebino Posodobi skrite kontrolnike

UpdatePanel: Prožilci (Triggers) Vsi kontrolniki znotraj enega UpdatePanela

povzročijo osveževanje vsebine le tega (če so razlog za postback in je lastnost ChildrenAsTriggers = True)

Eksplicitno pa lahko določimo, da dogodek na poljubnem kontrolniku na spletni strani povzroči osvežitev določenega UpdatePanela s pomočjo prožilca : <asp:AsyncPostBackTrigger>

V kodi lahko poljubno kontrolo registriramo za asinhroni postback s pomočjo klicem metode RegisterAsyncPostBackControl na ScriptManagerju

55

UpdatePanel: Lastnost ChildrenAsTriggers Določa ali bo postback, ki ga sproži kontrola

na UpdatePanelu povzročil osvežitev UpdatePanela

56

Demo: Uporaba prožilcev za osveževanje

57

Vgnezdeni UpdatePaneli UpdatePanele lahko gnezdimo

in na ta način optimiziramo osveževanje

Če je UpdateMode=“Conditional”: Če kliknemo gumbek “Notranji”

se osveži samo UpdatePanel2 Če kliknemo gumbek “Zunanji”

se osvežita oba UpdatePanela

58

Osveževanje vsebine UpdatePanela iz kode Dinamično ustvarjenih kontrol ne moremo

podati deklarativno v času načrtovanja Takšne kontrole navedemo kot prožilce v kodi:

protected void Page_Load(){ ScriptManager1.RegisterAsyncPostBackControl(DinamicnaKontrola);

}

59

Demo: Dinamično določanje prožilca

60

Kontrolniki, ki niso kompatibilni z UpdatePanel Zaradi narave delovanja, določeni kontrolniki niso

primerni kot vsebina UpdatePanela (ali pa so primerni le pod določenimi pogoji): Treeview Menu WebPart kontrolniki FileUpload GridView in DetailsView, če imata nastavljeno lastnost

EnableSortingAndPagingCallbacks na true (privzeto je false)

Login, PasswordRecovery, ChangePassword in CreateUserWizard, če nismo njihove vsebine prej pretvorili v predloge (Editable template)

Substitution BaseCompareValidator, BaseValidator, CompareValidator,

CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, in ValidationSummary

61

Kontrolnik Login v UpdatePanelu Kontrolnik Login dodamo na formo Kontrolniku nastavimo želene lastnosti Kontrolnik spremenimo v predlogo (Convert to

Template) Vsem validacijskim kontrolnikom določimo

lastnost EnableClientScript na False

62

Napotki za uporabo UpdatePanela Zahtevki post-back so še vedno popolnoma enaki

(prenesejo se vrednosti vseh kontrolnikov) Inkrementalni pristop – ni potrebno spreminjati logike

programa En zahtevek naeknkrat Odgovori (response) so sicer manjši a zahtevki so še

vedno enake dolžine Razmislite katere uporabniške akcije naj sprožijo

osveževanje Optimizacija kaj naj se osveži in kdaj

UpdatePanele vedno postavite v način Conditional Za nadzor osveževanja uporabite prožilce (trigger) ali

pa metodo Update

Kratek kviz

Kratek kviz Steve Marx je v svojem blogu zbral nekaj

zanimivih primerov, ki dmeonstrirajo vedenje UpdateProgress-a pri različnih postavitvah UpdatePanela

http://smarx.com/posts/why-the-updateprogress-wont-display.aspx

65

Vprašanje 1: Kaj se zgodi ob kliku na gumbek <%@ Page Language="C#" %><script runat="server"> protected void sleep(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); } </script> <html> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"

UpdateMode="Conditional"> <ContentTemplate> <%= DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="Click Me!" OnClick="sleep" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server"

AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> Working... </ProgressTemplate> </asp:UpdateProgress> </form> </body> </html>

66

Odgovor 1Ta primer ilustrira normalno delovanje kontrolnika UpdateProgress.

Ko kliknemo na gumbek se sproži asinhroni klic, ki (zaradi pavze) traja 5 sekund in ta čas gori napis “working... “. Ob povratnem klicu se osveži vsebina UpdatePanela, napis pa ugasne.

67

Vprašanje 2: Kaj se zgodi ob kliku na gumbek <%@ Page Language="C#" %> <script runat="server"> protected void sleep(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); UpdatePanel1.Update(); }

protected void Page_Load(object sender, EventArgs e) { ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(Button1); } </script> <html><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate><%= DateTime.Now %> </ContentTemplate> </asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Click Me!" OnClick="sleep" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> Working... </ProgressTemplate> </asp:UpdateProgress>

</form> </body> 68

Odgovor 2V tem primeru se gumbek nahaja izven UpdatePanela. Da klik na gumbek sproži asinhroni klic, dosežemo s klicem metode RegisterAsyncPostBackControl(). In nazadnje, osveževanje UpdatePanela je doseženo s klicem metode Update.

Besedilo v UpdateProgress se v tem primeru ne prikaže.

Kaj se dogaja:1.Kliknem na gumbek2.Na brskalniku se UpdateProgress odloči ali naj se prikaže ali ne (obešen je na dogodek BeginRequest na PageRequestManager-ju)3.Izvede se asinhroni postback na strežnik4.Strežnik pošlje nazaj spremenjeno vsebino5.UpdateProgress se skrije, če je potrebno. (dogodek EndRequest)

V našem primeru UpdateProgress ne ve ali bo UpdatePanel s katerim je povezan osvežen ali ne. V našem primeru se osveži vsakokrat, a UpdateProgress tega ne more “vedeti”.

69

Vprašanje 3: Kaj se zgodi ob kliku na gumbek <%@ Page Language="C#" %> <script runat="server"> protected void sleep(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); } </script><html><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <%= DateTime.Now %> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel>

<asp:Button ID="Button1" runat="server" Text="Click Me!" OnClick="sleep" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> Working... </ProgressTemplate> </asp:UpdateProgress> </form> </body> </html>

70

Odgovor 3

V tem primeru je zopet gumbek zunaj UpdatePanel. Za asinhrono osveževanje UpdatePanela pa gumbek registriramo s pomočjo prožilca (trigger).

UpdateProgress se tudi v tem primeru ne prikaže.

Gre za primer podoben prejšnjemu. Zadeva pa dela v skladu z dokumentacijo, ki pravi:

You can associate the UpdateProgress control with a single UpdatePanel control by setting the progress control's AssociatedUpdatePanelID property. In that case, the UpdateProgress control displays a message only when a postback originates inside the associated UpdatePanel control.

71

Vprašanje 4:<%@ Page Language="C#" %> <script runat="server"> protected void sleep(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> <ContentTemplate> <%= DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="Click Me!" OnClick="sleep" /> </ContentTemplate> </asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate> Working... </ProgressTemplate> </asp:UpdateProgress> </form> </body> 72

Odgovor 4

Primer je skoraj identičen prvemu, le da je lastnost ChildrenAsTriggers="false". To pomeni, da se vsebina UpdatePanela ob kliku na gumbek ne bo osvežila.

Kljub temu pa se vsebina UpdateProgress-a izpiše za čas trajanja klica. Zakaj?

Logika za prikaz UpdateProgressa je enostavna. V bistvu se vpraša “Ali je kontrola znotraj UpdatePanela?”. In če je odgovor pritrdilen se UpdateProgress izpiše.

73

Konec kviza

Timer

V nastavljenih presledkih izvede asinhroni klic na strežnik

V primeru pogojnega osveževanja UpdatePanela je potrebno nastaviti prožilec na

75

DEMO: Uporaba timerja

76

Predloge strani in ScriptManager Na eni spletni strani je potreben le en

ScriptManager. Če se nahaja na predlogi (master page), na

izvedenih straneh ni potrebno dodati ScriptManagerja. Izvedene strani podedujejo nastavitve ScriptManagerja

77

ScriptManagerProxy

Če na predlogi strani (MasterPage) že obstaja ScriptManager, na podrejeni strani pa potrebujemo drugačne ali pa dodatne nastavitve ScriptManagerja, potem na spletnem obrazcu uporabimo ScriptManagerProxy

78

DEMO: UpdatePanel na predlogah

79

Klic spletne storitve iz JavaScriptaImports System.WebImports System.Web.ServicesImports System.Web.Services.Protocols

<WebService(Namespace:="http://MSDN2006.net/Demo1webService")> _<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _<Microsoft.Web.Script.Services.ScriptService()> <Microsoft.Web.Script.Services.ScriptService()> _Public Class DemoWebService Inherits System.Web.Services.WebService

<WebMethod()> _ Public Function VrniImeInUro(ByVal ime As String) As String Return ime & Date.Now.ToLongTimeString() End FunctionEnd Class

80

Preizkus ustvarjanja JSON JavaScript proxy kode

82

Kontrole na spletni strani

83

JavaScript koda<script language="javascript" type="text/javascript">// Dogodek ob kliku na gumb.function btnPoslji_Click(){ var objTxtIme = document.getElementById("txtIme"); DemoWebService.VrniImeInUro(objTxtIme.value, OnRequestCompleteOnRequestComplete);}

// Obdela dogodek, ob sprejemu rezultatov s spletne storitvefunction OnRequestCompleteOnRequestComplete(result){ // Prikaz rezultata. var RsltElem = document.getElementById("Rezultat"); RsltElem.innerHTML = result;}</script>

84

Demo: Asinhroni klic spletne storitve

85



86


87

AJAX kontrolniki in razširitve, na voljo preko CodePlexa

Zelo enostavno za obogatitev obstoječih spletnih strani (kot tudi za ustvarjanje novih)

Poznavanje JavaScripta pri uporabi ni potrebno

V spletno aplikacijo ga dodamo kot .dll, ki ga namestimo v podimenik bin

Preko Codeplexa je na voljo celotna izvorna koda, kar omogoča lastne izboljšave in odpravljanje morebitnih napak


88

Demo:AJAX Control Toolkit

89

Anatomija tipične komponente v toolkituExtenderExtender

[ClientScript(“…”)][TargetControlType(typeof(Control))]public class MyExtender :

ExtenderControlBase{

[ExtenderProperty]public string MyStringProp{}

[ExtenderProperty]public int MyIntProp{}

}

Anatomija tipične komponente v toolkitu

ExtenderExtender

[ClientScript(“…”)]public class MyExtender :

ExtenderBase<TextBox> {

// …}

BehaviorBehaviorMyProject.MyBehavior = function(e) { MyProject.MyBehavior.initializeBase(this, [e]); this._myStringPropValue = null; this._myStringIntValue = 0;}

MyProject.MyBehavior.prototype = { initialize function() { … }, get_MyStringProp : function(){}, set_MyStringProp : function(value){},

get_MyIntProp : function(){}, set_MyIntProp : function(value){}}




// …}

TThe ExtenderTThe Extenderhe Propertieshe Properties

public class MyExtenderProperties : PropertiesBase<TextBox>

{

public string MyStringProp{ … }public int MyIntProp{ … }

}

The BehaviorThe Behavior

AtlasControlToolkit.MyBehavior = function() { AtlasControlToolkit.MyBehavior.initializeBase(this); var _myStringPropValue;

this.initialize = function() { … }

this.get_MyStringProp = function(){} this.set_MyStringProp = function(value){}}

MarkupMarkup

<cc1:MyExtender runat=“server”

TargetControlID=“TextBox1”MyStringProp=“Hello” MyIntProp=“23”

</cc1:MyExtender>


The ExtenderThe Extender



// …}

The PropertiesThe Properties

public class MyExtenderProperties : PropertiesBase<TextBox>

{

public string MyStringProp{ … }public int MyIntProp{ … }

}

The BehaviorThe Behavior

AtlasControlToolkit.MyBehavior = function() { AtlasControlToolkit.MyBehavior.initializeBase(this); var _myStringPropValue;

this.initialize = function() { … }

this.get_MyStringProp = function(){} this.set_MyStringProp = function(value){}}

The MarkupThe Markup

<cc1:MyExtender runat=“server”>

<cc1:MyExtenderProperties

TargetControlID=“TextBox1”MyStringProp=“Hello” MyIntProp=“23”/>

</cc1:MyExtender>

KodaKoda

MyExtender ex1 = new MyExtender();ex1.MyStringProp = “Hello”;ex1.MyIntProp = 23;ex1.TargetControlID = “TextBox1”;Page.Add(ex1);

Ustvarjanje lastnega AJAX kontrolnika

94

CTP

95

96

Predogled zmožnosti, ki bodo na voljo skupaj z ORCAS

Možno jih je uporabljati, vendar ni uradne podpore s strani Microsofta


ASP.NET AJAX Library

Microsoft AJAX Library Odejmalska polovica ASP.NET AJAX Brskalniško agnostična in platformsko-agnostična

Internet Explorer, Firefox, Mozilla, Safari, itd. Možnost uporabe tudi v PHP in drugih platformah

Izboljšave JavaScripta s tipskim sistemom podobnim tistemu v .NET Imenski prostori, razredi, vmesniki (interface),

dedovanje, itd. Implementacija 100% v JavaScript

Vključuje ključne razrede (core) in base class library (BCL)

Nahaja se v datotekah *.js, ki se naložijo na odjemalca

Kako se naložijo skripte

<asp:ScriptManager ID="MyScriptManager" Runat="server" />

Napišemo tole:

<script src="/.../WebResource.axd?d=iQ15p6LHcT2T5QE..." type="text/javascript"></script>

ScriptManager pa generira naslednjo kodo:

Referenca na skriptno datoteko

Nadzor nad tem kaj naj se naloži

<asp:ScriptManager ID="..." Runat="server"> <Scripts> <asp:ScriptReference Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" Assembly="Microsoft.Web.Preview" /> <asp:ScriptReference Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js" Assembly="Microsoft.Web.Preview" /> <asp:ScriptReference Path="~/Scripts/UIMap.js" /> </Scripts></asp:ScriptManager>

"Path" referencira skriptne datoteke

"Name" se sklicuje na vir, ki ga želimo naložiti

Microsoft AJAX Library

Microsoft AJAX LibraryMicrosoft AJAX Library

Browsers (IE, Firefox, Safari, others)Browsers (IE, Firefox, Safari, others)Browsers (IE, Firefox, Safari, others)Browsers (IE, Firefox, Safari, others)

Core ServicesCore ServicesCore ServicesCore Services

NetworkingNetworkingNetworkingNetworking

Browser CompatibilityBrowser CompatibilityBrowser CompatibilityBrowser Compatibility

ComponentsComponentsComponentsComponents

XHTML/CSSXHTML/CSSXHTML/CSSXHTML/CSS Server-generated Server-generated Proxy ScriptsProxy Scripts

ClientClient

101

Arhitektura Microsoft AJAX Library

102

Kompatibilnost z brskalniki

103

Browser Compatibility Layer podpira: IE Mozilla Safari Opera

Script Core V (JavaScript) kodi na strani odjemalca

omogoča: Dedovanje Vmesniki (interface) in abstraktni razredi Imenski prostori Enumeracije Delegati

104

Razširitve JavaScripta: Array

105

V Javascript prinaša objekt array z metodami kot so npr.: Add Clear forEach

var a = ['a', 'b', 'c', 'd']; a[5] = 'e'; var result = ''; function appendToString(arrayElement, index, array) { // "this" is the context parameter, i.e. '|'. result += arrayElement + this + index + ','; } Array.forEach(a, appendToString, '|'); // View the results: a|0,b|1,c|2,d|3,e|5, document.write(result,"</p>");

Razširitve JavaScripta: Array

106

// dvodimenzionalno polje

// deklaracija enodimenzionalnega polja var costsArray = [];

// deklaracija vsebovanih enodimenzionalnih polj var headerRow = new Array("ID", "Name", "Costs"); var firstRow = new Array("1", "ruler", "1.30"); var secondRow = new Array("2", "binder", "4.75");

Array.add(costsArray, headerRow); Array.add(costsArray, firstRow); Array.add(costsArray, secondRow);

...// uporaba polja v kodidocument.write("<td>", costsArray[x][y], "</td>");

Demo: Array

107

Script Core:Imenski prostori in razredi - deklaracija

108

Type.registerNamespace("Demo");Demo.Oseba = function(ime, priimek, elektronskaPosta) { this._ime = ime; this._priimek = priimek; this._elektronskaPosta = elektronskaPosta;}Demo.Oseba.prototype = { getIme: function() { return this._ime; }, getPriimek: function() { return this._priimek; }, getPolnoIme: function() { return this._ime + ' ' + this._priimek; }, dispose: function() { alert('na svidenje ' + this.getName()); }}Demo.Oseba.registerClass('Demo.Oseba', null, Sys.IDisposable);

O modifikatorjih dostopnosti

109

JavaScript ne pozna modifikatorjev dostopnosti (public, private, ...)

ASP.NET AJAX Library pa se drži konvencije, da so vsi člani razreda, katerih ime se prične s podčrtajem (“_”) dostopni samo v tistem razredu (private): this._ime = ime;

Script Core:Imenski prostori in razredi - uporaba

110

<script type="text/javascript" src="NameSpace.js"> </script>

<script type="text/javascript" language="JavaScript"> function OnButton1Click() { var testnaOseba = new Demo.Oseba( 'Janez', 'Novak', '[email protected]'); alert(testPerson.getIme() + " " + testPerson.getPriimek() );

return false; }</script>

Demo: Imenski prostori v JavaScriptu

111

Dedovanje

112

Demo.Employee = function(firstName, lastName, emailAddress, team, title) {

Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]); this._team = team; this._title = title;}Demo.Employee.prototype = { getTeam: function() { return this._team; }, setTeam: function(team) { this._team = team; }, getTitle: function() { return this._title; }, setTitle: function(title) { this._title = title; }, toString: function() { return Demo.Employee.callBaseMethod(this, 'toString') + '\r\n' + this.getTitle() + '\r\n' + this.getTeam(); }}Demo.Employee.registerClass('Demo.Employee', Demo.Person);

Demo: Dedovanje v JavaScriptu

113

Networking stack

Abstrakcija XMLHttpRequest Omogočeni klici samo na strežnik od koder izvira

spletna stran surovi HTTP zahtevki

Višjenivojski konstrukti Objektno orientirani proxy razredi JSON serializacija / deserializacija

114

Dostop do spletnih storitev Aplikacije lahko svoje podatke in operacije

objavijo preko spletnih storitev Modeli: SOAP (.asmx, .svc), REST (.ashx)

Podpora za JSON sporočila in ustrezno serializacijo objektov

Popolna abstrakcija XMLHttpna odjemalcu Skriptni proksi razredi za storitve .asmx in .svc

Omogočeno klicanje metod, ki v nadaljevanju izvedejo webRequest in prenesejo parametre ter vrnejo vrednosti

Demo: Klic spletne storitve, ki vrača objekt

116

Client Page Life Cycle Events

Page Request Manager Events intializeRequest beginRequest pageLoading pageLoaded endRequest

117

Client Page Life Cycle Events

// Example of page request event hooking in JSvar prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_initializeRequest(InitializeRequest/*handler*/);…

function InitializeRequest(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); if(ShouldCancelThisRequest(args)) { prm.abortPostBack(); }}

118

Authentication service

119

Authentication service

120

Omogoča asinhrono preverjanje uporabnikovih podatkov

Dve osnovni metodi: Login Logout

Na strežniku je potrebno “vključiti” storitev

... In nastaviti način avtentikacije

 <system.web.extensions> <scripting> <webServices> <authenticationService enabled="true" /> </webServices> </scripting> </system.web.extensions>

<authentication mode="Forms"> <forms cookieless="UseCookies” loginUrl="~/login.aspx" /> </authentication>

Demo: Authentication service

121

Razhroščevanje ASP.NET AJAX rešitev

Trace na strežniku

123

Tudi ob uporabi AJAX je na voljo Trace na strežniku.

Nastavitev pageOutput="false“

Do izpiskov preko Trace.axd

Demo: Trace

124

Internet Explorer Developer Toolbar

125

Omogoča ogled in manipulacijo DOM, CSS, ...

Razhroščevanje skriptov preko Internet Explorerja

Omogočimo “script debugging” Display script error notifications Dodajanje ukazov “debugger” v

skripto Na Mozilla-i je razhroščevanje

podprto preko vključka Venkman debugger add-in

Firebug – (breakpoint, watch, ...)

126

Razhroščevanje v Visual Studio 2005

127

Izvod Internet explorerja, ki ga želim orazhroščevati mora biti priklopljen na Visual Studio Če rešitev poženemo z Debug se to zgodi

samodejno Drugače pa: Debug Attach to Process ...

V primeru napake se požene razhroščevalnik v VS 2005

System.Debug

128

Assert – če je pogoj false, prikaže sporočilo in sproži debugger

Sys.Debug.assert( (v !== ""), "You must give your name.");

Fail – prikaže sporočilo in sproži debuggerSys.Debug.fail("You must give your name.");

Trace – izpiše sporočilo v konzoli razhroščevalnika in na spletni strani v elementu TextArea z imenom “TraceConsole”, če je prisoten na strani

traceDump – izpiše vsebino podanega objekta na konzolo debuggerja in v element “TraceConsole”

clearTrace – izbriše vsebino trace

Demo: Sys.Debug

129

Web development Helper

130

http://projects.nikhilk.net/Projects/WebDevHelper.aspx

Fiddler http://www.fiddlertool.com

Proksi za razhroščevanje HTTP prometa. Omogoča raziskovanje prometa in “igranje” z zahtevki

131

132

APTANA – intellisense JavaScript

Varnost AJAX rešitev

Poskusi napadov v Web 1.0

134

Pridobivanje “prstnih odtisov” strežniške platforme in aplikacije (IIS, Appache, ...; ASP.NET, PHP, ...)

Raziskovanje in zloraba funkcionalnosti (vrivanje SQL stavkov v iskalna polja, ...)

Spreminjanje vrednosti elementov na formi Spreminjanje vrednosti skritih polj in GET

parameterov

Kako pa je s tem v Web 2.0?

135

Metode: Iskanje “prstnih odtisov” uporabljenega AJAX ogrodja

glede na vključene skriptne datoteke (*.js) Odkrivanje podprtih metod z brskanjem po skriptni

kodi ogrodja Klic metod ogrodja (za pridobivanje dodatnih

informacij) Manipulacija klicev na lokalnih JS proksi razredih Manipulacija klicev na strežnik

Poanta: Raziskovanje je zaradi velikega števila metod v AJAX

knjižnicah kompleksnejše, vendar je na voljo večja površina za napad

Manipulacija s poslanimi parametri je zanimivejša zaradi povečane površine napada

AJAX in Varnost HTTPS je vaš prijatelj

Občutljivo kodo in podatke imejte na strežniku, kjer jo lahko nadzirate

Privzeto je celotna komunikacija v obliki čistega teksta (vključno s knjižnicami skriptne kode, ki se pošiljajo na odejmalca), kar omogoča zajemanje in spreminjanje

JavaScript nima vgrajenega mehanizma za podporo šifriranju in razšifriranju

Zanimivo: Ajax Secure Service Layerhttp://assl.sullof.com/assl/

136

Prihodnost ASP.NET AJAX

137

ASP.NET AJAX v naslednjih različicah

Nekatere nove možnosti so že na ogled v ASP.NET AJAX Futures CTP

Visual Studio in .NET Framework “Orcas” ASP.NET AJAX bo postal del .NET ogrodja Izboljšana orodja za pisanje in razhroščevanje

skript na brskalniku Boljša podpora za ASP.NET AJAX strežniške

kontrolnike v načrtovalskem načinu Bogatejši strežniški kontrolniki

Zaključek

Zaključne misli“AJAX je mogočno orožje. Je kot velika puška s katero brez težav podremo slona, a prav tako si lahko odpihnemo nogo, če jo usmerimo v napačno smer”

AJAX prinaša na uporabnikov brskalnik precej bogatejšo izkušnjo

Ni ga smiselno uporabiti čisto povsod in za vsako ceno – uporabimo zdravo kmečko pamet – smo zaradi uporabe AJAXa uporabniku delo zares olajšali?

140

Viri za nadalnje raziskovanje ASP.NET AJAX

http://ajax.asp.net DOM Reference

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/d051f7c5-e882-42e8-a5b6-d1ce67af275c.asp

Fiddler http://www.fiddlertool.com/

141

Vprašanja?

142

kako do bogatejše spletne izkušnje z asp.net ajax

Documents