Migliora il tuo codice con Knockout.js

by Andrea 30 March 2013 11:52

Venerdì 5 Aprile 2013 terrò un meeting dal titolo "Migliora il tuo codice con Knockout.js"

Abstract:
In questa sessione vedremo come Knockout.js permetta di scrivere codice JavaScript in modo pulito e organizzato, semplificando la scrittura del codice e la sua manutenzione. Come lo si utilizza KO? Quali vantaggi ci offre? Quali librerie ci vengono in aiuto? Quali sarebbe meglio evitare?

Ci troviamo a scrivere sempre più codice client-side, e utilizzare strumenti/librerie che ci permettano di aiutarci in questo compito è sicuramente un valore aggiunto, sia per i tempi di sviluppo, ma anche per la manutenzione del codice. Rendere il codice più leggibile, strutturare meglio l'applicazione, utilizzare strumenti validi sono solo alcune delle cose di cui vi parlerò.

Se non conoscete Knockout (http://knockoutjs.com/), questo meeting fa proprio al caso vostro. Vedrete le potenzialità di questa libreria, e scoprirete un paio di framework che combinati con KO vi aiuteranno davvero molto nello sviluppo JavaScript.

Per registrarvi: http://www.xedotnet.org/Home/Meeting/20130405

Tags: , , ,

.NET | JavaScript | jQuery | XeDotNet

Chiamare un page-method da jQuery

by Andrea Dottor 17 July 2012 22:20

Con ASP.NET AJAX sappiamo bene come interrogare un page-method, ed in rete troviamo parecchia documentazione. Il tutto si basa sul controllo ScriptManager, dove abilitando il flag EnablePageMethods viene automaticamente creato un proxy javascript che ci permette di chiamare il page-method in modo molto semplice e veloce.

A questa pagina troviamo un esempio di come chiamare un page-method utilizzando ASP.NET AJAX: Exposing Web Services to Client Script

E' possibile però evitare l'utilizzo/dipendenza da ASP.NET AJAX, ed evitare quindi di avere nella pagina un controllo ScriptManager. Per fare questo ci viene in aiuto jQuery.

Come utilizzare jQuery per chiamare il page-method?

La cosa è molto semplice e si basa sull'uso del metodo Ajax di jQuery, e sul come comporre l'url da invocare.

Ecco qui un esempio di codice per invocare il page-method Save presente all'interno della pagina Product.aspx. Il metodo Save ha un parametro objToSave di tipo string (che riceverà un prodotto in formato JSON).

var product = new Object();
product.Description = "Descrizione";
product.Code = "ABC123";
product.Data = "20120712";
product.CategoryID = 12;

var dataToSave = new Object();
dataToSave.objToSave = JSON.stringify(product);

$.ajax({
  type: "POST",
  url: "Product.aspx/Save",
  data: JSON.stringify(dataToSave),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (msg) {
    alert('Risultato del salvataggio: ' + msg.d);
  },
  error: function (err) {
    alert('Errore: ' + err.statusText);
  }
});

Come potete bene vedere l'url da chiamare da jQuery è composto dal nome della pagina seguito dal nome del page-method ("Product.aspx/Save").
Questo metodo permette di avere anche oggetti in ritorno da metodo, che verranno gestiti dal codice inserito all'interno del metodo success.

Utilizzando questo codice non si hanno dipendenze dalle librerie ASP.NET AJAX, e aggiungo che il codice JavaScript necessario è inferiore a quello del proxy che verrebbe generato dal controllo ScriptManager.

E quindi, per l'ennesima volta, jQuery batte ASP.NET AJAX Winking smile

Tags: ,

ASP .NET | ASP.NET AJAX | jQuery

Codice e slide della sessione ASP.NET e lo sviluppo Client Side

by Andrea Dottor 20 March 2012 14:30

Ecco pronti al download il codice e le slide della mia sessione "Il mondo è sempre più client. ASP.NET e lo sviluppo Client Side" che ho tenuto il 9 marzo 2012.

IScriptControl, Knockout e le ASP.NET Web API sono stati i principali protagonisti :-)

Abstract: Le applicazioni che sviluppiamo, e che il mercato richiede sempre più, stanno modificando il modo in cui le applicazione vengono scritte. La logica di interazione con l'utente stà diventando sempre più client side, questo grazie anche all'espansione di dispositivi mobile che fruiscono le nostre applicazioni. JQuery ed il javascript in generale hanno un ruolo sempre maggiore, e permetteno in molti casidi poter far fare la differenza a ciò che sviluppiamo.

Come per il codice dello scorso meeting, per quanto riguarda il database utilizzato nella demo è necessario scaricare il database AdventureWorks che trovate al seguente link http://msftdbprodsamples.codeplex.com/e modificare la connectionstring del progetto web.

Tags: , , ,

ASP .NET | ASP.NET AJAX | XeDotNet | Microsoft

Inizia un nuovo anno per XeDotNet

by Andrea 11 January 2012 00:10

