Freigeben über


Clientskript in ASP.NET-Webseiten

Aktualisiert: November 2007

ASP.NET-Webanwendungen sind nicht auf serverbasierte Tools und Sprachen beschränkt. Sie können ECMAScript-Seiten (JavaScript oder JScript) in Ihre ASP.NET-Webseiten einbinden, um eine umfassende browserbasierte Funktionalität zu erstellen. Eine Vielzahl von Features zur Clientskriptunterstützung ist in ASP.NET verfügbar.

Eine Möglichkeit besteht darin, einzelne Ausschnitte mit Clientskript zu erstellen und diese ASP.NET-Webseiten hinzuzufügen, um das Browserverhalten zu unterstützen, das Sie für die Anwendung entwerfen. Diese Option ist hilfreich, wenn Sie nur einige kleine JavaScript-Codeausschnitte einbinden möchten oder wenn Sie mit JavaScript-Code arbeiten, den Sie bereits erstellt haben. Mithilfe dieser Option können Sie die Größe der ASP.NET-Webseiten außerdem möglichst gering halten.

Alternativ dazu können Sie die leistungsfähigen AJAX-Features von ASP.NET nutzen. Diese AJAX-Features umfassen ein vollständiges Framework, das Folgendes unterstützt:

  • Objektorientierte Programmierung in JavaScript

  • Asynchrone Postbacks

  • Anwendungswebdienste für die Authentifizierung und Profile

  • Serversteuerelemente, die Clientskript mit Unterstützung für erweitertes Debuggen und Ablaufverfolgung verwalten

Mithilfe von ASP.NET-AJAX-Features können Sie die JavaScript-Funktionalität bei geringem manuellem Codeerstellungsaufwand nutzen. Sie können die erweiterte JavaScript-Funktionalität sowie ein Framework zum Erstellen von Clientfunktionalität verwenden, das in ASP.NET integriert ist.

Dieses Thema verschafft Ihnen einen Überblick über die Optionen zum Hinzufügen von Skript zu ASP.NET-Webseiten. Sie enthält die folgenden Abschnitte:

  • Szenarien

  • Einbinden von benutzerdefiniertem Clientskript in ASP.NET-Seiten

  • Erweitern von JavaScript mit ASP.NET-AJAX-Features

  • ASP.NET-Serversteuerelemente, die von Clientskript abhängig sind

  • Hinzufügen von Clientskriptereignissen zu ASP.NET-Serversteuerelementen

  • Verweisen auf Serversteuerelemente in Clientskript

  • Auslösen von Clientklickereignissen für Serversteuerelemente

  • Kommunizieren zwischen Clientskript und Servercode

  • Erstellen von Clientskriptkomponenten

  • Hinzufügen von Clientfunktionalität zu Serversteuerelementen

Szenarien

Verwenden Sie Clientskript, wenn Sie die folgenden Aktionen durchführen möchten:

  • Verbessern der Benutzerfreundlichkeit bei Webseiten, die aufwändiger gestaltet sind, stärker auf Benutzeraktionen reagieren und sich wie traditionelle Clientanwendungen verhalten. Sie können Clientskript z. B. verwenden, um die Tastatureingabe in einem Textfeld nach der Eingabe jedes weiteren Zeichens zu überprüfen.

  • Hinzufügen der AJAX-Funktionalität zu ASP.NET-Webseiten, um Folgendes zu ermöglichen:

    • Reduzieren von ganzseitigen Aktualisierungen und Vermeiden von Flackern beim Seitenaufbau, indem Sie DOM-Elemente auf der Seite dynamisch bearbeiten

    • Aktualisieren und Verwalten der Benutzeroberfläche ohne Postback zum Server

    • Unterteilen des Codes in Clientkomponenten. Clientkomponenten sind wiederverwendbare Objekte, die JavaScript-Code kapseln, der auf dem Microsoft AJAX Library basiert. Clientkomponenten können auch mithilfe von benutzerdefinierten serverseitigen Steuerelementen verwaltet werden, oder ihnen können vorhandene Serversteuerelemente zugeordnet werden, um Clientfunktionalität hinzuzufügen.

Einbinden von benutzerdefiniertem Clientskript in ASP.NET-Seiten

Da ASP.NET-Webseiten nur HTML-Markup rendern, können Sie einer ASP.NET-Seite auch eigenes Clientskript hinzufügen. Die Unterstützung von Clientskript in ASP.NET-Seiten hängt von der Unterstützung für Clientskript durch den aufrufenden Browser ab. Wenn die Seite im Browser eines Mobiltelefons oder eines anderen Geräts ausgeführt wird, hängt der Grad der Unterstützung für Clientskript vom jeweiligen Browser ab.

