2009-02-06 5 views
16

Wie fügen Sie Javascript-Datei programmgesteuert zum Benutzersteuerelement hinzu?Programmgesteuertes Hinzufügen von Javascript-Datei zum Benutzersteuerelement in .net

Ich möchte, dass die Benutzersteuerung ein komplettes Paket ist - dh ich möchte kein Javascript hinzufügen, das mit dem Benutzersteuerelement auf der Seite verwandt wird, auf der es verwendet wird, wenn ich es in dem Steuerelement selbst tun kann.

Da in der Benutzersteuerung kein Page-Objekt vorhanden ist, wie würden Sie es tun?

Antwort

26

Im Page_Load Methode der control.ascx.cs Datei:

LiteralControl jsResource = new LiteralControl(); 
jsResource.Text = "<script type=\"text/javascript\" src=\"js/mini-template-control.js\"></script>"; 
Page.Header.Controls.Add(jsResource); 

HtmlLink stylesLink = new HtmlLink(); 
stylesLink.Attributes["rel"] = "stylesheet"; 
stylesLink.Attributes["type"] = "text/css"; 
stylesLink.Href = "css/mini-template-control.css"; 
Page.Header.Controls.Add(stylesLink); 

Dies wird geladen css und Javascript in das head-Tag der Hauptseite, stelle einfach sicher, dass der Kopf runat = "server" hat.

+0

Gnomixa, sehr schöne Lösung. +1 – MagicAndi

+0

Das ist so cool! Ich habe das ganze Skript einfach in die Ascx-Designseite eingefügt. aber wie behandeln Sie Fälle, in denen die Javascript-Datei bereits der Seitenkopfzeile hinzugefügt wurde (möglicherweise durch ein anderes ascx-Steuerelement) – ak3nat0n

+0

@zaladane, ich musste mich nie mit diesem Fall befassen, da ich völlig kontrolliere, was geladen wird und wann. Die Art, wie ich es tun würde, ist eine einfache Funktion schreiben, die über das, was hinzugefügt wurde, Schleife und stellt sicher, dass etwas nicht zweimal hinzugefügt wird. Aber ich denke, dass Sie die gleiche js-Datei mehrmals auf der gleichen Seite hinzufügen können, sollte nichts am Ende auswirken. Probieren Sie es aus und stellen Sie sicher, dass es funktioniert. – sarsnake

0

Normalerweise mache ich es beim Rendern der HTML für das Steuerelement und abhängig davon, ob es eine Bibliotheksinjektion oder eine Instanzinjektion ist, verwende ich die Items-Auflistung, um anzugeben, ob ich den Code für ein Steuerelement dieses Typs bereits erzeugt habe die aktuelle Anfrage unter Verwendung einer eindeutigen Kennung.

etwas in der Art von:

protected override void Render(HtmlTextWriter writer) 
    { 
     base.Render(writer); 

     //Check if the Object Script has already been rendered during this request. 
     if (!Context.Items.Contains("xxx")) 
     { 
      //Specify that the Object Script has been rendered during this request. 
      Context.Items.Add("xxx", string.Empty); 
      //Write the script to the page via the control 
      writer.Write([libraryinjection]); 
     } 
     //Write the script that instantiates a new instance for this control 
     writer.Write([instanceinjection]); 
    } 
+0

Ich nehme an, dass dies in der Datei .ascx.cs getan wird? – sarsnake

+0

Dies kann auf der Ebene ascx.cs geschehen, oder wenn das Steuerelement reiner Code auf Codeebene in Ihrer Bibliothek ist. –

+0

oh ok, was [Bibliotheksinjektion]? verzeih mir, ich habe das noch nie zuvor gesehen :) und was meinst du mit xxx? etwas wie meinskript.js? – sarsnake

8

können Sie Clientskript registrieren ClientScriptManager umfasst die Verwendung. Die Seite ist über die Control.Page-Eigenschaft zugänglich.

Page.ClientScript.RegisterClientScriptInclude (
    typeof (MyControl), "includeme.js", "js/includeme.js" ); 

EDIT: Sorry, für insgesamt "Komplettpaket", ist es möglich mit Hilfe von Skripten als eingebettete Ressourcen, und aquire dynamische URL durch den WebResource.axd Handler. Wenn dies nicht als vollständig abgeschlossen betrachtet wird, dann denke ich, es könnte in App_LocalResources eingefügt werden, aber es wird nie nur eine Datei sein, , es sei denn, der Code und das Skript ist inline.

