De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

JQuery en ASP.NET Bart De Meyer. Agenda CDN – Content Delivery Network JSON Ajax in ASP.NET – jQuery vs ASP.NET AJAX library – ASMX webservice – Webforms.

Verwante presentaties


Presentatie over: "JQuery en ASP.NET Bart De Meyer. Agenda CDN – Content Delivery Network JSON Ajax in ASP.NET – jQuery vs ASP.NET AJAX library – ASMX webservice – Webforms."— Transcript van de presentatie:

1 jQuery en ASP.NET Bart De Meyer

2 Agenda CDN – Content Delivery Network JSON Ajax in ASP.NET – jQuery vs ASP.NET AJAX library – ASMX webservice – Webforms – MVC 3 – WCF service – WEB API (.NET 4,5) ABC-Groep - Bart De Meyer - jQuery en ASP.NET

3 Agenda Plugins – Template plugin JQuery UI – Ajax autocomplete dropdown ABC-Groep - Bart De Meyer - jQuery en ASP.NET

4 CDN – Content Delivery network Google: – https://ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js https://ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js Microsoft: – min.js min.js jQuery (via Media Temple) – ABC-Groep - Bart De Meyer - jQuery en ASP.NET

5 CDN – Content Delivery network Voordelen: – Minder requests naar eigen server (max 7 concurrend) – Meer kans dat file al gecached is bij de client – Snellere servers wereldwijd Nadelen: – Lokaal development -> internet toegang nodig ABC-Groep - Bart De Meyer - jQuery en ASP.NET

6 JSON Javascript Object Notation – Collection name/value pairs – An ordered list of values ABC-Groep - Bart De Meyer - jQuery en ASP.NET

7 ASP.NET AJAX lib Update Panels Voordeel: drag en drop programming Nadelen: – Reload van het gedeelte in het updatepanel – Verliezen van focus – Grotere trafiek tussen client en server – Uitbreidingen buiten de standaard controls zijn complex ABC-Groep - Bart De Meyer - jQuery en ASP.NET

8 ASP.NET AJAX lib vs jQuery Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

9 Web Forms ClientIdMode: – Static: Zelf gekozen Id blijft behouden – AutoID: Id’s zoals in.NET 3,5 – Predictable: Id’s zoals in.NET 3,5 zonder ctI100 (default) – Inherit: Zoals bepaald in de parent container Te bepalen in: – Control zelf – Page directive – Web.config ABC-Groep - Bart De Meyer - jQuery en ASP.NET

10 Web Forms Voor.NET 4.0 $("input[id$='txtMessage") ABC-Groep - Bart De Meyer - jQuery en ASP.NET

11 ASMX Service Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

12 ASMX Service – start coding [System.Web.Script.Services.ScriptService] toevoegen bovenaan de klasse Namespace van webservice instellen ABC-Groep - Bart De Meyer - jQuery en ASP.NET

13 ASMX service – the ajax call $("#btnSave").click(function () { var ticketName = $("#txtTicket").val(); $.ajax({ type: "POST", url: "Webform.aspx/AddTicket", data: "{'ticketName':'" + ticketName + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { var ticket = msg.d; var append = " " + ticket.TicketName + " "; $("#lstTickets").append(append); $("#txtTicket").val(''); }, error: function () { alert("Error adding ticket"); } }); return false; }); ABC-Groep - Bart De Meyer - jQuery en ASP.NET Click functie declareren Data verzamelen Success event handler Error event handler Ajax call initialiseren + settings bepalen

14 ASMX service – the ajax call type: "POST", url: "Webform.aspx/AddTicket", data: "{'ticketName':'" + ticketName + "'}", contentType: "application/json; charset=utf-8", dataType: "json", ABC-Groep - Bart De Meyer - jQuery en ASP.NET URL: page name + method name Data type: server return type -xml: XML document -html: plain tekst, included script tags are evaluated when inserted in the DOM -json: Javascript object -Tekst: tekst string Data: json object

15 Web Forms Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

16 Web Forms – start coding ABC-Groep - Bart De Meyer - jQuery en ASP.NET Toevoegen System.Web.Services namespace WebMethod annotation toevoegen Public – statische methode Enable Session vlag Return object

17 Webforms ABC-Groep - Bart De Meyer - jQuery en ASP.NET

18 MVC 3 ABC-Groep - Bart De Meyer - jQuery en ASP.NET

19 MVC 3 Geen extra Webservice dll vereist Direct controller aanspreken Gebruik van de bestaande modellen ABC-Groep - Bart De Meyer - jQuery en ASP.NET

20 MVC 3 Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

21 MVC 3 - API Gebruik maken van ingebouwde Area functionaliteit Centralisatie van de AJAX methodes / controllers Behoud van MVC patroon Geen View en AJAX leveranciers door elkaar ABC-Groep - Bart De Meyer - jQuery en ASP.NET

22 WCF Service ABC-Groep - Bart De Meyer - jQuery en ASP.NET Demo

23 WEB API ABC-Groep - Bart De Meyer - jQuery en ASP.NET Vanaf.NET 4.5 standaard Te gebruiken met zowel MVC 4 als webforms 4 Voor standaard REST geen aanpassingen nodig Routes toevoegen voor niet standaard REST commands

24 Plugins ABC-Groep - Bart De Meyer - jQuery en ASP.NET Template – Eenvoudigere markup – Wordt mee ondersteund door MS – Gemakkelijker grote brokken data in de view plaatsen

25 Plugins ABC-Groep - Bart De Meyer - jQuery en ASP.NET Demo

26 jQuery UI ABC-Groep - Bart De Meyer - jQuery en ASP.NET Autocomplete dropdown – Gemakkelijker voor de gebruiker bij grote hoeveelheden data – Met AJAX beperk je de data die je moet transfereren – Ook externe services kan je aanspreken

27 jQuery UI ABC-Groep - Bart De Meyer - jQuery en ASP.NET Demo

28 jQuery UI ABC-Groep - Bart De Meyer - jQuery en ASP.NET Vragen? -Resources: -www.Encosia.com -www.Jquery.com/api -www.Jqueryui.com -www.hanselman.comwww.hanselman.com -http://blog.bartdemeyer.be


Download ppt "JQuery en ASP.NET Bart De Meyer. Agenda CDN – Content Delivery Network JSON Ajax in ASP.NET – jQuery vs ASP.NET AJAX library – ASMX webservice – Webforms."

Verwante presentaties


Ads door Google