Es gibt mehrere Möglichkeiten zum Einbinden von Clientskript in ASP.NET-Seiten:

  • Sie können Clientskript statisch in einen script-Block einfügen, der Code enthält oder der ein include-Attribut verwendet, um auf eine JavaScript-Datei (.js) zu verweisen. Verwenden Sie diese Option zum Einfügen von Skriptblöcken oder von JavaScript-Dateien mit Clientskript, die Sie nicht dynamisch erstellen müssen und die keine zusätzliche AJAX-Funktionalität aus der Microsoft AJAX Library erfordern.

  • Sie können Clientskript einer ASP.NET-Webseite dynamisch hinzufügen, indem Sie die ClientScriptManager-Klasse verwenden. Nutzen Sie diese Möglichkeit zum Erstellen von Skripts, die von den Informationen abhängig sind, die nur zur Laufzeit verfügbar sind.

  • Wenn Sie die AJAX-Features von ASP.NET nutzen möchten, können Sie Clientskriptdateien verwalten, indem Sie das ScriptManager-Serversteuerelement verwenden. Das ScriptManager-Serversteuerelement stellt außerdem sicher, dass die Microsoft AJAX Library im Browser geladen ist, bevor Ihre Skripts ausgeführt werden. Weitere Informationen finden Sie unter Übersicht über ASP.NET-AJAX.

Einbinden statischer Clientskriptblöcke

Sie können einer ASP.NET-Seite genauso wie HTML-Seiten script-Blöcke hinzufügen. Sie können Clientskript verwenden, um Ereignishandler für Clientereignisse wie das onload-Ereignis der Seite zu schreiben. Wenn eine ASP.NET-Seite im Browser ausgeführt wird, können die Markupelemente auf der Seite per Clientskript angesprochen werden. Sie lösen alle Clientereignisse aus, die sie auch auf einer HTML-Seite auslösen.

Hinweis:

Sie können in Clientskript auf ASP.NET-Serversteuerelemente verweisen. Weitere Informationen finden Sie unter Verweisen auf Serversteuerelemente in Clientskript weiter unten in diesem Thema.

Eine ASP.NET-Webseite kann auch auf eine Skriptdatei zugreifen, indem sie darauf im src-Attribut eines <script>-Tags verweist. Dies ist im folgenden Beispiel dargestellt:

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

Es ist hilfreich, Clientskript in externen JS-Dateien anzuordnen, anstatt auf den Seiten selbst. Auf diese Weise wird außerdem die Verwaltung der Versionskontrolle und die gemeinsame Nutzung auf unterschiedlichen Seiten erleichtert.

Externe JS-Dateien werden vom Browser auf ähnliche Weise wie Webseiten und Bilder zwischengespeichert. Nachdem das Skript vom Browser als externe Datei geladen wurde, ist es im Cache für alle anderen Webseiten verfügbar, die es benötigen. Dies kann zu einer besseren Leistung der Webanwendung beitragen.

Dynamisches Erstellen von Clientskript

In vielen Fällen können Sie das Clientskript für eine Seite deklarativ erstellen, normalerweise als Skriptblock. Es kann jedoch auch sein, dass Sie Clientskript dynamisch erstellen möchten. Dies ist dann von Nutzen, wenn das Skript von den Informationen abhängig ist, die nur zur Laufzeit verfügbar sind. Sie können z. B. Clientskript in eine Seite einfügen, das ein Serversteuerelement anspricht, dessen Name (ID) bis zur Ausführung der Anwendung unbekannt bleibt. Sie können auch Skript erstellen, das von Werten abhängig ist, die von einem Benutzer stammen.

Sie können Clientskript dynamisch erstellen und in eine gerenderte Seite einfügen, indem Sie Methoden der ClientScriptManager-Klasse aufrufen, z. B.:

Das folgende Beispiel zeigt, wie Sie der Seite dynamisch generiertes Clientskript hinzufügen. Der Code überprüft, ob ein Kontrollkästchen mit dem Namen checkDisplayCount aktiviert ist. Wenn ja, führt der Code die folgenden Aufgaben aus:

  • Es wird eine Clientskriptfunktion erstellt, die ein span-Element verwendet, um die Zeichenanzahl in einem TextBox-Steuerelement mit dem Namen TextBox1 anzuzeigen.

  • Dem TextBox-Steuerelement wird ein Clientereignis hinzugefügt.

  • Das span-Element wird generiert.

