JQuery en ASP.NET Bart De Meyer.

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: Microsoft: jQuery (via Media Temple) 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
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

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

JQuery en ASP.NET Bart De Meyer.

Verwante presentaties

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

Verwante presentaties

Over het project

Feedback

Inloggen

Inloggen via een sociaal netwerk:

JQuery en ASP.NET Bart De Meyer.

Verwante presentaties

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

Verwante presentaties

Over het project

Feedback