Giriş

C# ile web uygulamaları geliştirirken, genellikle JavaScript dosyaları gibi kaynakları derlemenize gömülü olarak eklemek yaygındır. Ancak, JavaScript’in ek statik varlıkları, örneğin görüntüleri, referans alması gerektiğinde, bu referansları düzgün bir şekilde yönetmek zorlaşabilir. Bu kaynaklara olan referansları tokenize etmenin yollarını düşünmeye başlayabilirsiniz, böylece bunlar JavaScript kodunuz içinde sorunsuz bir şekilde kullanılabilir.

Bu blog yazısında, gömülü kaynakların referanslarını yapılandırılmış bir şekilde dinamik olarak yönetmenin yollarını göstereceğiz.

Zorluk

Daha önce derlemenize gömülü hale getirilmiş JavaScript dosyalarınız var ve genellikle bunları sayfalarınıza ClientScriptManager.GetWebResourceUrl() kullanarak ekliyorsunuz. Ancak, diğer statik varlıkları, örneğin görüntüleri, referans alırken daha rafine bir yaklaşım gerekir.

Örneğin, doğrudan bir görüntü URL’si kullanmak yerine:

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

Bunu daha ölçeklenebilir bir formata dönüştürmek istersiniz:

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

Peki, bunu nasıl başaracaksınız? Cevap, dinamik bir JavaScript ilişkisel dizisi kullanarak sunucu tarafında kaynak URL’lerini depolamak ve bunları istemci tarafında referans almaktadir.

Çözüm

Adım 1: Dinamik JavaScript Dizisi Oluşturma

Kaynak URL’lerinizi dinamik bir şekilde yönetmek için, gömülü kaynaklarınızın yollarını tutan bir ilişkilendirilmiş dizi oluşturabilirsiniz. İşte bunu sunucu tarafı kodunuzda nasıl yapabileceğinizi göstereceğim:

Sunucu Tarafı Kod Örneği

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

Açıklama

1. StringBuilder: JavaScript kodunu verimli bir şekilde oluşturmak için bir StringBuilder nesnesi kullanılır.
2. İlişkilendirilmiş Dizi: Resimlerimizin URL’lerini tutacak bir imgResources adlı değişken oluşturuyoruz.
3. GetWebResourceUrl(): Bu yöntem, belirttiğiniz gömülü kaynaklar için URL’yi alır ve bu URL’leri dizide depolamanıza olanak tanır.

Adım 2: İstemci Tarafı Kodunda Kaynakları Referans Alma

JavaScript dinamik dizisi oluşturulduktan sonra, artık istemci tarafı kodunuzda görüntülerinizi kolayca referans alabilirsiniz:

İstemci Tarafı Kod Örneği

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

Faydalar

• Ölçeklenebilirlik: JavaScript dosyalarınızı karıştırmadan daha fazla kaynak ekleyin.
• Yönetilebilirlik: URL’ler için tek bir referans noktası tutarak güncellemeleri kolaylaştırın.
• Dinamik Yükleme: Varlıklarınızın derlemede gömülü kaynaklara göre yüklenmesini sağlayın.

Sonuç

Dinamik bir JavaScript ilişkisel dizisi kullanarak C# web uygulamalarınızda gömülü kaynaklara referans almayı yapılandırarak, statik varlık URL’lerini yönetme sürecinizi kolaylaştırabilirsiniz. Bu yöntem, yalnızca bakım kolaylığını artırmakla kalmaz, aynı zamanda uygulamanızı ölçeklenebilir hale getirir.

Bu çözümü uygulamak, yalnızca zaman kazanmanızı sağlamakla kalmaz, aynı zamanda kod tabanınızı kolay güncellemeler ve değişiklikler için geleceğe hazır hale getirir.

İyi kodlamalar!