Der Code setzt voraus, dass die Seite ein Kontrollkästchen mit dem Namen checkDisplayCount enthält, dessen AutoPostBack-Eigenschaft auf true gesetzt ist, sowie ein PlaceHolder-Steuerelement mit dem Namen PlaceHolder1.

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    If checkDisplayCount.Checked Then
        Dim scriptText As String = ""
        scriptText &= "function DisplayCharCount(){"
        scriptText &= "   getElementByID("spanCounter").innerText = " & _
            "document.forms[0].TextBox1.value.length"
        scriptText &= "}"
        ClientScriptManager.RegisterClientScriptBlock(Me.GetType(), _
            "CounterScript", scriptText, True)
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()")
        Dim spanLiteral As New LiteralControl()
        spanLiteral.Text = "<span id=""spanCounter""></span>"
        PlaceHolder1.Controls.Add(spanLiteral)
    End If
End Sub

void Page_Load(object sender, EventArgs e)
{
    if(checkDisplayCount.Checked)
    {
        String scriptText = "";
        scriptText += "function DisplayCharCount(){";
        scriptText += "   spanCounter.innerText = " + 
            " document.forms[0].TextBox1.value.length";
        scriptText += "}";
        ClientScriptManager.RegisterClientScriptBlock(this.GetType(), 
           "CounterScript", scriptText, true);
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
        LiteralControl spanLiteral = new 
            LiteralControl("<span id=\"spanCounter\"></span>");
        PlaceHolder1.Controls.Add(spanLiteral);
    }
}

Weitere Informationen finden Sie unter Gewusst wie: Dynamisches Hinzufügen von Clientskripts zu ASP.NET-Webseiten.

Für ClientScriptManager-Klassenmethoden geben Sie einen Typ an, der dem Skriptblock zugeordnet ist, und Sie versehen den Skriptblock mit einem Schlüssel. Das Angeben eines Typs hilft beim Vermeiden von Konflikten, wenn sowohl eine Seite als auch beliebige Steuerelemente (benutzerdefinierte Steuerelemente oder Benutzersteuerelemente) derselben Seite Skriptblöcke hinzufügen. Die Verwendung eines Schlüssels beugt Verdoppelungen vor. Wenn Sie eine der Methoden zum Hinzufügen von Skript aufrufen und ein Skript mit dem gleichen Schlüssel und dem gleichen Typ bereits vorhanden ist, wird das Skript nicht erneut hinzugefügt.

Der angegebene Typ und Schlüssel tragen dazu bei, dass unnötige Verdoppelungen vermieden werden. Aus diesem Grund müssen Sie im Allgemeinen nicht explizit ermitteln, ob ein Skriptblock bereits vorhanden ist. Wenn es sich bei einer Anwendung anbietet, nach einem vorhandenen Skriptblock zu suchen, dann können Sie dazu die folgenden Methoden aufrufen:

Hinzufügen von Clientskript mit dem ScriptManager-Steuerelement

Beim Verwenden der ASP.NET-AJAX-Features können Sie das ScriptManager-Steuerelement verwenden, um auf einer Seite Skriptdateien hinzuzufügen. Dazu gehören auch statische Skriptdateien (JS-Dateien) auf Datenträger und Skriptdateien, die als Ressourcen in einer Assembly eingebettet sind. Sie können die Skriptdateien deklarativ im Steuerelement angeben. Alternativ dazu können Sie die Registrierungsmethoden des ScriptManager-Steuerelements verwenden, mit denen Sie vorhandene Clientskriptdateien programmgesteuert verwalten und Skripts zur Unterstützung der Teilaktualisierung von Seiten verwenden können.

Eine Übersicht über das ScriptManager-Steuerelement finden Sie unter Übersicht über das ScriptManager-Steuerelement. Informationen dazu, wie Sie eine JavaScript-Datei als Ressource in eine Assembly einbetten und diese auf einer Webseite verwenden, finden Sie unter Exemplarische Vorgehensweise: Einbetten einer JavaScript-Datei als Ressource in eine Assembly.

Hinweis:

Wenn Sie AJAX-Clientfunktionen von ASP.NET nutzen, jedoch keine serverbasierten Funktionen, verwenden Sie die Methoden der ClientScriptManager-Klasse, um Skripts in eine ASP.NET-Webseite einzufügen. Wenn Sie z. B. nicht das UpdatePanel-Steuerelement oder die Lokalisierungsfeatures für Skripts verwenden, benötigen Sie das ScriptManager-Steuerelement nicht. Deshalb können Sie auch die entsprechenden Methoden nicht aufrufen, um Clientskript in die Seite einzufügen. Das Verwenden der Methoden der ClientScriptManager-Klasse ist in der Regel effizienter als die Verwendung der Methoden des ScriptManager-Steuerelements. Der Grund ist, dass ClientScriptManager-Klassenmethoden keine zusätzliche Verarbeitung für serverbasierte Features erfordern, die vom ScriptManager-Steuerelement unterstützt werden. Wenn Sie Skript dynamisch erstellen müssen (anstatt einfach vorhandenes Skript zu verwalten), verwenden Sie die ClientScriptManager-Klasse zum Einfügen von Clientskript in eine Seite. Verwenden Sie z. B. die ClientScriptManager-Klasse, wenn Sie Clientskript programmgesteuert basierend auf Informationen erstellen möchten, auf die eine bereits vorhandene Skriptdatei nicht verweisen kann.

