Wie verwendet man JQuery mit Master Pages?

Question

Ich kann einfache Beispiele zum Laufen bringen, solange keine Masterseite involviert ist. Alles, was ich tun möchte, ist eine Schaltfläche klicken und haben es sagen "Hallo Welt" mit dem Javascript in einer .js-Datei, mit einer Master-Seite. Jede Hilfe sehr viel geschätzt :)

Answer 1

EDITAR

Wie @Adam in den Kommentaren anmerkt, gibt es einen nativen jQuery-Mechanismus, der im Grunde das Gleiche tut wie der Hack in meiner ursprünglichen Antwort. Mit jQuery können Sie Folgendes tun

 $('[id$=myButton]').click(function(){ alert('button clicked'); }); 

Mein Hack wurde ursprünglich als Prototype Workaround für ASP.NET entwickelt und ich habe ihn für die ursprüngliche Antwort angepasst. Beachten Sie, dass jQuery im Grunde die gleiche Sache unter der Haube tut. Ich empfehle die Verwendung der jQuery Weg, obwohl, über die Umsetzung meiner hack.

Original-Antwort für Kommentar-Kontext hinterlassen

Wenn Sie eine Masterseite verwenden, bringt ASP.NET die Namen der Steuerelemente auf den abhängigen Seiten durcheinander. Sie müssen einen Weg finden, um das richtige Steuerelement zu finden, um den Handler hinzuzufügen (vorausgesetzt, Sie fügen den Handler mit Javascript hinzu).

Dazu verwende ich diese Funktion:

function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

Dann können Sie etwas tun wie:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

wo Sie auf Ihrer Kinderseite Folgendes haben

<asp:Button ID="myButton" runat="server" Text="Click Me" />

Answer 2

Wenn Ihre Website Inhaltsseiten in anderen Ordnern hat, können Sie die Seite ResolveUrl Methode im src-Pfad stellt sicher, dass Ihre js-Datei immer gefunden werden kann:

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>

Answer 3

Vergewissern Sie sich, dass jQuery auf der Hauptseite hinzugefügt wird. Vorausgesetzt, Sie haben diese Kontrolle:

<asp:Button ID="myButton" runat="server" Text="Submit" />

Sie können das Javascript mit diesem verdrahten:

$(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});

$(document).ready() wird ausgelöst, wenn das DOM vollständig geladen ist und alle Elemente vorhanden sein sollten. Sie können dies weiter vereinfachen mit

$(function() {});

Die Syntax des Selektors $('[id$=myButton]') sucht Elemente anhand ihres id-Attributs, findet aber nur das Ende der Zeichenkette. Umgekehrt, '[id^=myButton]' würde mit dem Anfang übereinstimmen, aber für die Zwecke des Herausfilterns der UniqueID wäre das nicht sehr nützlich. Es gibt viele, viele weitere nützliche Selektoren, die Sie mit jQuery verwenden können. Lernen Sie sie alle und ein großer Teil Ihrer Arbeit wird Ihnen abgenommen.

Das Problem ist, dass ASP.Net für jedes Element ein eindeutiges id- und name-Attribut erstellt, was das Auffinden der Elemente erschwert. Früher musste man die UniqueID-Eigenschaft an das Javascript vom Server übergeben, aber jQuery macht das überflüssig.

Mit der Macht der jQuery-Selektoren, können Sie entkoppeln die Javascript von der Server-Seite ganz, und wireup Ereignisse direkt in Ihrem Javascript-Code. Sie sollten kein Javascript mehr in das Markup einfügen müssen, was die Lesbarkeit verbessert und das Refactoring erheblich erleichtert.

Answer 4

Bewegen Sie einfach die <script type="text/javascript" src="jquery.js" /> Tag in den head-Tag der Masterseite einfügen. Dann können Sie jquery in allen Inhaltsseiten verwenden.

Die Verwendung von Masterseiten mit jQuery ist keine Zauberei.

Answer 5

Die Lösung von Adam ist die beste. Einfach!

Hauptseite:

<head runat="server">    
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>    
</head>

Inhalt der Seite:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">       
<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=AlertButton]").click(function () {
            alert("Welcome jQuery !");
        });
    }); 
</script> 
</asp:Content>

wo die Taste ist

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