j query en asp.net
DESCRIPTION
j Query 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 MVC 3 WCF service WEB API (.NET 4,5). Agenda. Plugins Template plugin JQuery UI Ajax autocomplete dropdown. - PowerPoint PPT PresentationTRANSCRIPT
jQuery en ASP.NET
Bart De Meyer
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
Agenda
• Plugins– Template plugin
• JQuery UI– Ajax autocomplete dropdown
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
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
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
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
ASP.NET AJAX lib vs jQuery
Demo
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
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
ASMX Service
Demo
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
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
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
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Web Forms
Demo
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
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
Webforms
ABC-Groep - Bart De Meyer - jQuery en ASP.NET
MVC 3
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
MVC 3
Demo
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
WCF Service
Demo
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
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
Plugins
Demo
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
jQuery UI
Demo
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