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

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

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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