Erweitern von JavaScript mit ASP.NET-AJAX-Features

ASP.NET unterstützt die AJAX-Funktionalität, mit deren Hilfe Sie Clientskript verwenden können, um einer ASP.NET-Webseite umfangreiche Features hinzuzufügen. Dazu gehören asynchrone Postbacks, eine sehr reaktionsfähige Benutzeroberfläche usw. Die AJAX-Funktionalität wird mithilfe der Microsoft AJAX Library implementiert und umfasst Bibliotheken mit Clientskripts, in denen browserübergreifende ECMAScript (JavaScript)- und Dynamic HTML (DHTML)-Technologien integriert sind. Die AJAX-Funktionalität ist in die serverbasierte ASP.NET-Entwicklungsplattform integriert.

Sie können das Microsoft AJAX Library-Typsystem, objektorientierte Features und Erweiterungen für JavaScript-Objekte verwenden, um die folgenden Funktionen zum Erstellen von benutzerdefiniertem Clientskript bereitzustellen:

  • Namespaces

  • Vererbung

  • Schnittstellen

  • Enumerationen

  • Reflektion

  • Hilfselemente für das Debuggen

  • Ablaufverfolgung

  • Typisierte Ausnahmebehandlung

  • Hilfsmethoden für Zeichenfolgen und Arrays

    Hinweis:

    Sie können die Microsoft AJAX Library auch verwenden, wenn Sie die serverbasierten AJAX-Features von ASP.NET nicht nutzen möchten.

Weitere Informationen dazu, wie die Microsoft AJAX Library JavaScript erweitert, finden Sie in den folgenden Themen:

Browserkompatibilität der AJAX-Features

Eine Browserkompatibilitätsebene der Microsoft AJAX Library stellt AJAX-Skriptkompatibilität für die am häufigsten verwendeten Browser bereit (einschließlich Microsoft Internet Explorer, Mozilla Firefox und Apple Safari). Dadurch können Sie dasselbe Skript schreiben, unabhängig davon, für welchen der unterstützten Browser dies vorgesehen ist. Weitere Informationen finden Sie unter Übersicht über ASP.NET-AJAX.

ASP.NET-Serversteuerelemente, die von Clientskript abhängig sind

Einige ASP.NET-Serversteuerelemente sind bezüglich ihrer Funktionalität von Clientskript abhängig. So benötigt z. B. das LinkButton-Steuerelement Clientskript als Unterstützung für sein Postbackverhalten. Das für ASP.NET-Webserversteuerelemente erforderliche Clientskript wird der Seite bei ihrer Darstellung automatisch hinzugefügt. Das für diese Steuerelemente generierte Clientskript ist von jedem selbst erstellten Clientskript unabhängig.

Weitere Informationen finden Sie unter Verwendung von Clientskript durch ASP.NET-Webserversteuerelemente.

Hinzufügen von Clientskriptereignissen zu ASP.NET-Serversteuerelementen

ASP.NET-Steuerelemente werden auf der Seite als Elemente gerendert. (Welche Elemente genau von einem Steuerelement gerendert werden, hängt von der Markupsprache der Seite ab, z. B. HTML, XHTML usw.) Sie können deshalb Steuerelementen genauso wie anderen Elementen auf der Seite eine Clientskript-Ereignisbehandlung hinzufügen. In einigen Fällen ist es jedoch erforderlich, dass Sie wissen, wie das Steuerelement die Ausgabe darstellt und welche Attribute das Steuerelement für sich reserviert.

Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Clientskriptereignissen zu ASP.NET-Webserversteuerelementen

Deklaratives Hinzufügen von Clientereignishandlern

Im Markup für ASP.NET-Serversteuerelemente werden die Eigenschaftenwerte mithilfe von Attributen festgelegt. Um beispielsweise die Text-Eigenschaft eines TextBox-Steuerelements festzulegen, können Sie folgendes Markup erstellen:

<asp:textbox id="TextBox1"  text="Sample Text" />
Sicherheitshinweis:

