j Query en ASP.NET

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 autocompletedropdown 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: • http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js • jQuery (via Media Temple) • http://code.jquery.com/jquery-1.7.1.min.js 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 libvs 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 <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. 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 evaluatedwheninserted in the DOM • json: Javascript object • Tekst: tekst string ABC-Groep - Bart De Meyer - jQuery en ASP.NET

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

16. Web Forms – start coding • Toevoegen System.Web.Servicesnamespace • WebMethodannotationtoevoegen • Public – statische methode • EnableSessionvlag • Return object ABC-Groep - Bart De Meyer - jQuery en ASP.NET

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

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

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

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