E' stato pubblicato il calendario degli eventi XeDotNet per il primo semestre del 2012.

10/02/2012 - HTML5 e lo sviluppo mobile

  • Andrea Dottor - ASP.NET e lo sviluppo mobile
  • Davide Senatore - Packaging HTML5 application with PhoneGap

09/03/2012 - Sviluppo client side

  • Andrea Boschin - What's new in Silverlight 5.0
  • Andrea Dottor - Il mondo è sempre più client. ASP.NET e lo sviluppo Client Side

06/04/2012 - Real world experience

  • Cristiano Simionato - Ma quanto costa Windows Azure?
  • Mirco Vanini - REST & .NET Micro FW - A Real Case

04/05/2012 - Uno sguardo a futuro

  • Davide Vernole - Visual Studio vNext - Application Lifecycle Management
  • Andrea Boschin - Sviluppare applicazioni Metro con Windows 8 e WinRT.

01/06/2012 - Playing with gadgets

  • Mirco Vanini - Are you a Gadgeteer?
  • Davide Vernole - Playing with Team Foundation Server
Per quanto mi riguarda, avrò il piacere di tenere due sessioni, basate su alcune esperienze lavorative che ho affrontato in quest'ultimo periodo.
Le sessioni si completano a vicenda, la prima basata sullo sviluppo verso il mondo mobile grazie all'utilizzo di HTML5, jquery mobile, ASP.NET MVC e WCF...mentre la seconda si propone di presentare alcune interessanti librerie javascript e la loro integrazione con ASP.NET, e alcuni suggerimenti di come sviluppare al meglio client-side.

Quindi non vi rimane che registrarvi ;-)

Tags: , , , ,

.NET | ASP .NET | ASP.NET AJAX | XeDotNet

Lazy load delle immagini

by Andrea 16 September 2010 05:01

Per velocizzare il caricamente delle pagine del mio blog, ho modificato il template aggiungendo la funzionalità di Lazy Load delle immagini presenti nei post.

Mi è venuto in aiuto il Lazy Load plugin per jQuery.

Questo plugin permette di far caricare le immagini solamente quando rientrano nella parte renderizzata del browser, evitando quindi di eseguire il download di tutte le immagini al caricamento della pagina. Evitando di scaricare le immagini nn presenti nell'area visibile della pagina, si velocizza (e di molto) il caricamento, in quanto vengono notevolmente ridotti i byte trasmessi.

Le modifiche che ho dovuto fare alla Master-Page del mio tema sono le seguenti:

  • Aggiunta della libreria jQuery dalla CDN di google, e dello script del Lazy Load plugin, e il tutto in versione ridotta:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/jQuery/jquery.lazyload.mini.js" type="text/javascript"></script>
 
  • Aggiunta della funzione per attivare il Lazy Load delle sole immagini incluse nei post, agendo sul selettore jQuery, in modo da applicare questo comportamento alle immagini contenute nel div .text:
<script type="text/javascript">
  $(function() {
    $(".text img").lazyload({ 
      placeholder : "images/blank.gif",
      threshold : 200 });
  });
</script> 

Nel mio blog, come placeholder ho fatto uso di una gif trasparente dalle dimensioni di 1px per 1px, in modo da evitare la fastidiosa X rossa durante l'attesa del caricamento dell'immagine.

Tutte le informazioni del plugin le trovate a questo link: Lazy Load Plugin for jQuery

Tags: , ,

ASP .NET | Internet | Sito

Prossimo evento - Rich Internet Applications Track

by Andrea 01 March 2010 02:00

Venerdì 5 Marzo 2010 ci sarà il community meeting "Rich Internet Applications Track" dove Andrea Boschin vi parlerà  di Silverlight 4.0, mentre il mio compito sarà quello di presentare jQuery, e il suo utilizzo con ASP.NET.

Silverlight 4.0 - Practical Overview

Il nuovo rilascio della recente beta di Silverlight 4.0 ha introdotto una serie di nuove feature che amplificano notevolmente le possibilità per lo sviluppatore. A partire dalle applicazioni Out of browser in full-trust, passando per il supporto a webcam e microfono, continuando con gli strumenti per la stampa e tutta una serie di interessanti novità, in questa sessione si vedranno le novità con una serie di esempi pratici calati su problematiche reali.

Write less do more...with jQuery

logo_jquery jQuery è un framework JavaScript che permette di semplificare la scrittura di codice JavaScript, facilitando l'iterazione con gli elementi della pagina (controlli, stili, eventi, animazioni, ...), e permettendo di aumentare la user experience delle applicazioni, riducendone al tempo stesso la complessità di scrittura. Vista la sua diffusione e potenza, è stato anche incluso nei project templete di Visual Studio. In questa sessione vedremo cos'è jQuery, e scopriremo le potenzialità e le funzionalità che offre, verificando se il motto "write less do more" sia vero o meno

Per l'iscrizione all'evento: registrazione

Tags: , , ,

ASP .NET | Internet