jquery en asp.net bart de meyer. agenda cdn – content delivery network json ajax in asp.net –...

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