ASP.net

ASP.NET AJAX 4.0 - Παράδειγμα χρήσης Template

Πριν λίγο καιρό ανακοινώθηκε το 1ο Preview της 4ης έκδοσης του Microsoft AJAX Client-side Framework. Με αρκετά καινούργια χαρακτηριστικά αυτό το οποίο ξεχώρισα είναι η χρήση των templates. Ας δούμε όμως ένα παράδειγμα χρήσης των templates.

Αρχικά κατεβάζουμε το MicrosoftAjaxTemplates.js το οποίο είναι διαθέσιμο στο CodePlex και το προσθέτουμε στο project μας. Στη συνέχεια θα πρέπει να το αναφέρουμε στην σελίδα μας. Αυτό μπορεί να γίνει είτε μέσα απο τον ScriptManager είτε προσθέτοντας ένα script tag στο head της σελίδας μας. Εδώ θα επιλέξουμε να το προσθέσουμε μέσα από τον ScriptManager.

<asp:ScriptManager runat="server" ID="sm" EnablePageMethods="true">             <Scripts>                 <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />             </Scripts>   </asp:ScriptManager>

Επίσης ενεργοποιούμε τα PageMethods. Στη συνέχεια προσθέτουμε ένα button το οποίο θα φέρει τα δεδομένα απο τον server, το template που θέλουμε να χρησιμοποιήσουμε και ενα div στο οποίο θα εμφανίσουμε να δεδομένα.

<input type="button" id="btn" value="Show Data" onclick="exec()" /> <div id="myTemplate" class="sys-template">             <h3>                 {{ Title }}</h3>             Name:             <input type="text" value="{{ FirstName + ' ' + LastName}}" />&nbsp; Date:             <input type="text" value="{{ DateNow.format('dd/MM/yyyy  hh:mm:ss') }}" />&nbsp;             <!--* if (BirthDate) { *-->             BirthDate: &nbsp;<input type="text" value="{{ BirthDate.format('dd/MM/yyyy') }}" />             <!--* } *-->             <!--* if (!BirthDate) { *-->             BirthDate is unkown             <!--* } *--> </div> <div id="data"> </div>

Στη συνέχεια προσθέτουμε μια WebMethod στο code-behind αρχείο μας και μια custom κλάση με 4 properties τα οποία θα εξομοιώσουν τα δεδομένα μας, τα οποία μπορεί να προέρχονται από μια βάση, από ενα xml κλπ. Αυτή η WebMethod που προσθέσαμε πρέπει να είναι public και static ωστε να μπορει να χρησιμοποιηθεί απο τα PageMethods του ScriptManager. Σημειώνω πως το πεδίο BirthDate είναι Nullable διότι θα του περάσουμε null τιμη σε ένα από τα 2 αντικείμενα μας.

[WebMethod]     public static List<Info> GetVal()     {         List<Info> l = new List<Info>();         l.Add(new Info { BirthDate = DateTime.Parse("2/6/2008"), FirstName = "John", LastName = "Katsiotis", DateNow = DateTime.Now, Title = "Cool ASP.NET Developer" });         l.Add(new Info { BirthDate = null, FirstName = "Foo", LastName = "Bar", DateNow = DateTime.Now, Title = "Common Name Example" });         System.Threading.Thread.Sleep(2500);         return l;     }     public class Info     {         public DateTime? BirthDate { get; set; }         public string FirstName { get; set; }         public string LastName { get; set; }         public DateTime DateNow { get; set; }         public string Title { get; set; }     }

Στην μέδοθο GetVal δημιουργούμε 2 αντικείμενα της κλάσης Info και επιστρέφουμε μια λίστα με αυτά τα αντικείμενα. Επίσης δημιουργούμε μια τεχνιτή καθυστέρηση 2.5 secs.

Τέλος προσθέτουμε στην σελίδα μας την απαραίτητη javascript η οποία είναι...

<script type="text/javascript">     function initTemplateValues(_Title,_FirstName,_LastName,_DateNow,_BirthDate)     {         var t = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));         t.createInstance($get("data"),         {             Title: _Title,             FirstName: _FirstName,             LastName: _LastName,             DateNow: _DateNow,             BirthDate: _BirthDate         });     }     function exec()     {         $get('data').innerHTML='Please wait...';         PageMethods.GetVal(onComplete,onError);     }     function onComplete(args)     {         $get('data').innerHTML=''         for(var i=0;i<args.length;i++)         {             initTemplateValues(args[ i ].Title,args[ i].FirstName,args[ i].LastName,args[ i].DateNow,args[ i].BirthDate);         }     }     function onError(args)     {         $get('data').innerHTML=args;     } </script>

Αρχικά έχουμε την exec() η οποία καλεί την server-side μέθοδο GetVal ασύγχρονα. Μετά αν η κλήση είναι επιτυχής τότε καλείτε η onComplete και για κάθε item του args που συγκερκιμένα είναι τύπου Info δημιοιυργούμε μια περιοχή η οποία χρησιμοποιεί το template που ορίσαμε πιο πάνω και κάνει generate τον html κωδικα που έχουμε ορίσει.

Αυτό ηταν! Νομίζω ότι είναι αρκετά απλό και με αυτό τον τρόπο μπορούμε να δημιουργούμε layouts πολύ εύκολα και με αυτό τον τρόπο μειώνουμε δραματικά το processing που γίνεται στον server καθώς το μεγαλύτερο κομμάτι γίνεται client-side!