Săptămâna viitoare, în 18 septembrie 2009, voi fi la Webstock unde trebuie să prezint câteva laboratoare. Fiindcă deja am pregătit conținutul, m-am gândit să il fac public și aici pe blog.

Arhiva asociata tutorialului contine o solutie Start, alta Finish, respectiv baza de date.

Microsoft Ajax 4.0 si ADO.NET Data Services

Introducere

Acest laborator va prezenta doua tehnologii Microsoft: Ajax 4.0 si ADO.NET Data Services.

Ajax 4.0

Sau mai pe larg Microsoft Ajax versiunea 4.0 (aflata in acest moment in stadiul de Community Technology Preview), este o biblioteca open source initiata de Microsoft si disponibila aici: http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=32770 . Aceasta biblioteca inseamna de fapt o serie de fisiere Javascript care permit crearea de cod pe client (in browser) care manipuleaza date ce vin de undeva de pe un server. Ajax 4.0 presupune deci colaborarea cu alte tehnologii de tip servicii web (sau ceva asemanator), care sunt in stare sa “aduca” pe client date aflate undeva pe un server, respectiv sa le “trimita” inapoi pentru modificarile de rigoare.

ADO.NET Data Services

Este o tehnologie de tip serviciu web, mai exact un tip de serviciu Windows Communication Foundation specializat. ADO.NET Data Services este util pentru a comunica intre un server si un client, transmitand peste HTTP date in ambele sensuri. Intr-o arhitectura multi-strat cu 3 nivele: (1) User Interface, (2) Business Logic, (3) Data Layer, ADO.NET Data Services se afla pe nivelul (2).

Mai multe despre Data Services: http://msdn.microsoft.com/en-us/data/bb931106.aspx .