Benutzereingaben in TextBox stellen ein potenzielles Sicherheitsrisiko dar. Standardmäßig stellt die ASP.NET-Seite sicher, dass die Benutzereingabe keine Skript- oder HTML-Elemente enthält. Weitere Informationen finden Sie unter Übersicht über Skriptangriffe.

Wenn Sie ein Attribut einfügen, das keiner Steuerelementeigenschaft zugeordnet werden kann, ignoriert ASP.NET das Attribut bei der Serververarbeitung. Es wird unverändert als Teil des vom Steuerelement generierten Markups an den Browser übergeben. So verfügt z. B. das TextBox-Steuerelement über keine Eigenschaft mit dem Namen onkeyup. Wenn Sie jetzt für ein TextBox-Steuerelement ein onkeyup-Attribut in das Markup einfügen, wird das Attribut daher an den Browser übergeben. Aufgrund dieses Verhaltens können Sie Ereignisbindungen an Serversteuerelemente per Deklaration im Markup hinzufügen. Das folgende Markup für ein TextBox-Steuerelement bewirkt beispielsweise, dass im Textfeld die aktuelle Textlänge in einem span-Element mit dem Namen spanCounter immer dann angezeigt wird, wenn der Benutzer im Textfeld auf eine Taste drückt.

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="spanCounter.innerText=this.value.length;" />

Als Alternative kann das Ereignis eine Methode aufrufen, die in einem Clientskript an anderer Stelle der Seite definiert ist:

<asp:textbox id="TextBox1"  text="Sample Text" 
  onkeyup="DisplayCount(this);" />

