Client-side template w ASP.NET AJAX 4.0 Preview 1

Parę dni temu Microsoft udostępnił nową wersję swojej implementacji AJAXa – ASP.NET AJAX 4.0. Jest to co prawda wersja Preview 1, ale zawiera już parę ciekawych nowinek. Są to:

Client-side template rendering
Declarative instantiation of behaviors and controls
DataView control
Markup extensions
Bindings

Jako wielki fan AJAXa nie mogłem się oprzeć chęci zbadania, co tam nowego MS nam proponuje i chciałbym Wam zaprezentować pierwszą z nowości: Client-side template rendering, czyli szablony po stronie klienta 🙂
Zastosowanie szablonów po stronie klienta pozwala na znaczne zminimalizowanie ilości danych przesyłanych z serwera. Dzieje się tak dlatego, iż z serwera przesyłamy ciało szablonu tylko raz! Następnie “dosyłamy” dane, którymi uzupełniamy szablon. Stosując szablony po stronie serwera do przeglądarki wysyłamy natomiast cały skrypt. Mam nadzieję, że za chwilę wszystko stanie się jasne.
Jako przykład posłuży prosta stronka zawierająca listę klientów oraz szczegółowe dane jednego z nich. Ponieważ chodzi jedynie o zaprezentowanie możliwości ASP.NET AJAX 4.0 dane klienta są bardzo okrojone.
Prezentowane przykłady wykonywane są w Visual Studio 2008 Std.
Na początek coś na rozgrzewkę:
Ze strony http://www.asp.net/ajax/downloads/ pobieramy Microsoft AJAX Library 3.5. Nowa wersja nie zawiera jeszcze kilku przestrzeni nazw.
Ze strony http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=15511 pobieramy ASP.NET AJAX 4.0 CodePlex Preview 1
W Visual Studio 2008 zakładamy nowy projekt “ASP.NET Web Application”
Wypakowujemy pobrane biblioteki do katalogu z naszym projektem. Całość powinna wyglądać tak:

A oto zawartości pliku Default.aspx
[sourcecode language=”xhtml”] <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ClientSideTemplateRendering._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Client-side template rendering</title>
<script src="MicrosoftAjaxLibrary/System.Web.Extensions/3.5.0.0/3.5.21022.8/MicrosoftAjax.js"
type="text/javascript"></script>
<script src="AspNetAjax4.0.Preview1/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
<style type="text/css">
.sys-template
{
visibility: hidden;
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="myTemplate" class="sys-template">
<h3>
{{ Title }}</h3>
Name:<input type="text" value="{{ FirstName + ' ' + LastName}}" />
BirthDate: <input type="text" value="{{ BirthDate.format('MM/dd/yyyy') }}" />
</div>
<div id="targetContainer">
</div>
<script language="javascript" type="text/javascript">
var t = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
var tab = {"Title": "Dane klienta", FirstName: "Łukasz", LastName: "Gąsior", BirthDate: new Date()};
t.createInstance($get("targetContainer"), tab);
</script>
</form>
</body>
</html>
[/sourcecode] Strona zawiera 2 DIVy oraz jeden JavaScript. DIV myTemplate jest naszym szablonem. DIV targetContainer jest miejscem, w którym zostanie wygenerowana obrobiona zawartość szablonu. myTemplate posiada atrybut sys-template – jest to styl CSS, który ukrywa szablon. sys-template jest umowną nazwą szablonów w ASP.NET 4.0
JavaScript zawiera 2 nowe metody:
1. Sys.Preview.UI.Template.getTemplate
Metoda ta pobiera szablon celem wygenerowania odpowiedniej treści. Dane, które będą podmieniane w szablonie umieszczamy w podwójnych nawiasach “{{ Title }}”. Jako parametr metoda ta przyjmuje ID naszego szablonu (DIVa).
2. t.createInstance
Metoda ta generuje treść na podstawie naszego szablonu. Przyjmuje dwa parametry: ID kontenera, w którym zostanie umieszczony wygenerowany kod oraz dane, które zostaną w nim umieszczone. Jak widać dane te są w formacie JSON (dalej określane przeze mnie jako dane wejściowe).
Dane wejściowe oczywiście będą przekazywane z serwera. I są to jedyne dane jakie musimy wysyłać po załadowaniu szablonu. Stosując np. UpdatePanel musielibyśmy do przeglądarki za każdym razem wysyłać całego DIVa!
Uruchamiamy naszą aplikację i VOILA!

Na powyższym screenie widzimy, że na podstawie szablonu została poprawnie wygenerowana zawartość DIVa targetContainer.
No to pobierzmy teraz coś z serwera 🙂
Default2.aspx
[sourcecode language=”xhtml”] <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="ClientSideTemplateRendering.Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Client-side template rendering</title>
<script src="MicrosoftAjaxLibrary/System.Web.Extensions/3.5.0.0/3.5.21022.8/MicrosoftAjax.js"
type="text/javascript"></script>
<script src="AspNetAjax4.0.Preview1/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
<style type="text/css">
.sys-template
{
visibility: hidden;
display: none;
}
</style>
<script type="text/javascript" language="javascript">
function GetDetails(id)
{
GetCustomerDetails(id);
return false;
}
function RenderTemplate(result)
{
$get("targetContainer").innerHTML = "";
var t = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
var tab = eval("(" + result + ")");
t.createInstance($get("targetContainer"), tab);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="rptCustomers" runat="server">
<itemTemplate>
<a href='Default2.aspx?id=<%# Eval("ID") %>' onclick='return GetDetails(<%# Eval("ID") %>);'>
<%# Eval("LastName")%></a><br />
</itemTemplate>
</asp:Repeater>
</div>
<div id="myTemplate" class="sys-template">
<h3>
Dane Klienta</h3>
ID:<input type="text" value="{{ ID }}" />
FirstName:<input type="text" value="{{ FirstName }}" />
LastName: <input type="text" value="{{ LastName }}" />
</div>
<div id="targetContainer">
</div>
</form>
</body>
</html>
[/sourcecode]

Tutaj mamy już trochę więcej JavaScriptu. Doszły dwie nowe metody GetDetails oraz RenderTemplate. Pierwsza wywołuje asynchroniczne metodę C# i jest wywoływana po kliknięciu nazwiska klienta. Druga otrzymuje wynik tego działania w postaci JSONa. Reszta działa tak samo jak w poprzednim przykładzie. Sposób działania zapytań asynchronicznych oraz serializacji JSON opiszę innym razem.
Źródła projektu dostępne są tutaj.
Powyższe przykłady pokazały, że nowa wersja ASP.NET AJAX podąża w dobrym kierunku. Oczywiście musieliśmy trochę powalczyć z JS, ale weźmy pod uwagę, że jest to dopiero Preview 1, więc napewno element ten zostanie jeszcze uproszczony.
Dodatkowo nowa biblioteka umożliwia również bindowanie szablonu tablicą, czyli tworzymy sobie takiego małego grida w JS. Postaram się to opisać w kolejnym poscie.
Życzę miłej zabawy w odkrywaniu AJAXa 🙂