Acest serviciu specializat “stie” sa expuna peste HTTP datele care vin dintr-o sursa foarte bine determinata, conform interogarii care este realizata direct din URL-ul de acces la serviciu. Daca ADO.NET Data Services este pe nivelul (2), atunci in spate, pe nivelul (3) trebuie sa fie un strat de acces la baza de date realizat cu LINQ to SQL (http://weblogs.asp.net/scottgu/archive/2007/05/19/using-linq-to-sql-part-1.aspx )sau Entity Framework (http://msdn.microsoft.com/en-us/library/aa697427(VS.80).aspx ).

In continuare vom realiza un exemplu care porneste de la o baza de date, realizeaza un Data Layer cu tehnologia Entity Fraewmork, apoi expune datele peste HTTP folosind ADO.NET Data Services, ca pe client sa foloseasca Ajax 4.0.

Exercitiu

Prerequisites

Exemplul presupune existenta unei baze de date numita FinancialDemo, atasata intr-un server de baze de date MS SQL Server (2005 sau 2008). Fisierele bazei de date sunt prezente in folderul laboratorului.

De asemenea, este nevoie de Visual Studio 2008 cu Service Pack 1.

Pasul 1

Deschideti cu Visual Studio 2008 solutia aflata in folderul “Start”.

Observati in Visual Studio folderul numit “Javascript”, care contine biblioteca Ajax 4.0.

Observati fisierul numit “Model1.edmx” – cel care contine modelul de date, construit pe baza tehnologiei ADO.NET Entity Framework pornind de la o baza de date.

Pasul 2

Acum vom crea serviciul ADO.NET Data Service.

1. In fereastra Solution Explorer (meniul View -> Solution Explorer), click dreapta pe proiect (numit AjaxAdoNetDataServices), apoi Add -> New Item.

2. Selectati ADO.NET Data Service, si dati-I numele “BusinessService.svc”.

3. Salvati solutia.

4. Deschideti fisierul BusinessService.svc.cs.

5. Inlocuiti comentariul /* TODO: put your data source class name here */ cu numele clasei care reprezinta modelul de date Entity Framework, FinancialDemoEntities.

6. Decomentati linia // config.SetEntitySetAccessRule("MyEntityset", EntitySetRights.AllRead); si modificati modul de acces pe serviciu (proprietatile de securitate).

7. Compilati solutia (meniul Build -> Build Solution).

8. Rulati cu serviciul ADO.NET Data Service. Click dreapta pe BusinesService.svc, apoi Set as Start Page.

9. Porniti proiectul (Ctrl + F5). Rezultatul:

10. Testati serviciul cu diferite interogari:

a. http://localhost:30343/BusinessService.svc/Company

b. http://localhost:30343/BusinessService.svc/Company?$top=3

c. http://localhost:30343/BusinessService.svc/Company(1)/Name

Pasul 3

Acum ne vom ocupa de interfata.

1. Adaugati in solutia Visual Studio un fisier de tip Stylesheet. Click dreapta pe proiect, Add -> New Item -> Stylesheet.

2. In fisierul nou creat, introduceti codul urmator:

body

{

}

.sys-template

{

display: none;

}

.odd

{

background-color:Gray;

}

.selected

{

background-color:Lime;

}

3. Deschideti fisierul Default.aspx. In sectiunea <head></head>, introduceti referintele catre fisierele Javascript care compun biblioteca Ajax 4.0, respectiv catre fisierul CSS. Sectiunea head trebuie sa arate asa:

<head runat="server">

<title>Ajax si ADO.NET Data Services</title>

<link href="Stylesheet1.css" type="text/css" rel="Stylesheet" />

<script type="text/javascript" src="Javascript/MicrosoftAjax.debug.js"></script>

<script type="text/javascript" src="Javascript/MicrosoftAjaxTemplates.js"></script>

<script type="text/javascript" src="Javascript/MicrosoftAjaxAdoNet.js"></script>

</head>

4. Modificati tag-ul body pentru a avea referinte la anumite namespace-uri Javascript:

<body xmlns:sys="javascript:Sys" xmlns:code="http://schemas.microsoft.com/aspnet/code"

xmlns:dataview="javascript:Sys.UI.DataView" sys:activate="*">

5. Creati interfata html pentru a afisa date care vin din baza de date. Anume, un tabel, respectiv un div pentru a afisa detaliile randului selectat la un moment dat in tabel.

a. Tabelul:

<div id="allCompanies" style="float: left; width: 400px">

<h2>

Companies</h2>

<table cellspacing="0" cellpadding="0" style="border-style: ridge">

<thead>

<tr>

<th>

Id

</th>

<th>

Name

</th>

</tr>

</thead>

<tbody id="companiesView" class="sys-template">

<tr sys:command="select" class:odd="{{ $index % 2 != 0 }}">

<td style="width: 50px; border-style: ridge">

{binding Id}

</td>

<td align="left" style="width: 250px; border-style: ridge">

{binding Name}

</td>

</tr>

</tbody>

</table>

</div>

b. Div-ul cu detalii:

<div id="companyDetails" class="sys-template" style="vertical-align: top">

<h2>

Company details</h2>

<input type="text" id="Id" value="{binding Id}" readonly="readonly" />

<input type="text" id="Name" value="{binding Name}" />

<br />

<input type="button" value="Update" sys:command="gaga" />

</div>

6. In sectiunea head introduceti urmatorul cod Javascript care realizeaza comunicarea cu serviciul ADO.NET Data Service, respectiv populeaza controalele de interfata cu date.

<script type="text/javascript">

var dataContext;

function pageLoad() {

dataContext = $create(Sys.Data.AdoNetDataContext,

{

serviceUri: "BusinessService.svc"

});

var companiesView = $create(Sys.UI.DataView,

{

dataProvider: dataContext,

fetchOperation: "Company",

fetchParameters: { $top: 10, $orderby: "Name" },

autoFetch: "true",

selectedItemClass: "selected",

initialSelectedIndex: 0

},

null, null, $get("companiesView")

);

var companyDetails = $create(Sys.UI.DataView,

null,

{

command: companyCommand

},

null, $get("companyDetails"));

$create(Sys.Binding,

{

source: companiesView,

target: companyDetails,

path: "selectedData",

targetProperty: "data"

});

}

function companyCommand(e, args) {

dataContext.saveChanges();

}

</script>

7. Setati Default.aspx ca pagina de pornire (Click dreapta pe Default.aspx, Set as Start Page), si rulati aplicatia (Ctrl + F5). Iata aplicatia:

8. Selectati diferite randuri din tabel. Observati cum se modifica detaliile din dreapta.

9. Modificati numele unei companii. Observati cum la parasirea <input>-ului, numele din tabel se modifica.

Apasati Update dupa ce ati modificat o companie (sau mai multe). Inchideti aplicatia si rulati din nou. Observati cum s-a realizat si salvarea in baza de date.