المقدمة

عند تطوير تطبيقات الويب بلغة C#، من الشائع تضمين الموارد، مثل ملفات JavaScript، في التجميع الخاص بك. ومع ذلك، عندما يحتاج JavaScript الخاص بك إلى الإشارة إلى أصول ثابتة إضافية، مثل الصور، يمكن أن يصبح من الصعب إدارة هذه الإشارات بشكل صحيح. قد تتساءل عن كيفية تحويل الإشارات إلى هذه الموارد بحيث يمكن استخدامها بشكل سلس ضمن كود JavaScript الخاص بك.

في هذه المقالة، سنناقش هذه المشكلة من خلال توضيح كيفية إدارة إشارات الموارد المضمّنة بشكل ديناميكي بطريقة منظمة.

التحدي

لديك ملفات JavaScript مضمّنة في التجميع الخاص بك، وعادة ما تضيفها إلى صفحاتك باستخدام ClientScriptManager.GetWebResourceUrl(). ومع ذلك، تحتاج الإشارة إلى أصول ثابتة أخرى، مثل الصور، إلى نهج أكثر دقة.

على سبيل المثال، بدلاً من استخدام عنوان URL للصورة مباشرة:

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

تريد تحويله إلى تنسيق أكثر قابلية للتوسع مثل:

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

فكيف يمكنك تحقيق ذلك؟ الجواب يكمن في استخدام مصفوفة JavaScript الديناميكية لتخزين عناوين URL للموارد على الجانب الخادم والإشارة إليها على الجانب العميل.

الحل

الخطوة 1: إنشاء مصفوفة JavaScript ديناميكية

لإدارة عناوين URL للموارد الخاصة بك بشكل ديناميكي، يمكنك إنشاء مصفوفة مرتبطة تحتوي على مسارات الموارد المضمّنة الخاصة بك. إليك كيفية القيام بذلك في كود الجانب الخادم الخاص بك:

مثال على كود الجانب الخادم

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

الشرح

1. StringBuilder: يتم استخدام كائن StringBuilder لبناء كود JavaScript بكفاءة.
2. المصفوفة المرتبطة: نقوم بإنشاء متغير يسمى imgResources الذي سيحتوي على عناوين URL للصور الخاصة بنا.
3. GetWebResourceUrl(): تقوم هذه الطريقة باسترجاع عنوان URL للموارد المضمّنة التي حددتها، مما يسمح لك بتخزين هذه العناوين في المصفوفة.

الخطوة 2: الإشارة إلى الموارد في كود الجانب العميل

مع وجود المصفوفة الديناميكية في JavaScript، يمكنك بسهولة الإشارة إلى صورك في كود الجانب العميل على النحو التالي:

مثال على كود الجانب العميل

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

الفوائد

• قابلية التوسع: إضافة المزيد من الموارد بسهولة دون تشتيت ملفات JavaScript الخاصة بك.
• السهولة في الإدارة: الحفاظ على نقطة مرجعية واحدة لعناوين URL، مما يجعل التحديثات سلسة.
• التحميل الديناميكي: ضمان تحميل الأصول الخاصة بك بناءً على الموارد المضمّنة في التجميع.

الخاتمة

من خلال هيكلة نهجك للإشارة إلى الموارد المضمّنة في تطبيقات الويب بلغة C# باستخدام مصفوفة JavaScript المرتبطة الديناميكية، يمكنك تبسيط عملية إدارة عناوين URL للأصول الثابتة. هذه الطريقة لا تحسن من القدرة على الصيانة فحسب، بل تعزز أيضًا قابلية التوسع لتطبيقك.

تنفيذ هذا الحل لا يوفر لك الوقت فحسب، بل يحمي أيضًا قاعدة التعليمات البرمجية الخاصة بك لتحديثات وتعديلات سهلة في المستقبل.

برمجة سعيدة!