+0

Der Benutzer hat ausdrücklich erwähnt, dass er seine gesamte Kontrolle als "komplettes Paket" haben möchte. Diese Lösung setzt voraus, dass das Steuerelement _with_ einer JavaScript-Datei hinzugefügt wird, die kein vollständiges Paket wäre. –

+0

ja, danke David! Ich möchte eine vollständige Kapselung haben. – sarsnake

+0

Die akzeptierte Antwort bindet die Javascript-Datei nicht ein, oder? – Greg

0

Wenn Sie den Text des tatsächlichen Javascript in Ihrer .CS-Datei haben, können Sie Page.ClientScript.RegisterClientScriptBlock aufrufen.

Im Folgenden wird vorausgesetzt, dass "GetScript()" das tatsächliche Javascript zurückgibt, das dem gerenderten Steuerelement hinzugefügt werden soll.

Page.ClientScript.RegisterClientScriptBlock(GetType(), "controlScriptName", GetScript()); 
+0

Ich möchte Javascript in der separaten Datei haben. Ist es programmgesteuert möglich, dem Benutzersteuerelement eine JS-Datei hinzuzufügen? Wenn nicht, werde ich nur Dennis Lösung verwenden – sarsnake

+0

Sie könnten die Datei in eine Zeichenfolge mit etwas wie File.ReadAllText lesen und dann diesen Text verwenden, um den Client-Skriptblock zu registrieren, aber wenn Sie das Element in einer eigenen Datei möchten, würde ich Dennis vorschlagen "Lösung. –

+0

danke! Wow, ich dachte nicht, dass das Hinzufügen einer js-Datei zu einem Benutzer-Steuerelement so ein Kopfschmerz ist. Übrigens habe ich innerhalb der .ascx jetzt und es funktioniert, aber weil es keine Tag in der Benutzerkontrolle gibt, schien es irgendwie skizzenhaft, aber ich denke, ich werde dabei bleiben. – sarsnake

2

Gute Frage!

Ein UserControl sollte ein einzelnes Paket ohne Abhängigkeit von einer JavaScript- oder CSS-Datei sein. Sie müssen die JS- und CSS-Dateien als eingebettete Ressourcen erstellen. Klicken Sie mit der rechten Maustaste auf Eigenschaften, und legen Sie die Build-Aktion auf eingebettete Ressourcen fest. Dann müssen Sie die JavaScript- und CSS-Dateien als WebResources einfügen. Hier

ist ein Artikel, den ich gestern schrieb, die über das gleiche Szenario spricht:

http://highoncoding.com/Articles/502_Creating_RadioButton_Validation_Using_Custom_Validator.aspx

+0

Ich verwende ein Website-Projekt anstelle einer Webanwendung, daher habe ich keine AssemblyInfo.cs-Datei. Ich würde lieber dieses Modell verwenden, wie ich es besser als Web-Anwendungsprojekt mag. – sarsnake

+0

Das Website-Projekt war ein großer Fehler von Microsoft. Es ist langsam wie die Hölle, da es Versammlungen für alles schafft! Auf der hellen Seite können Sie jetzt Ihre Benutzersteuerelemente als Serversteuerelemente verwenden. – azamsharp

3

In meiner Seite Platz, den ich alle benötigten Skripte und Stile

<asp:placeHolder runat="Server" ID="phHead"> 
    <script src="/header/widget/script.js" type="text/javascript"></script> 
    <link href="/header/widget/style.css" rel="stylesheet" type="text/css" /> 
</asp:placeHolder> 

und

Platzhalter
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    Page.Header.Controls.Add(phHead) 
End Sub 
0

Ich fand, dass dies eine elegantere Möglichkeit ist, eine Verknüpfung zu Ihrem Javascript herzustellen.
In Ihrem .ascx, Link zu Ihren Skriptdateien die folgende Art und Weise:

<script src='<%= ResolveClientUrl("~/Scripts/jquery-1.7.1.min.js") %>' type="text/javascript"></script> 
<script src='<%= ResolveClientUrl("~/Scripts/jquery.maskedinput-1.3.min.js") %>' type="text/javascript"></script> 

auf diese Weise, unabhängig davon, welche Unterordner/Seite Sie Ihre Benutzerverwaltung hinzuzufügen, wird der Link zu Ihren Skripte wird immer korrekt aufgelöst.

Verwandte Themen