C-Sharp Asp.net Javascript

Einleitung

Bei der Entwicklung von Webanwendungen in C# ist es üblich, Ressourcen wie JavaScript-Dateien in Ihre Assembly einzubetten. Wenn Ihr JavaScript jedoch zusätzliche statische Assets wie Bilder referenzieren muss, kann es knifflig werden, diese Referenzen richtig zu verwalten. Sie fragen sich vielleicht, wie Sie diese Ressourcen tokenisieren, damit sie nahtlos in Ihrem JavaScript-Code verwendet werden können.

In diesem Blogbeitrag werden wir dieses Problem angehen, indem wir Ihnen zeigen, wie Sie die Referenzen von eingebetteten Ressourcen auf strukturierte Weise dynamisch verwalten können.

Die Herausforderung

Sie haben JavaScript-Dateien, die in Ihrer Assembly eingebettet sind, und normalerweise fügen Sie sie Ihren Seiten mit ClientScriptManager.GetWebResourceUrl() hinzu. Die Referenzierung anderer statischer Assets wie Bilder erfordert jedoch einen ausgefeilteren Ansatz.

Statt zum Beispiel direkt eine Bild-URL zu verwenden:

this.drophint = document.createElement('img');
this.drophint.src = '/_layouts/images/dragdrophint.gif';

Möchten Sie es in ein skalierbareres Format umwandeln, wie:

this.drophint = document.createElement('img');
this.drophint.src = '{resource:assembly.location.dragdrophint.gif}';

Wie erreichen Sie das? Die Antwort liegt darin, ein dynamisches JavaScript-assoziatives Array zu verwenden, um die Ressourcenausgaben auf der Serverseite zu speichern und sie auf der Clientseite zu referenzieren.

Die Lösung

Schritt 1: Erstellen Sie ein dynamisches JavaScript-Array

Um Ihre Ressourcenausgaben dynamisch zu verwalten, können Sie ein assoziatives Array erstellen, das die Pfade Ihrer eingebetteten Ressourcen enthält. So können Sie dies in Ihrem Servercode tun:

Serverseitiges Codebeispiel

StringBuilder script = new StringBuilder();
script.Append("var imgResources = {};");
script.AppendFormat("imgResources['{0}'] = '{1}';", 
    "drophint", 
    Page.ClientScript.GetWebResourceUrl(Page.GetType(), "assembly.location.dragdrophint.gif"));
script.AppendFormat("imgResources['{0}'] = '{1}';", 
    "anotherimg", 
    Page.ClientScript.GetWebResourceUrl(Page.GetType(), "assembly.location.anotherimg.gif"));

Page.ClientScript.RegisterClientScriptBlock(
    Page.GetType(),
    "imgResources",
    script.ToString(), 
    true);

Erklärung

  1. StringBuilder: Ein StringBuilder-Objekt wird verwendet, um den JavaScript-Code effizient zu erstellen.
  2. Assoziatives Array: Wir erstellen eine Variable namens imgResources, die die URLs unserer Bilder enthalten wird.
  3. GetWebResourceUrl(): Diese Methode ruft die URL für die eingebetteten Ressourcen ab, die Sie spezifiziert haben, und ermöglicht es Ihnen, diese URLs im Array zu speichern.

Schritt 2: Referenzieren Sie die Ressourcen im Client-side Code

Mit dem dynamischen JavaScript-Array können Sie Ihre Bilder im Client-side Code ganz einfach wie folgt referenzieren:

Clientseitiges Codebeispiel

this.drophint = document.createElement('img');
this.drophint.src = imgResources['drophint'];
this.anotherimg = document.createElement('img');
this.anotherimg.src = imgResources['anotherimg'];

Vorteile

  • Skalierbarkeit: Fügen Sie leicht weitere Ressourcen hinzu, ohne Ihre JavaScript-Dateien zu überladen.
  • Verwaltbarkeit: Halten Sie einen einzigen Referenzpunkt für URLs, was Updates nahtlos macht.
  • Dynamisches Laden: Stellen Sie sicher, dass Ihre Ressourcen basierend auf den in der Assembly eingebetteten Ressourcen geladen werden.

Fazit

Durch die Strukturierung Ihrer Vorgehensweise zur Referenzierung von eingebetteten Ressourcen in Ihren C# Webanwendungen mithilfe eines dynamischen JavaScript-assoziativen Arrays können Sie den Prozess der Verwaltung von statischen Asset-URLs vereinfachen. Diese Methode verbessert nicht nur die Wartbarkeit, sondern erhöht auch die Skalierbarkeit Ihrer Anwendung.

Die Implementierung dieser Lösung spart nicht nur Zeit, sondern macht Ihren Code auch zukunftssicher für einfache Updates und Modifikationen.

Viel Spaß beim Programmieren!