Next Generation "ASP.NET Ajax" – Dynamische Webseiten ohne Postbacks
» Von , 08.02.2010 20:45. Letztes Update, 08.02.2010 20:46.
Um die Daten auch bearbeiten zu können, werden diese in eine Detailanzeige geladen. Dazu wird ein weiteres DataView Template - wie es in Listing 3 zu sehen ist - angelegt. Da die Daten bereits in der Übersicht geladen wurden, wird der aktuell selektierte Eintrag an das neue DataView gebunden. Dies erfolgt im Ausdruck:
dv:data="{binding selectedData, source=$dgNorthwind }"
Da die Daten innerhalb des Detail DataView editierbar sein sollen, erfolgt die Datenbindung im Two-Way Live Binding-Modus. Die Attribute, bei denen eine Datenbindung stattfinden soll, müssen auf den JavaScript Namensraum Sys verweisen. Im Beispiel ist dies anhand der Attribute value der HTML Input-Elemente erkennbar (Abbildung 2).
Abbildung 2: Ajax ADO.NET Dataservices
Dieser Artikel hat nur einen kleinen Einblick in die Möglichkeiten von ASP.NET Ajax gegeben. Die Bibliothek beinhaltet noch weitaus mehr Funktionen, die es sich lohnt zu erkunden.
Das hier vorgestellt Beispiel kann unter der URL northwind-online548.aspnet4.de/Customers.html aufgerufen und getestet werden.
Links
[1] ASP.NET Ajax Library Beta: ajax.codeplex.com
[2] Online Beispiel: northwind-online548.aspnet4.de/Customers.htm
public class NorthwindData : DataService<NorthwindCDB>
{
public static void InitializeService(DataServiceConfiguration config)
{
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}
}
Listing 1: Die generische Klasse DataService
<body xmlns:dv="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">
{{ CompanyName }} | { binding ContactName } | {{ ContactTitle }} | {{ Address }} | {{ City }} | {{ Region }} | {{ Country }} |
...
Listing 2: Template mit Datenbindung
function pageLoad(sender, e) {
Sys.Application.activateElement(document.documentElement);
northwindService = $create(
Sys.Data.AdoNetDataContext,
{
serviceUri: "/NorthwindData.svc"
});
northwindService.fetchData("Customers", { $top:10 }, Sys.Data.MergeOption.appendOnly, "GET",
customers_Callback, error_Callback);
}
Listing 3: Datenbindung im Pageload-Event
KOMMENTARE
KOMMENTAR SCHREIBEN