Das klassische ASP.NET-Webform-Modell erhält Konkurrenz aus eigenem Haus: Die ASP.NET Ajax-Bibliothek von Microsoft verhilf Webdevelopern das Umsetzen clientseitiger HTML-Anwendungen, die ohne Postbacks auskommen. Kompletten Artikel lesen ...

Schon in früheren Ausgaben berichtete das dot.NET-Magazin über die bevorstehende ASP.NET-AJAX-Version 4.0. In der Zwischenzeit hat sich einiges getan und mittlerweile ist die sechste Vorschau verfügbar. Verschaffen Sie sich einen Überblick über die Neuerungen und die Funktionsweise anhand praktischer Beispiele. Weiteres ...

The new AJAX 4 Version offers a new client side template engine. With this new engine it is possible to define data templates within HTML. The template engine offers three different ways to bind data. A good whitepaper and overview about all the new functionalities is available here.

I implemented a small example to demonstrate different technologies and the cooperation between the different tools. My example is using:

• Entity Framework / Entity Data Model
• ADO.NET Data Service
• AJAX 4 Preview
• JQuery + JQuery UI

I used the Northwind database and the employee data for my example.

To see how the application is working, click here

The below pictures explain the different parts and technologies.

GUI overview:

Application Architecture overview:

The example application contains a list of employee data. I used the client side data template from the AJAX 4 Preview Version to render the data table:

<table class="sys-template" border="0" width="100%" id="dataview" sys:attach="dv" dv:sys-key="master" dv:selecteditemclass="itemSelected" dv:oncommand="dataview_oncommand(sender,args)">
<tr class="sys-item-template" sys:command="Select">
  <td sys:command="Select">{{ FirstName }}</td>
  <td>{{ LastName }}</td>
  <td>{{ Address }}</td>
  <td>{{ City }}</td>
  <td>{{ Region }}</td>
</tr>
</table>

The complete example application is using pure JavaScript, there is no need to have either a *.aspx or codebehind *.aspx.cs file.

Die nächste ASP.NET-AJAX-Version 4 bringt einige interessante Neuerungen und Erweiterungen mit. Insbesondere datengetriebene Webanwendungen profitieren von den Möglichkeiten. Die neuen Features werden anhand praktischer Beispiele vorgestellt. Mehr ...

Auf meiner Homepage steht auf der folgenden Seite:

Northwind Sample

die erste BETA Version der Northwind Anwendung als ASP.NET Anwendung bereit. Diese Anwendung basiert auf der bekannten MS Access Northwind Anwendung. Ich habe diese beispielhaft nach ASP.NET migriert und zusätzlich AJAX Erweiterungen eingebaut, um ein "Rich GUI" umzusetzen.

Aufgrund der hohen Nachfrage aus der Community, habe ich bereits eine BETA Version auf meiner Homepage veröffentlicht.

Fehler und Wünsche können mir per Mail mitgeteilt werden.

Eine häufige Anforderung ist das Unterdrücken der Navigationsfunktion des Browser, insbesondere die Back - Funktion, die den Benutzer wiederauf die vorherige Seite führt. Soll dies verhindert werden, so muss auf der betroffenen Seite, also auf die nicht mehr gesprungen werden soll, folgender Javascript Aufruf erfolgen:

<script>
  window.history.forward(1);
</script>

Oft sind es anscheinend die einfachen Dinge im Leben, die das Leben schwer machen können. So versuchte ich einen Javascript-Aufruf innerhalb eines GridView zu realisieren. Dazu benutzte ich ein HyperLinkField, da dies für mich das wohl geeigneteste Control darstellte. So schrieb ich folgende Codezeile:

<asp:HyperLinkField HeaderText="Edit" Text="Details" DataNavigateUrlFields="EmployeeID"
DataNavigateUrlFormatString="javascript:OpenDialog({0})" />

Mit leider mässigen Erfolg. Das GridView "verschluckte" meine Anweisung und zeigte keinen Link an.

Erst nach langen Versuchen versuchte ich es mit einem BoundField und implementierte die folgende Codezeile:

<asp:BoundField DataFormatString="<a href=javascript:OpenDetailDialog({0})>{0}</a>" DataField="ProductID" HeaderText="Edit Item" />

So zeigt das GridView den Link an und die Javascript-Methode kann ohne Probleme aktiviert werden.

Möchte man das AJAX Popup Control (PopupControlExtender) verwenden und selbt mit Hilfe von Javascript aufrufen und anzeigen, so muss das Event Bubbling deaktiviert werden. Wird es nicht abgeschaltet, so wird das Popup Fenster direkt wieder geschlossen.

Beispiel:
event.cancelBubble = true;
// show the popup...
$find('popupBhvr').showPopup();

Teilweise soll eine serverseitige Funktion (also ein Postback) aus einer Javascript Methode aufgerufen werden. Dazu kann man einfach die ASP.NET Funktion __doPostback(...) selbst aufrufen:

function ManualPostBack()
{
__doPostBack("btnSubmit", "");
}

In manchen Fällen möchte man bei einem Control Click (Button, etc.) eine Prüfung durchführen und bei Misserfolg den Postback, also den Submit Vorgang, abbrechen. In den meisten Fällen reichen die ASP.NET Validatoren und die eigenen (ASP.NET Custom Validatoren) aus um den gewünschten Effekt zu erreichen.
Teilweise kann es allerdings nötig werden, über eine weitere Javascript Methode, den Postback Vorgang zu steuern.

Dies kann wie folg erreicht werden:

Die Methode CustomValidate() muss entweder false oder true zurückliefern:

function CustomValidate()
{
 if (ok)
  return true;
 else
  return false;
}