j Query en 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)


Agenda

• Plugins– Template plugin

• JQuery UI– Ajax autocomplete dropdown


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

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js



http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js



http://code.jquery.com/jquery-1.7.1.min.js


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


JSON

• Javascript Object Notation– Collection name/value pairs– An ordered list of values


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


ASP.NET AJAX lib vs jQuery

Demo


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


Web Forms• Voor .NET 4.0

<asp:TextBox ID=“txtMessage” runat=“server” /><input type=“tekst” Id=“ct100_txtMessage”/>

$("input[id$='txtMessage")


ASMX Service

Demo


ASMX Service – start coding

• [System.Web.Script.Services.ScriptService] toevoegen bovenaan de klasse

• Namespace van webservice instellen


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


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


Web Forms

Demo


Web Forms – start coding

• Toevoegen System.Web.Services namespace• WebMethod annotation toevoegen• Public – statische methode• Enable Session vlag• Return object


Webforms


MVC 3


MVC 3

• Geen extra Webservice dll vereist• Direct controller aanspreken• Gebruik van de bestaande modellen


MVC 3

Demo


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


WCF Service

Demo


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


Plugins

• Template – Eenvoudigere markup– Wordt mee ondersteund door MS– Gemakkelijker grote brokken data in de view

plaatsen


Plugins

Demo


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


jQuery UI

Demo


jQuery UI

Vragen?- Resources:

- www.Encosia.com- www.Jquery.com/api- www.Jqueryui.com- www.hanselman.com

- http://blog.bartdemeyer.be

http://www.hanselman.com/

j Query en ASP.NET

Documents

Transcript of j Query en ASP.NET