jQuery in ASP.NET verwenden

JQuery ist ein sehr beliebtes JavaScript-Framework mit einer Vielzahl an Funktionen. JQuery ist kostenlos zum Download bereitgestellt und kann auch kommerziell verwendet werden. In diesem Beispiel wird die Einbindung von jQuery in ASP.NET beschrieben. Dieses wird an einem kleinen Beispiel erklärt indem einfach nach einem Klick auf einen Button einfaden soll.

Starten Sie zuerst ein neues ASP.NET Projekt über Start – Neu – Webseite – ASP.NET-Webseite. Anschließend sehen Sie die Standardvorgaben von ASP.NET. Gehen Sie jetzt links in den Projektmappen-Explorer und erstellen Sie einen neuen Ordner in der Projektmappe. In diesem Beispiel nennen wir den Ordner scripts.

jquery-in-asp-net-einbinden-1

Anschließend benötigen Sie das jQuery Framework. Sollten Sie es noch nicht heruntergeladen haben können Sie es hier machen. ( Link: http://docs.jquery.com/Downloading_jQuery ). Suchen Sie jetzt das jQuery Framework auf Ihrem Computer und ziehen Sie es via Drag and Drop in den scripts Ordner.

jquery-in-asp-net-einbinden-2

Gehen Sie anschließend wieder zurück in den Markup bzw. HTML Code. Fügen Sie anschließend in den Head-Bereich folgende Zeilen ein.

<script type=”text/javascript” src=”scripts/jquery-1.3.2.min.js”></script>
&lgt;script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function () {
$(“p”).show(“slow”);
});
});
</script>

jquery-in-asp-net-einbinden-3

Im oberen Code wird zuerst der Pfad zu dem jQuery-Framework angegeben und anschließend die auszuführende Funktion, in diesem Fall soll bei einem Klick auf das Objekt Button ein Text p erscheinen. Gehen Sie jetzt in den Body-Bereich und fügen Sie folgenden Zeilen hinzu.

<button>Anzeigen</button>
<p style=”display: none”>Hallo</p>

jquery-in-asp-net-einbinden-4

Wenn Sie jetzt die Webseite starten und auf den Button klicken faded der Text langsam ein. Sie können jetzt auf den gesamten Funktionsbestand von jQuery zugreifen und verwenden.

Verwandte Artikel:


Suchbegriffe

Kategorie: Allgemein, ASP.NET, Tutorials Kommentieren »


Kommentar schreiben

Kommentar