2010-12-01 13 views
2

Ich versuche, JQuery mit einigen Asp.net-Seiten zu verwenden, die Masterseiten verwenden, und ich habe Probleme mit dem Laden der JQuery-Javascript-Datei.JQuery mit MasterPage in ASP.NET

Wenn ich die Datei im Markup der Masterseite enthalten, es funktioniert ganz gut auf den Seiten, die in demselben Verzeichnis wie die Master-Seite sind:

<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

aber das bricht für Seiten, die nicht sind im selben Verzeichnis wie die Masterseite. Masterseiten erben den Pfad der Seite, auf der sie enthalten sind, sodass der relative Pfad zur JQuery-JS-Datei für verschiedene Seiten unterschiedlich ist. Und natürlich kann ich in der Master-Datei keine verschiedenen relativen Pfade haben, da es nur einen von ihnen gibt.

Ich konnte einen absoluten Pfad verwenden:

<script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

aber das bricht, wenn die Website als virtuelles Verzeichnis installiert ist.

Mein nächster Versuch war die „~“ verwenden, um den Stamm der Website anzuzeigen.

<script src="~/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 

Aber das Script-Tag nicht verstehen, die ~“

Also habe ich versucht zu tun . in der Code-Behind von OnInit() ich habe versucht:

string url = "~/jquery/jquery-1.4.2.min.js"; 
url = this.ResolveUrl(url); 
Page.ClientScript.RegisterClientScriptInclude("jquery_js", url); 

Und das gibt mir Fehler bei der JQuery JavaScript läuft ich im Markup der Seite einige Javascript haben.

$(document).ready(function() 
{ 
    ... 
} 

und ich bekomme "$" ist undefiniert. Ich habe eine Warnung an den Anfang von jquery-1.4.2.min.js hinzugefügt, und es wird geladen, aber nachdem dieses Bit Javascript in der ASPX-Datei ausgeführt wurde.

Ich versuchte ScriptManager.RegisterClientScriptInclude(), stattdessen mit dem gleichen Ergebnis.

+0

Was ist der HTML-Code, den Ihr letztes Beispiel tatsächlich generiert? Wird es nach dem Skript-Tag eingefügt, das Ihren $ (document) .ready-Handler enthält? – Goyuix

+0

Nein. Und das ist das Problem. (Oder das letzte Problem. Wenn es nicht für die Masterseite gewesen wäre, hätte ich die Links vor dem Skript einfügen können. Das Hinzufügen der Links aus dem Code-Behind ließ mich nicht kontrollieren, wo sie hingehörten. –

Antwort

0

Der Kern des Problems bestand darin, dass Links zu JavaScript-Dateien, die in die Seite mit RegisterClientScriptInclude injiziert wurden, waren platziert auf der Seite unterhalb des JavaScript-Codes in der Markup, die davon abhing.

Was in $(document).ready() ist, kann nicht ausgeführt werden, bis die Seite geladen ist, aber $() wird sofort ausgeführt, wie es vom Browser gelesen wird.

Die Lösung ist, das JavaScript zu verschieben, um später in der Datei zu erscheinen. Das ist nicht immer so einfach wie es scheint, wenn Sie mit Masterseiten und zahlreichen Benutzersteuerelementen arbeiten.

Für mich war der einfachste Weg, damit umzugehen, das JavaScript aus dem Code-Behind zu injizieren, mit RegisterStartupScript. Skriptblöcke, die mit diesem Befehl versehen sind, werden am Ende des Formulars hinzugefügt. Ausführbare Anweisungen in ihnen werden erst ausgeführt, nachdem alle verschiedenen JavaScript-Dateien eingefügt wurden.

1

Verwenden Page.ResolveUrl() so ist es in Bezug auf die Seite und nicht die Master (und das Steuerverzeichnis es in), wie folgt aus:

string url = Page.ResolveUrl("~/jquery/jquery-1.4.2.min.js"); 
5

Sie können entweder Gebrauch:

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

Oder möglicherweise ein Steuerelement, das im Wesentlichen die Neuzuordnung für Sie erstellt:

<my:Script src="~/jquery/jquery-1.4.2.min.js" /> 

Oder sogar registrieren Sie es mit dem ClientScriptManager, aber es ist am besten, es in die Seite zu legen.

0

Versuchen Sie, wie unten

tun
StringBuilder sb = new StringBuilder(); 
      sb.Append("<script type=\"text/javascript\" src=\""); 
      sb.Append("http://yourwebsitename" + "/" + "directory"); 
      sb.Append("/"); 
      sb.Append("jquery.js"); 
      sb.Append("\"></script>"); 
     Header.Controls.Add(new LiteralControl(sb.toString())); 
5

Mit google Ihre jquery zu dienen:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

Hinweis der Mangel an http im src-Attribut, wird diese Probleme lösen, die mit http arrise könnte vs https.Hier

Deshalb: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Ode To-Code einen fantastischen Artikel auf Master-Seiten hat man einen Blick auf, wie gut haben sollte:

http://odetocode.com/Articles/450.aspx

1

ResolveUrl ist der Weg zu gehen.

<script src="<%= ResolveUrl("~/scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 
0

mit Google ist eine gute Wahl, natürlich, aber können Sie auch einen Link hinzufügen Sie in jeder Ihrer Seiten Sie haben Problem mit Zum Beispiel (thoes, die nicht den Weg zum jquery finden), wenn Sie eine Seite haben genannt "MyPage.aspx" in dem anderen Verzeichnis fügen Sie einfach das Skript auf der HTML-Seite von "MyPage.aspx" relativ auf diese Weise kann die Seite nicht finden Ihre jquery Adresse wird gut mit dem neuen arbeiten Ich hoffe, dass das funktioniert Sie

+2

Das Ganze Der Punkt dahinter, den Link zu jquery.js in der Masterpage zu setzen, ist so, dass ich ihn nicht separat in jede Seite schreiben muss.DRY ist ein grundlegendes Designprinzip, das auf eigene Gefahr verletzt wird. –

0

zu Wiederholung nicht dein Selbst

eine Erweiterungsfunktion für Ihre Seiten machen

public static class yourclass 
{ 
    public static string ConvertRelativePathToRootPath(this Page p, string pathfromroot) 
    { 


     string newUrl = ""; 
     Uri originalUri = HttpContext.Current.Request.Url; 
     newUrl = (originalUri.Scheme) + "://" + originalUri.Authority + pathfromroot; 
     return newUrl; 


    } 
} 

dann fügen Sie einfach den folgenden Code auf Ihre Seite zu laden Ereignisse

string ss = Page.ConvertRelativePathToRootPath("~/script/jquery-1.4.1.min.js"); 
ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "Jquery", ss); 

Sie auch die verwenden können, über Extension-Funktion für alle anderen brauchen Sie einen absoluten Pfad wie Bild oder Anker-Tags in Ihrer Datei mit einem anderen Pfad als Ihre Anwendung masterpage root :)

+0

Ich habe RegisterClientScriptInclude() verwendet, um mit den relativen Pfaden umzugehen, und das führte zu einem anderen Problem, wobei die Datei später in der Datei als das Javascript enthalten war, das davon abhing. –

1

Sie können versuchen src="<%= Page.ResolveClientUrl("~/jquery.js") %> in Master-Seite Kopf.

$<script type="text/javascript" src="<% = Page.ResolveClientUrl("~/scripts/jquery-1.4.1.min.js") %>"></script> 
Verwandte Themen