Udostępnij za pośrednictwem

Das Chamäleon ASP.NET

  • Artykuł

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">

<html xmlns="https://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Benutzerverwaltung</title>

</head>

    <body>

        <form id="form1" runat="server">

            <div>

                <asp:Label

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

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

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

                    Font-Size="Larger" />

                <br />

                <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 />

                <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">

<html xmlns="https://www.w3.org/1999/xhtml" >

<head><title>

Benutzerverwaltung

</title></head>

<body>

<form name="form1" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTQ5OTQxNDc3ZGSc409E/rebtnJIGPY4lpj9UKIcHg==" />

</div>

<script type="text/javascript">

<!--

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>

<script src="/ClientTarget/WebResource.axd?d=OF_ycAeEyoS1YxGgAoI3Fg2&amp;t=632969108944906146" type="text/javascript"></script>

<script src="/ClientTarget/WebResource.axd?d=wFFdy1h0cE0vw88ojJditOq7o464AD3s8S-LqSeUmxk1&amp;t=632969108944906146" type="text/javascript"></script>

<script type="text/javascript">

<!--

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="Label2" style="color:DarkGray;font-family:Verdana;font-size:Small;font-weight:normal;">Name:</span>

<br />

<input name="txtName" type="text" id="txtName" />

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

<br />

<br />

<input type="submit" name="btnLaden" value="Laden" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnLaden&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnLaden" />

</div>

<script type="text/javascript">

<!--

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

// -->

</script>

<script type="text/javascript">

<!--

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>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLr3vKqCwLEhISFCwKct5SxA0qg7S78OUEVS+kzdJhDLF6zY2mx" />

</div>

<script type="text/javascript">

<!--

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">

<html xmlns="https://www.w3.org/1999/xhtml" >

<head><title>

Benutzerverwaltung

</title></head>

<body>

<form name="form1" method="post" action="/ClientTarget/Default.aspx" id="form1">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTQ5OTQxNDc3ZGSc409E/rebtnJIGPY4lpj9UKIcHg==" />

<script type="text/javascript">

<!--

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>

<script src="/ClientTarget/WebResource.axd?d=OF_ycAeEyoS1YxGgAoI3Fg2&amp;t=632969108944906146" type="text/javascript"></script>

<div>

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

<br />

<br />

<span id="Label2"><font face="Verdana" color="DarkGray" size="3">Name:</font></span>

<br />

<input name="txtName" type="text" id="txtName" />

&nbsp;

<br />

<br />

<input type="submit" name="btnLaden" value="Laden" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnLaden&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnLaden" />

</div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLr3vKqCwLEhISFCwKct5SxA0qg7S78OUEVS+kzdJhDLF6zY2mx" /></form>

</body>

</html>

Schöne Grüße

Daniel

Comments