Anhand von einem einfach Beispiel möchte ich heute zeigen wie man einen ASP.Net Webservice mit jQuery Verwendung und mit dem Plugin jTemplates schnell visualisieren kann.
Alternativ zu einem “normalen” ASP.Net Webservice kann auch ein WCF Service verwendet werden, da der Webservice per JSON konsumiert wird.
Der Beispiel-Webservice ist sehr klein und übersichtlich, sollte aber das wesentliche Prinzip veranschaulichen
1: [WebService(Namespace =
2: "http://dotnet-forum.de/blogs/thorstenhans/services/jTemplatesExample/2009/08/25")]
3: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
4: [System.ComponentModel.ToolboxItem(false)]
5: [System.Web.Script.Services.ScriptService]
6: public class ExampleWebService : System.Web.Services.WebService
7: {
8: public class Person{
9: public String Name { get; set; }
10: public String Message { get; set; }
11: }
12:
13: [WebMethod]
14: public List<Person> GetPersons()
15: {
16: return new List<Person>(){
17: new Person(){Name="Developer", Message=".Net rocks"},
18: new Person(){Name="Designer", Message="Expression Blend rocks"},
19: new Person(){Name="Administrator", Message="HyperV rocks"}
20: };
21: }
22: }
Um einen Webservice mit jQuery verwenden zu können, muss die WebService Klasse mit dem ScriptService Attribut aus dem System.Web.Script.Services Namespace dekoriert sein.
Das verwenden eines Webservices mit jQuery ist, wie könnte es bei jQuery anders sein, einfach und überschaubar. Die ajax() Methode kann über verschiedene Options konfiguriert werden um den Webservice Call einzustellen. Bevor dies allerdings realisiert wird, muss wie immer jQuery eingebunden werden. Außerdem wird im nachfolgenden Snippet auch das Plugin jTemplates registriert, welches später noch verwendet wird.
1: <script src="Scripts/jquery-1.3.2.min.js"
2: type="text/javascript"/>
3: <script src="Scripts/jquery-jtemplates_uncompressed.js"
4: type="text/javascript"/>
Zur besseren Verständlichkeit habe auf der Beispielwebseite noch einen Button eingefügt, der als “Einstiegspunkt” dient. Der Button verfügt über die PseudoCSS Klasse “caller”
1: $(document).ready(function() {
2: $('.caller').click(function() {
3: $.ajax({
4: type: "POST",
5: url: "ExampleWebService.asmx/GetPersons",
6: contentType: "application/json; charset=utf-8",
7: data: "{}",
8: dataType: "json",
9: success: CallSuccessed,
10: error: CallFailed
11: });
12: });
13: });
Über die Options success und error werden die entsprechenden Callback Methoden angehangen, die Methode wurden zur Übersichtlichkeit in diesem Snippet nicht als anonyme Methode, sondern als Methodenaufruf angegeben.
Damit wäre der Webservice mit jQuery bereits aufgerufen. Jetzt muss lediglich das Ergebnis visualisiert werden. An dieser Stelle kann man dass ganze einfach testen indem man die Methoden CallSuccessed und CallFailed wie folgt implementiert
1: function CallSuccessed(result) {
2: /* TEST IMPLEMENTIERUNG */
3: for (var i = 0; i < result.d.length; i++) {
4: alert(result.d[ i ].Message);
5: }
6: }
7:
8: function CallFailed(result) {
9: alert(resut.status + ' ' + result.statusText)
10: }
Bei der Ausführung in diesem Status sollten die im Webservice definierten Messages in jeweils einer eigenen MessageBox angezeigt werden.
Doch nun zum interessanten Teil UI-Rendering mit jTemplates.
Bei der Verwendung von jTemplates können die Templates für das Rendering entweder in externe Files ausgelagert werden oder mit einem jQuery Selektor aus dem aktuellen Dokument geladen werden.
Für diese Beispiel wurde das Template in einem script tag direkt im Dokument hinterlegt.
1: <script type="text/html" id="myTemplate">
2: {#template MAIN}
3: <h3>Using ASP.Net WebServices with jQuery and jTemplates</h3>
4: These values are callead via jQuery, complete ui rendering is
5: done via jTemplates, a jQuery template framework.
6: <br/>
7:
8: <table>
9: <tr>
10: <td>Name</td>
11: <td>Message</td>
12: </tr>
13: {#foreach $T.d as Person}
14: <tr bgcolor="{#cycle values=['#CCCCFF','#FFFFFF']}">
15: <td style="width:100px">{$T.Person.Name}</td>
16: <td style="width:300px">{$T.Person.Message}</td>
17: </tr>
18: {#/for}
19: </table>
20: {#/template MAIN}
21: </script>
Was auf den ersten Blick etwas untypisch wirkt sind die in der jTemplates Syntax definierten Expressions. Als erstes brauch ein Tempate einen Start- und einen Endexpression.
{#template MAIN} und {#/template MAIN}
Für die Iteration über ein Array kann die jTemplate foreach Expression Syntax verwendet werden, die dass Iterationsobjekt bekannt manch
{#foreach …} {#/for} - Achtung! Es heißt wirklich foreach und /for !!
Zum Abschluss noch der wichtigste Expression der $T Expression, durch diesen Ausdruck kann man auf das Datenobjekt im TemplateContext zugreifen.
Die Hochzeit – oder – Wie kommen die Daten ins Template
Die zuvor als Test implementierte CallSuccessed Methode wird einfach durch die folgende ersetzt. #res ist ein jQuery Selektor der auf ein div in dem aktuellen Dokument verweist. Zunächst wird mit der Methode setTemplate() das eben definierte Template geladen.
Die eigentliche Logik geschieht in der Methode processTemplate, sie ersetzt die Expressions im Template durch die eigentlichen Daten, die vom ASP.Net WebService kommen.
1: function CallSuccessed(result) {
2: $("#res").setTemplate($("#myTemplate").html());
3: $("#res").processTemplate(result);
4: }
Wenn alle Schritte korrekt befolgt wurden, sollte das Ergebnis so aussehen
