De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

JQuery en ASP.NET Bart De Meyer.

Verwante presentaties


Presentatie over: "JQuery en ASP.NET Bart De Meyer."— Transcript van de presentatie:

1 jQuery en ASP.NET Bart De Meyer

2 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 Microsoft: 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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
JSON Javascript Object Notation Collection name/value pairs An ordered list of values ABC-Groep - Bart De Meyer - jQuery en ASP.NET

7 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Web Forms Voor .NET 4.0 <asp:TextBox ID=“txtMessage” runat=“server” /> <input type=“tekst” Id=“ct100_txtMessage”/> $("input[id$='txtMessage") ABC-Groep - Bart De Meyer - jQuery en ASP.NET

11 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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
Click functie declareren $("#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 = "<option value=" + ticket.TicketId + ">" + ticket.TicketName + "<option>"; $("#lstTickets").append(append); $("#txtTicket").val(''); }, error: function () { alert("Error adding ticket"); } }); return false; Data verzamelen Ajax call initialiseren + settings bepalen Success event handler Error event handler ABC-Groep - Bart De Meyer - jQuery en ASP.NET

14 ASMX service – the ajax call
type: "POST", url: "Webform.aspx/AddTicket", data: "{'ticketName':'" + ticketName + "'}", contentType: "application/json; charset=utf-8", dataType: "json", URL: page name + method name Data: json object 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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET

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

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

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

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

19 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
MVC 3 Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

21 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
WCF Service Demo ABC-Groep - Bart De Meyer - jQuery en ASP.NET

23 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
WEB API 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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET

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

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

26 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
jQuery UI 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 ABC-Groep - Bart De Meyer - jQuery en ASP.NET

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

28 ABC-Groep - Bart De Meyer - jQuery en ASP.NET
jQuery UI Vragen? Resources: ABC-Groep - Bart De Meyer - jQuery en ASP.NET


Download ppt "JQuery en ASP.NET Bart De Meyer."

Verwante presentaties


Ads door Google