C-Sharp Asp.net Javascript

บทนำ

เมื่อพัฒนาแอพพลิเคชันเว็บใน C# การฝังทรัพยากร เช่น ไฟล์ JavaScript ลงใน assembly ถือเป็นเรื่องปกติ อย่างไรก็ตาม เมื่อ JavaScript ของคุณต้องการอ้างอิงสินทรัพย์ที่เป็นสแตติกเพิ่มเติม เช่น รูปภาพ การจัดการอ้างอิงเหล่านี้อาจเป็นเรื่องยุ่งยาก คุณอาจสงสัยว่าจะทำอย่างไรเพื่อจัดการการอ้างอิงเหล่านี้ให้สามารถใช้ได้อย่างราบรื่นภายในโค้ด JavaScript ของคุณ

ในโพสต์บล็อกนี้ เราจะจัดการกับปัญหานี้โดยแสดงให้คุณเห็นวิธีการจัดการการอ้างอิงของทรัพยากรที่ฝังอยู่ในลักษณะที่เป็นระบบ

ความท้าทาย

คุณมีไฟล์ JavaScript ที่ฝังอยู่ใน assembly ของคุณ และโดยทั่วไปแล้วคุณจะเพิ่มไฟล์เหล่านี้ในหน้าเว็บโดยใช้ 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}';

ดังนั้น คุณจะทำอย่างไรให้บรรลุเป้าหมายนี้? คำตอบอยู่ที่การใช้ Array แบบสัมพันธ์ใน JavaScript เพื่อเก็บ URL ของทรัพยากรในฝั่งเซิร์ฟเวอร์และอ้างอิงจากฝั่งไคลเอ็นต์

วิธีแก้ปัญหา

ขั้นตอนที่ 1: สร้าง Array แบบไดนามิกใน JavaScript

เพื่อจัดการ URL ของทรัพยากรอย่างไดนามิก คุณสามารถสร้าง Array ที่สัมพันธ์กันซึ่งเก็บเส้นทางของทรัพยากรที่ฝังอยู่ของคุณ นี่คือวิธีที่คุณสามารถทำได้ในโค้ดของเซิร์ฟเวอร์:

ตัวอย่างโค้ดฝั่งเซิร์ฟเวอร์

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. Array ที่สัมพันธ์กัน: เราสร้างตัวแปรชื่อ imgResources ซึ่งจะเก็บ URL ของรูปภาพของเรา
  3. GetWebResourceUrl(): วิธีนี้จะดึง URL สำหรับทรัพยากรที่ฝังอยู่ที่คุณระบุ ทำให้คุณสามารถเก็บ URL เหล่านี้ใน Array ได้

ขั้นตอนที่ 2: อ้างอิงทรัพยากรในโค้ดฝั่งไคลเอ็นต์

ด้วย Array ที่เป็นไดนามิกใน JavaScript คุณสามารถอ้างอิงรูปภาพของคุณได้อย่างง่ายดายในโค้ดฝั่งไคลเอ็นต์ ดังนี้:

ตัวอย่างโค้ดฝั่งไคลเอ็นต์

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

ข้อดี

  • ความสามารถในการขยาย: เพิ่มทรัพยากรเพิ่มเติมได้อย่างง่ายดายโดยไม่ต้องทำให้ไฟล์ JavaScript ของคุณยุ่งเหยิง
  • การจัดการที่ดีขึ้น: รักษาจุดอ้างอิงเดียวสำหรับ URLs ทำให้การอัปเดตเป็นไปอย่างราบรื่น
  • การโหลดแบบไดนามิก: ทำให้แน่ใจว่าสินทรัพย์ของคุณจะถูกโหลดตามทรัพยากรที่ฝังใน assembly

สรุป

โดยการจัดโครงสร้างวิธีการอ้างอิงทรัพยากรที่ฝังอยู่ในแอพพลิเคชันเว็บ C# ของคุณด้วย Array ที่สัมพันธ์กันใน JavaScript คุณสามารถปรับปรุงกระบวนการจัดการ URL ของสินทรัพย์สแตติก วิธีนี้ไม่เพียงแต่ช่วยปรับปรุงการบำรุงรักษา แต่ยังเพิ่มความสามารถในการขยายของแอพพลิเคชันของคุณ

การนำวิธีแก้นี้ไปใช้จะช่วยประหยัดเวลาและป้องกันการเกิดปัญหาในโค้ดเบสของคุณให้สามารถอัปเดตและปรับเปลี่ยนได้ง่ายในอนาคต

รหัสดีนะ!