บทนำ
การแสดงข้อความ "โปรดรอ" หรือภาพเคลื่อนไหว GIF มักจะมีประโยชน์ในระหว่างกระบวนการส่งแบบฟอร์มของเว็บแอปพลิเคชัน โดยเฉพาะอย่างยิ่งเมื่อกระบวนการส่งใช้เวลานาน ฉันเพิ่งพัฒนาโปรแกรมการส่งแบบสำรวจที่ผู้ใช้ภายในอัปโหลดสเปรดชีต Excel ผ่านทางหน้าเว็บ โปรแกรมจะแทรกข้อมูลสเปรดชีตที่อัปโหลดลงในฐานข้อมูล กระบวนการนี้ใช้เวลาเพียงไม่กี่วินาที แต่แม้ว่าจะเป็นเพียงไม่กี่วินาที แต่ก็เป็นกระบวนการรอที่ชัดเจนมากจากมุมมองของหน้าเว็บ ในระหว่างการทดสอบโปรแกรม ผู้ใช้บางรายคลิกปุ่มอัปโหลดซ้ำๆ ดังนั้นจึงมีประโยชน์ในการจัดเตรียมข้อความภาพเพื่อบอกผู้คนว่าการอัปโหลดอยู่ในระหว่างดำเนินการ และซ่อนปุ่มอัพโหลดพร้อมกันเพื่อป้องกันการคลิกหลายครั้ง ตัวควบคุมที่แนะนำที่นี่คือคลาสย่อยของตัวควบคุมปุ่ม ซึ่งสาธิตวิธีการห่อหุ้มโค้ด JavaScript ฝั่งไคลเอ็นต์ในตัวควบคุมเซิร์ฟเวอร์ ASP.NET เพื่อให้ฟังก์ชันที่สะดวก
แม้ว่าจะมีตัวอย่างจาวาสคริปต์มากมายที่สามารถใช้เพื่อบรรลุเป้าหมายนี้ แต่ฉันพบปัญหาบางอย่างเมื่อฉันพยายามสรุปฟังก์ชันเหล่านี้ลงในตัวควบคุม ASP.NET ก่อนอื่นฉันพยายามทำให้ปุ่มใช้งานไม่ได้ผ่านตัวจัดการ javascript onclick และแทนที่ด้วยข้อความอื่น แต่ฉันพบว่ามันยุ่งยากมาก เนื่องจากจะขัดขวางการทำงานของเหตุการณ์การคลิกบนฝั่งเซิร์ฟเวอร์ asp.net ในที่สุดสิ่งที่ได้ผลและได้รับการสนับสนุนที่ดีสำหรับเบราว์เซอร์ต่างๆ คือการแสดงปุ่มในแท็ก div div สามารถซ่อนได้และไม่ขัดขวางเหตุการณ์การคลิกของ asp.net
การใช้ตัวควบคุม
เนื่องจากเป็นอนุพันธ์ของการควบคุมปุ่มปกติ ฟังก์ชันของ PleaseWaitButton จึงเหมือนกันโดยพื้นฐาน ใช้คุณสมบัติเพิ่มเติมสามประการในการจัดการการแสดงข้อความหรือรูปภาพ "โปรดรอ" เมื่อคลิกปุ่ม
กรุณารอข้อความ
นี่คือข้อความฝั่งไคลเอ็นต์ที่แสดงขึ้น และหากมีอยู่ จะแทนที่ปุ่มเมื่อมีการคลิกปุ่ม
กรุณารอสักครู่ภาพ
นี่คือไฟล์รูปภาพ (เช่น รูปภาพ GIF แบบเคลื่อนไหว) ที่แสดงขึ้น และหากมีอยู่ ก็จะแทนที่ปุ่มเมื่อมีการคลิก คุณลักษณะนี้จะกลายเป็นแอตทริบิวต์ src ในแท็ก
กรุณารอสักครู่ประเภท
ค่าการแจงนับ PleaseWaitTypeEnum ค่าใดค่าหนึ่ง: TextOnly, ImageOnly, TextThenImage หรือ ImageThenText ควบคุมการจัดวางข้อความและรูปภาพ
ด้านล่างนี้เป็นตัวอย่างไฟล์ .aspx ที่แสดงชุด PleastWaitButton พร้อมชุด PleaseWaitText และ PleaseWaitImage
<%@ ภาษาของเพจ = "C#" %>
<%@ ลงทะเบียน TagPrefix="cc1" Namespace="JavaScriptControls"
Assembly = "PleaseWaitButton" %>
");
this.Page.RegisterClientScriptBlock(sImgName + "_PreloadScript",
sb.ToString());
}
ฟังก์ชันฝั่งไคลเอ็นต์
ไฟล์ข้อความที่ฝัง javascript.txt มี
การป้องกันการแทนที่เป็นโมฆะ OnInit (EventArgs e)
-
ฐาน OnInit(e);
// รหัสจาวาสคริปต์ฝั่งไคลเอ็นต์จะถูกเก็บไว้
// ในทรัพยากรที่ฝังตัว;
//และลงทะเบียนกับเพจ
ลงทะเบียนJavascriptFromResource();
-
โมฆะส่วนตัว RegisterJavascriptFromResource()
-
// โหลดไฟล์ข้อความที่ฝังไว้ "javascript.txt"
// และลงทะเบียนเนื้อหาเป็นสคริปต์ฝั่งไคลเอ็นต์
สตริง sScript = GetEmbeddedTextFile("javascript.txt");
this.Page.RegisterClientScriptBlock("PleaseWaitButtonScript", sScript);
-
สตริงส่วนตัว GetEmbeddedTextFile (สตริง sTextFile)
-
// ฟังก์ชันทั่วไปสำหรับการดึงเนื้อหา
// ของทรัพยากรไฟล์ข้อความที่ฝังเป็นสตริง
// เราจะได้แอสเซมบลีที่ดำเนินการและรับมา
// เนมสเปซที่ใช้ประเภทแรกในชุดประกอบ
แอสเซมบลี a = Assembly.GetExecutingAssembly();
String sNamespace = a.GetTypes()[0].Namespace;
// ด้วยแอสเซมบลีและเนมสเปซเราจะได้
//ฝังทรัพยากรเป็นสตรีม
สตรีม s = a.GetManifestResourceStream(
string.Format("{0}.{1}", sNamespace, sTextFile)
-
// อ่านเนื้อหาของสตรีมเป็นสตริง
StreamReader sr = StreamReader ใหม่
สตริง sContents = sr.ReadToEnd();
sr.Close();
s.Close();
กลับ sContents;
-
ทรัพยากรที่ฝัง javascript.txt มีเมธอดฝั่งไคลเอ็นต์ PleaseWait() ซึ่งดำเนินการในตัวจัดการ Javascript onclick ของปุ่ม รหัสนี้ยังเรียกใช้เมธอดฝั่งไคลเอ็นต์ HideDiv() เพื่อซ่อนคอนเทนเนอร์ของปุ่ม
กลับ div;
}
ฟังก์ชัน HideDiv(sDiv)
-
d = GetDiv(sDiv);
ถ้า(ง)
-
ถ้า (document.layers) d.visibility = "ซ่อน";
อื่น d.style.visibility = "ซ่อน";
-
}
ฟังก์ชัน PleaseWait(sDivButton, sDivMessage, sInnerHtml)
-
HideDiv(sDivButton);
var d = GetDiv(sDivMessage);
ถ้า (ง) d.innerHTML = sInnerHtml;
-
ลิงค์ต้นฉบับ: http://www.codeproject.com/aspnet/PleaseWaitButton.asp
ดาวน์โหลดซอร์สโปรเจ็กต์ - 7 Kb
ดาวน์โหลดโครงการสาธิต - 30 Kb
http://www.cnblogs.com/jeffamy/archive/2006/08/20/481952.html