Das Chamäleon ASP.NET

Article
12/26/2006

Ein beständiger Quell der Freude bei der Entwicklung von Webseiten ist, dass verschiedene Browser und verschiedene Versionen des gleichen Browsers jeweils unterschiedliche Features unterstützen. Als Resultat stellen verschiedene Browser die gleiche HTML-Seite unterschiedlich dar und Entwickler waren jahrelang gezwungen Ihre Seiten für verschiedene Browser zu optimieren, wollten Sie dem Besucher ihrer Seite eine optimale "User Experience" anbieten.

Für ASP.NET Entwickler gehört dieses Problem sei der ersten Version von .NET (bis auf ein paar Ausnahmen) der Vergangenheit an. ASP.NET Webseiten setzen sich zu einem großen Teil aus ASP.NET Controls zusammen. Diese Controls sind anhand der Benutzeragenteninformationen in der Lage den Browser, der die Seite anfordert, zu erkennen und können daraufhin die Ausgabe auf die Darstellung des Browsers entsprechend anpassen. Die Benutzeragenteninformationen stehen übrigens als UserAgent-Eigenschaft oder als HttpRequest-Objekt zur Verfügung.

Entsprechend der Fähigkeit von Browsern, bestimmte Inhalte darstellen zu können, werden Browser in zwei Klassen unterteilt: "uplevel"-Browser (neuere Versionen) und "downlevel"-Browser (frühere Versionen).

Browser und Clientgeräte, die als "uplevel" bezeichnet werden, bieten in der Regel Unterstützung für:

ECMAScript (JScript, JavaScript), Version 1.2.
HTML, Version 4.0
Microsoft Document Object Model (MSDOM, Microsoft-Dokumentobjektmodell).
Cascading Stylesheets (CSS).

Browser und Clientgeräte, die als "Downlevel" bezeichnet werden, unterstützen nur HTML, Version 3.2

Um die Darstellung der Seite explizit zu steuern, anstatt sich auf die automatische Browsererkennung zu verlassen, kann die ClientTarget-Eigenschaft der Seite über die vordefinierten Standardeinstellungen ie5, ie4, uplevel und downlevel festgelegt werden. Mit der Angabe des downlevel-Alias kann die Darstellung einer Seite – unabhängig von dem eingesetzten Browser – mit HTML 3.2-kompatiblen Elementen erzwungen werden. Analog erzwingt die Angabe von uplevel die Ausgabe von CSS-Formatattributen, unabhängig davon, ob der Browser, der die Seite anfordert, diese verwenden kann oder nicht.

Ein kleines Beispiel soll dieses Konzept illustrieren. Zu diesem Zweck wurde in diesem Codebeispiel die ClientTarget-Eigenschaft in der Seitendirektive der Webseite explizit auf uplevel gesetzt ist.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" ClientTarget="uplevel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Benutzerverwaltung</title>

</head>

<body>

<div>

<asp:Label

ID="Label1" runat="server" Text="Benutzerverwaltung"

Font-Bold="False" Font-Italic="True"

Font-Names="Verdana" ForeColor="DarkGray"

Font-Size="Larger" />

<br />

<asp:Label

ID="Label2" runat="server" Text="Name:"

Font-Names="Verdana" ForeColor="DarkGray"

Font-Bold="False" Font-Size="Small" />

<br />

<asp:TextBox ID="txtName" runat="server" />

<asp:RequiredFieldValidator

ID="RequiredFieldValidator1" runat="server"

ControlToValidate="txtName"

ErrorMessage="Bitte geben Sie einen Namen ein." />

<br />

<asp:Button ID="btnLaden" runat="server" Text="Laden" />

</div>

</form>

</body>

</html>

Entsprechend dieser Einstellungen rendern die ASP.NET Server Controls (<asp:Label />, <asp:TextBox />, <asp:RequiredFieldValidator />, <asp:Button ID="btnLaden" />) in dem Beispiel den Inhalt der Seite unterschiedlich.

ClientTarget="uplevel"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Benutzerverwaltung

</title></head>

<body>

<div>

</div>

<!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// -->

</script>

<!--

function WebForm_OnSubmit() {

if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;

return true;

}

// -->

</script>

<div>

<span id="Label1" style="color:DarkGray;font-family:Verdana;font-size:Larger;font-weight:normal;font-style:italic;">Benutzerverwaltung</span>

<br />

<br />

<span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">Bitte geben Sie einen Namen ein.</span>

<br />

</div>

<!--

var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));

// -->

</script>

<!--

var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");

RequiredFieldValidator1.controltovalidate = "txtName";

RequiredFieldValidator1.errormessage = "Bitte geben Sie einen Namen ein.";

RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";

RequiredFieldValidator1.initialvalue = "";

// -->

</script>

<div>

</div>

<!--

var Page_ValidationActive = false;

if (typeof(ValidatorOnLoad) == "function") {

ValidatorOnLoad();

}

function ValidatorOnSubmit() {

if (Page_ValidationActive) {

return ValidatorCommonOnSubmit();

}

else {

return true;

}

// -->

</script>

</form>

</body>

</html>

ClientTarget="downlevel"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Benutzerverwaltung

</title></head>

<body>

<!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// -->

</script>

<div>

<span id="Label1"><i><font face="Verdana" color="DarkGray">Benutzerverwaltung</font></i></span>

<br />

<br />

<br />

</div>

</body>

</html>

Schöne Grüße

Daniel

Das Chamäleon ASP.NET

Additional resources