Download - j Query en ASP.NET
![Page 1: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/1.jpg)
jQuery en ASP.NET
Bart De Meyer
![Page 2: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/2.jpg)
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)
![Page 3: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/3.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Agenda
• Plugins– Template plugin
• JQuery UI– Ajax autocomplete dropdown
![Page 4: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/4.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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
![Page 5: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/5.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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
![Page 6: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/6.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
JSON
• Javascript Object Notation– Collection name/value pairs– An ordered list of values
![Page 7: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/7.jpg)
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
![Page 8: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/8.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
ASP.NET AJAX lib vs jQuery
Demo
![Page 9: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/9.jpg)
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
![Page 10: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/10.jpg)
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")
![Page 11: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/11.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
ASMX Service
Demo
![Page 12: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/12.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
ASMX Service – start coding
• [System.Web.Script.Services.ScriptService] toevoegen bovenaan de klasse
• Namespace van webservice instellen
![Page 13: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/13.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 = "<option value=" + ticket.TicketId + ">" + ticket.TicketName + "<option>"; $("#lstTickets").append(append); $("#txtTicket").val(''); }, error: function () { alert("Error adding ticket"); } }); return false; });
Click functie declarerenData verzamelen
Success event handler
Error event handler
Ajax call initialiseren + settings bepalen
![Page 14: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/14.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
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 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
![Page 15: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/15.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Web Forms
Demo
![Page 16: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/16.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Web Forms – start coding
• Toevoegen System.Web.Services namespace• WebMethod annotation toevoegen• Public – statische methode• Enable Session vlag• Return object
![Page 17: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/17.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Webforms
![Page 18: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/18.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
MVC 3
![Page 19: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/19.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
MVC 3
• Geen extra Webservice dll vereist• Direct controller aanspreken• Gebruik van de bestaande modellen
![Page 20: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/20.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
MVC 3
Demo
![Page 21: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/21.jpg)
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
![Page 22: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/22.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
WCF Service
Demo
![Page 23: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/23.jpg)
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
![Page 24: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/24.jpg)
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
![Page 25: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/25.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Plugins
Demo
![Page 26: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/26.jpg)
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
![Page 27: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/27.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
jQuery UI
Demo
![Page 28: j Query en ASP.NET](https://reader035.vdocuments.site/reader035/viewer/2022062519/56814fc9550346895dbd87c5/html5/thumbnails/28.jpg)
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
jQuery UI
Vragen?- Resources:
- www.Encosia.com- www.Jquery.com/api- www.Jqueryui.com- www.hanselman.com
- http://blog.bartdemeyer.be