C-Sharp Asp.net Javascript

Pendahuluan

Saat mengembangkan aplikasi web dalam C#, umumnya kita menyematkan sumber daya, seperti file JavaScript, ke dalam assembly Anda. Namun, ketika JavaScript Anda perlu mereferensikan aset statis tambahan, seperti gambar, bisa jadi rumit untuk mengelola referensi ini dengan baik. Anda mungkin bertanya-tanya bagaimana cara mengalikodekan referensi ke sumber daya ini sehingga dapat digunakan dengan lancar dalam kode JavaScript Anda.

Dalam posting blog ini, kami akan mengatasi masalah ini dengan menunjukkan cara mengelola referensi sumber daya tertanam secara dinamis dengan cara yang terstruktur.

Tantangan

Anda memiliki file JavaScript yang disematkan dalam assembly Anda, dan biasanya Anda menambahkannya ke halaman Anda menggunakan ClientScriptManager.GetWebResourceUrl(). Namun, mereferensikan aset statis lainnya, seperti gambar, membutuhkan pendekatan yang lebih halus.

Sebagai contoh, alih-alih menggunakan URL gambar secara langsung:

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

Anda ingin mengubahnya menjadi format yang lebih skalabel seperti:

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

Jadi, bagaimana cara mencapainya? Jawabannya terletak pada penggunaan array asosiatif JavaScript dinamis untuk menyimpan URL sumber daya di sisi server dan mereferensikannya di sisi klien.

Solusi

Langkah 1: Buat Array JavaScript Dinamis

Untuk mengelola URL sumber daya Anda secara dinamis, Anda bisa membuat array asosiatif yang menyimpan jalur sumber daya tertanam Anda. Inilah cara melakukannya dalam kode sisi server Anda:

Contoh Kode Sisi Server

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);

Penjelasan

  1. StringBuilder: Objek StringBuilder digunakan untuk membangun kode JavaScript dengan efisien.
  2. Array Asosiatif: Kami membuat variabel bernama imgResources yang akan berisi URL gambar kami.
  3. GetWebResourceUrl(): Metode ini mengambil URL untuk sumber daya tertanam yang Anda tentukan, sehingga memungkinkan Anda untuk menyimpan URL ini dalam array.

Langkah 2: Referensikan Sumber Daya dalam Kode Sisi Klien

Dengan array JavaScript dinamis yang telah dibuat, Anda dapat dengan mudah mereferensikan gambar Anda dalam kode sisi klien seperti ini:

Contoh Kode Sisi Klien

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

Manfaat

  • Skalabilitas: Dengan mudah menambahkan lebih banyak sumber daya tanpa mengacaukan file JavaScript Anda.
  • Kemudahan Pengelolaan: Mempertahankan satu titik referensi untuk URL, sehingga pembaruan menjadi lancar.
  • Pemuatan Dinamis: Memastikan aset Anda dimuat berdasarkan sumber daya yang tertanam dalam assembly.

Kesimpulan

Dengan menyusun pendekatan Anda untuk mereferensikan sumber daya tertanam dalam aplikasi web C# Anda menggunakan array asosiatif JavaScript dinamis, Anda dapat memperlancar proses pengelolaan URL aset statis. Metode ini tidak hanya meningkatkan pemeliharaan tetapi juga meningkatkan skalabilitas aplikasi Anda.

Menerapkan solusi ini tidak hanya menghemat waktu Anda tetapi juga menjaga kode Anda agar siap untuk pembaruan dan modifikasi di masa mendatang.

Selamat coding!