Beachten Sie, dass die für den Servercode verwendete Programmiersprache (Visual Basic oder C#) keine Auswirkungen auf Clientskript hat, das immer in ECMAScript (JavaScript oder JScript) geschrieben wird.

Weitere Informationen finden Sie unter Gewusst wie: Hinzufügen von Clientskriptereignissen zu ASP.NET-Webserversteuerelementen.

Hinzufügen von Attributen im Servercode

Sie können einem Steuerelement direkt übergebene Attribute nicht nur deklarativ, sondern auch programmgesteuert mittels Servercode hinzufügen. Dies bietet sich an, wenn der Wert des hinzuzufügenden Attributs nur zur Laufzeit bekannt ist. Ausführliche Informationen finden Sie unter Gewusst wie: Festlegen von HTML-Attributen für Steuerelemente in ASP.NET-Webseiten.

Verweisen auf Serversteuerelemente in Clientskript

Bei der Darstellung eines ASP.NET-Serversteuerelements wird die ClientID-Eigenschaft des Steuerelements sowohl als id-Attribut als auch als name-Attribut des sich ergebenden Elements auf der Seite gerendert. (Die ClientID-Eigenschaft wird automatisch aus der von Ihnen festgelegten ID-Eigenschaft generiert.) Zum Beispiel können Sie das folgende ASP.NET-Serversteuerelement erstellen:

<asp:textbox id="TextBox1"  text="Sample Text" />

Die ClientID-Eigenschaft wird auf TextBox1 festgelegt, und das sich ergebende Element sieht in einem HTML-basierten Browser folgendermaßen aus:

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />
Hinweis:

Das form-Element stellt nur ein ID-Attribut, kein name-Attribut dar.

Aus diesem Grund können Sie mit diesen Attributen in Clientskript auf das Serversteuerelement verweisen. Normalerweise sprechen Sie das Steuerelement an, indem Sie in Clientskript einen vollqualifizierten Verweis verwenden. Wenn das Steuerelement auf der Seite ein untergeordnetes Element des form-Elements ist, verweisen Sie in Clientskript in der Regel auf das Steuerelement, indem Sie die im folgenden Beispiel gezeigte Syntax verwenden:

var tb1 = document.getElementById("TextBox1");
tb1.value = "New value";

Im folgenden Beispiel wird angenommen, dass auf der Seite das id-Attribut des form-Elements auf form1 festgelegt wurde.

document.form1.TextBox1.value = "New value";

Die genaue Syntax, die Sie für einen Verweis auf ein Serversteuerelement benötigen, hängt von dem verwendeten Steuerelement ab und davon, ob das Steuerelement einem anderen Steuerelement untergeordnet ist. Wenn Sie sich nicht sicher sind, wie Sie auf ein Steuerelement verweisen sollen, kann es hilfreich sein, die Seite auszuführen, sich den Quellcode anzusehen und zu bestimmen, wie das Steuerelement dargestellt worden ist.

Verweisen auf Steuerelemente, die innerhalb von anderen Steuerelementen dargestellt werden

Einige Steuerelemente stellen untergeordnete Steuerelemente auf der Seite dar. Dazu gehören Datenlistensteuerelemente, wie die Steuerelemente ListView, GridView, DetailsView, FormView, DataList und Repeater, Benutzersteuerelemente und Webparts-Steuerelemente.

In diesen Fällen verfügen die untergeordneten Steuerelemente ggf. nicht über eindeutige IDs. Der Grund hierfür kann sein, dass die untergeordneten Steuerelemente in einer Vorlage definiert sind, die für jede Datenzeile neue Steuerelementinstanzen generiert (Datenlistensteuerelemente). Ein anderer Grund ist, dass das übergeordnete Steuerelement der Seite über eine externe Quelle hinzugefügt werden kann (Benutzersteuerelemente und Webparts-Steuerelemente). Diese übergeordneten Steuerelemente sind daher Benennungscontainer (das heißt, sie implementieren INamingContainer). Ein Benennungscontainer garantiert, dass seine untergeordneten Steuerelemente über eindeutige IDs auf der Seite verfügen.

Sie können z. B. im DataList-Steuerelement eine ItemTemplate-Eigenschaft erstellen. In der Vorlage können Sie ein CheckBox-Steuerelement hinzufügen, dessen ID auf checkEnabled gesetzt ist. Bei der Darstellung des DataList-Steuerelements wird für jedes Datenelement ein neues checkEnabled-Steuerelement dargestellt. Die gerenderte Seite darf nicht mehrere Instanzen eines Elements mit dem Namen checkEnabled enthalten. Aus diesem Grund erstellt das DataList-Steuerelement für alle untergeordneten Steuerelemente eine eindeutige Identität.

Eindeutige Identitäten für untergeordnete Steuerelemente eines Benennungscontainers werden generiert, indem zwei Eigenschaften dargestellt werden. Für jedes untergeordnete Steuerelement:

  • Die UniqueID-Eigenschaft des Steuerelements wird als name-Attribut dargestellt.

  • Die ClientID-Eigenschaft des Steuerelements wird als id-Attribut dargestellt.

Sowohl die ClientID-Eigenschaft als auch die UniqueID-Eigenschaft basieren auf der ursprünglichen ID-Eigenschaft, die mit genügend Informationen ergänzt wurde, um zu garantieren, dass das Ergebnis in der Seite eindeutig ist. Auf den Wert von ClientID (also auf das id-Attribut im gerenderten Element) kann in Clientskript verwiesen werden.

Wenn Sie eine Seite mit einem Benennungscontainer im Browser anzeigen, können Sie sich im Quellcode der Seite die eindeutigen IDs ansehen, die als name-Attribut und als id-Attribut für die untergeordneten Steuerelemente des Benennungscontainers generiert wurden. Es wird jedoch empfohlen, dass Sie nicht direkt auf die IDs verweisen, die Sie im Browser sehen. Die Formel zum Generieren eindeutiger IDs für untergeordnete Steuerelemente kann sich ändern. Rufen Sie stattdessen den Wert der ClientID-Eigenschaft des untergeordneten Steuerelements im Servercode ab, und verweisen Sie mit diesem Wert auf das untergeordnete Steuerelement. Zum Beispiel können Sie Clientskript dynamisch in der Seite erstellen. Wenn das Clientskript auf ein untergeordnetes Steuerelement verweist, rufen Sie die ClientID-Eigenschaft des untergeordneten Steuerelements ab, und integrieren Sie sie in ihr dynamisches Skript.

Auslösen von Clientklickereignissen für Serversteuerelemente

Wie bereits weiter oben erwähnt, können Sie den meisten ASP.NET-Serversteuerelementen ein Clientklickereignis hinzufügen, indem Sie dem Markup des Steuerelements das onclick-Attribut hinzufügen. Einige Steuerelemente reservieren jedoch das onclick-Attribut zum Definieren der Bindung an ein Serverereignis. Dazu gehören die Steuerelemente Button, LinkButton und ImageButton. In diesen Steuerelementen können Sie das onclick-Attribut nicht verwenden, um dem Steuerelement deklarativ einen Clientskripthandler hinzuzufügen.

Sie können einem Klickereignis einen Clientskripthandler auf zwei Arten hinzufügen:

  • Legen Sie die OnClientClick-Eigenschaft des Steuerelements auf das auszuführende Skript fest. Bei der Darstellung des Button-Steuerelements wird der OnClientClick-Wert in ein onclick-Attribut umgewandelt.

  • Fügen Sie programmgesteuert ein onclick-Attribut hinzu, indem Sie die Add-Methode der Attributes-Auflistung des Steuerelements aufrufen.

    Hinweis:

    Sie können einem Serversteuerelement ein onclick-Attribut nicht programmgesteuert hinzufügen, wenn das Steuerelement onclick bereits als Teil seiner grundlegenden Funktionalität verwendet, z. B. im Fall von LinkButton.

Das folgende Codebeispiel zeigt ein Button-Steuerelement, das sowohl das clientseitige als auch das serverseitige Click-Ereignis auslöst:

<asp:button id="Button1" 
   
  OnClientClick="return confirm('Ok to post?')" 
  onclick="Button1_Click" 
  Text="Click!" />

Kommunizieren zwischen Clientskript und Servercode

Zusätzlich zu standardmäßigen Postbacks können ASP.NET-Webseiten die Kommunikation zwischen Clientskript und Servercode auf verschiedene Arten durchführen. AJAX-Features in ASP.NET, z. B. das UpdatePanel-Serversteuerelement, ermöglichen die Automatisierung der asynchronen Teilaktualisierung von Seiten. Außerdem unterstützt ASP.NET-AJAX das asynchrone Aufrufen von Webdiensten.

Wenn Sie keine AJAX-Features von ASP.NET verwenden, können Sie einen benutzerdefinierten Clientrückruf direkt aufrufen und verschiedene Verfahren anwenden, um Informationen zur gemeinsamen Nutzung von Browser und Server freizugeben. Der folgende Abschnitt enthält Informationen zu den verfügbaren Optionen:

Aufrufen von Servercode direkt aus Clientskript

Der Servercode kann von Clientskript direkt aufgerufen werden, indem Sie einen Clientrückruf implementieren. Jede Benutzeraktion auf einer ASP.NET-Webseite, die die Ausführung von Servercode nach sich zieht, erfordert in der Regel ein Postback. Sie können die Serververarbeitung über den Browser jedoch auch ohne ein vollständiges Postback aufrufen. In diesem Szenario sendet der Browser nicht die gesamte Seite an den Server, um sie erneut zu laden, wenn der Server reagiert. Stattdessen sendet der Browser eine kleine Datenmenge an den Server. Wenn der Server eine Antwort sendet, verarbeitet das Clientskript im Browser die zurückgegebenen Daten, ohne die Seite neu zu laden. Während der Serververarbeitung wird der Clientzustand beibehalten, z. B. lokale Variablen. Dieser Prozess wird als asynchrones Postback bezeichnet und ist für das Teilrendering von Seiten von zentraler Bedeutung.

Sie können Servermethoden aus Clientskript ohne Postback wie folgt aufrufen:

  • Verwenden Sie das UpdatePanel-ASP.NET-Serversteuerelement. Dieses Steuerelement ist ein Teil der AJAX-Funktionalität von ASP.NET. Es ermöglicht Ihnen, eine Region einer Seite zu definieren, die per Teilaktualisierung aktualisiert wird. Wenn Sie das UpdatePanel-Steuerelement verwenden, müssen Sie selbst kein Clientskript schreiben, um asynchrone Teilaktualisierungen von Seiten aufzurufen. Weitere Informationen finden Sie unter Übersicht über das Teilrendering von Seiten und Übersicht über das UpdatePanel-Steuerelement.

  • Verwenden Sie die ASP.NET-AJAX-Unterstützung für die Webdienstkommunikation, um Clientskript zu schreiben, das eine Webservermethode aufruft. Dieser Ansatz ähnelt dem Konzept nach dem Schreiben Ihres eigenen Clientskript-Rückrufs zum Aufrufen einer Webservermethode. Die Microsoft AJAX Library behandelt jedoch die Details eines Aufrufs der Servermethode und stellt eine leistungsfähigere Clientskriptbibliothek zum Durchführen und Verarbeiten des Aufrufs bereit. Weitere Informationen finden Sie unter Webdienste in ASP.NET-AJAX.

  • Implementieren Sie einen Clientrückruf. In diesem Szenario schreiben Sie den Clientcode, der die Anforderung sendet und das Ergebnis verarbeitet. Der gängige Ansatz ist dabei das Erstellen einer aufrufenden Funktion im Clientskript und einer Rückruffunktion, die aufgerufen wird, wenn der Server die Ergebnisse zurückgibt. Weitere Informationen finden Sie unter Programmgesteuertes Implementieren von Clientrückrufen ohne Postbacks in ASP.NET-Webseiten

Jeder Ansatz hat bestimmte Vorteile. Das Erstellen eines eigenen Clientrückrufs führt häufig zum geringstmöglichen Aufwand und zu den kleinsten Seitengrößen. Wenn Sie das UpdatePanel-Serversteuerelement verwenden, können Sie Teilaktualisierungen von Seiten implementieren, ohne selbst Clientskript zu schreiben. Wenn Sie zum Aufrufen der Webdienste AJAX-Features verwenden, ist außerdem der größte Teil des Clientskripts nicht erforderlich, den Sie zum Durchführen von asynchronen Webdienstaufrufen schreiben müssen.

Gemeinsames Nutzen von Daten mithilfe eines HiddenField-Steuerelements

Sie können Informationen für die gemeinsame Nutzung von Clientskript und Servercode freigeben, indem Sie der Seite ein HiddenField-Steuerelement hinzufügen. Sie können im Clientskript auf das ausgeblendete Feld anhand seiner ID verweisen. Sie können auf das ausgeblendete Feld jedoch auch im Servercode verweisen. Auf diese Weise können Sie Werte in einem der Codeblöcke speichern und sie im anderen lesen. Um Informationen vom Servercode an Clientskript zu übergeben, können Sie mit der RegisterHiddenField-Methode programmgesteuert ein ausgeblendetes Feld erstellen. Mithilfe dieser Methode können Sie für das Feld eine ID und einen Wert angeben. Sie können das Feld verwenden, um dynamische Werte so in der Seite zu speichern, dass sie von Clientskript gelesen werden können.

Freigeben von Daten mithilfe von Cookies

Die gemeinsame Nutzung von Werten zwischen Server- und Clientcode ist auch mithilfe von Cookies möglich. Weitere Informationen zum Schreiben und Lesen von Cookies im Servercode finden Sie unter Gewusst wie: Schreiben eines Cookies und Gewusst wie: Lesen eines Cookies. Ausführliche Informationen dazu, wie Sie JavaScript zum Lesen und Schreiben von Cookies verwenden, finden Sie unter JavaScript und Cookies (möglicherweise in englischer Sprache) auf der MSDN-Website.

Gemeinsames Nutzen von Daten während asynchroner Postbacks

Wenn Sie die AJAX-Features von ASP.NET nutzen, können Sie benutzerdefinierte Daten während asynchroner Postbacks (Teilrendering von Seiten) als Zeichenfolge vom Client an den Server senden, indem Sie die RegisterDataItem-Methode verwenden. Mithilfe der RegisterDataItem-Methode können Sie Servercode zum Registrieren eines Felds verwenden, das einem Steuerelement zugeordnet ist. Sie können auf den Wert des Felds im Clientskript im Browser zugreifen, indem Sie die ASP.NET-AJAX-Objekte Sys.WebForms.PageLoadingEventArgs, Sys.WebForms.PageLoadedEventArgs und Sys.WebForms.PageLoadedEventArgs verwenden. Die RegisterDataItem-Methode kann nur während eines asynchronen Postbacks aufgerufen werden.

Informationen dazu, wie Sie die RegisterDataItem-Methode zum gemeinsamen Nutzen von Daten zwischen Server und Client verwenden, finden Sie in den folgenden Themen:

Erstellen von Clientskriptkomponenten

Clientkomponenten sind wiederverwendbare Objekte, die JavaScript-Code kapseln, der auf der Microsoft AJAX Library basiert. Die Bibliothek stellt die folgenden Clientobjekt-Basistypklassen bereit: Component (eine Basisklasse für nicht visuelle Komponenten), Control und Behavior. Sie können diese Klassen für Ableitungen verwenden, um eine umfangreiche Clientfunktionalität bereitzustellen, z. B.:

  • Ermöglichen des Zugriffs auf den Lebenszyklus einer Komponente von ihrer Initialisierung bis zur Freigabe. Dies gilt auch für Ereignisse, die ausgelöst werden, wenn sich Eigenschaftenwerte ändern.

  • Darstellen eines DOM-Elements als Clientobjekt, das über neue Funktionalität verfügt. Dies erweitert das Verhalten von DOM-Elementen. Sie können z. B. Wasserzeichenverhalten hinzufügen, das einem vorhandenen Textfeld zugeordnet werden kann.

Weitere Informationen finden Sie unter den folgenden Themen:

Hinzufügen von Clientfunktionalität zu Serversteuerelementen

Sie können jedes vorhandene oder benutzerdefinierte ASP.NET-Serversteuerelement in ein ASP.NET-AJAX-Extendersteuerelement umwandeln. Ein Extendersteuerelement ist ein Webserversteuerelement, das die ECMAScript (JavaScript)-, DHTML- und AJAX-Funktionen des Webbrowsers verwendet, um Features wie Interaktivität und asynchrone Kommunikation mit dem Server hinzuzufügen.

Weitere Informationen finden Sie unter den folgenden Themen:

Siehe auch

Konzepte

ASP.NET-Webserversteuerelemente und Browserfunktionen

Ereignismodell für ASP.NET-Webserversteuerelemente