PendahuluanSering
kali berguna untuk menampilkan pesan "harap tunggu" atau gambar gif animasi selama proses pengiriman formulir aplikasi web, terutama ketika proses pengiriman memakan waktu lama. Saya baru-baru ini mengembangkan program pengiriman survei di mana pengguna internal mengunggah spreadsheet excel melalui halaman web. Program ini memasukkan data spreadsheet yang diunggah ke dalam database. Proses ini hanya memakan waktu beberapa detik, tetapi meskipun hanya beberapa detik, ini merupakan proses menunggu yang sangat jelas dari sudut pandang halaman web. Selama pengujian program, beberapa pengguna berulang kali mengklik tombol unggah. Oleh karena itu, memberikan pesan visual untuk memberi tahu orang-orang bahwa unggahan sedang berlangsung akan berguna. Dan sembunyikan tombol unggah sekaligus untuk mencegah klik ganda. Kontrol yang diperkenalkan di sini adalah subkelas dari kontrol Tombol, yang menunjukkan cara merangkum kode JavaScript sisi klien dalam kontrol server ASP.NET untuk menyediakan fungsi yang mudah digunakan.
Meskipun ada banyak contoh javascript di luar sana untuk mencapai hal ini, saya menemukan beberapa masalah ketika saya mencoba merangkum fungsi-fungsi ini ke dalam kontrol ASP.NET. Saya pertama kali mencoba membuat tombol tidak valid melalui javascript onclick handler dan menggantinya dengan teks lain. Tapi menurut saya ini sangat rumit, karena ini akan menghambat fungsi event klik di sisi server asp.net. Apa yang akhirnya berhasil dan mendapat dukungan yang baik untuk berbagai browser adalah merender tombol dalam tag div. Div dapat disembunyikan dan tidak menghalangi acara klik asp.net.
Menggunakan kontrol
Sebagai turunan dari kontrol tombol biasa, fungsi PleaseWaitButton pada dasarnya sama. Ia menggunakan tiga properti tambahan untuk mengatur tampilan pesan atau gambar "harap Tunggu" ketika tombol diklik.
TolongTungguTeks
Ini adalah pesan teks sisi klien yang ditampilkan dan, jika ada, akan menggantikan tombol ketika tombol diklik.
Mohon Tunggu Gambar
Ini adalah file gambar (seperti gambar gif animasi) yang ditampilkan dan, jika ada, akan menggantikan tombol ketika diklik. Atribut ini akan menjadi atribut src pada tag <img>.
SilakanTungguJenis
Salah satu nilai enumerasi PleaseWaitTypeEnum: TextOnly, ImageOnly, TextThenImage, atau ImageThenText. Ini mengontrol tata letak pesan dan gambar.
Di bawah ini adalah contoh file .aspx yang mendemonstrasikan PleastWaitButton dengan kumpulan PleaseWaitText dan PleaseWaitImage.
<%@ Halaman bahasa="C#" %>
<%@ Daftar TagPrefix="cc1" Namespace="JavaScriptControls"
Majelis='TolongTungguButton' %>
<skrip runat='server'>
private void PleaseWaitButton1_Click(pengirim objek, System.EventArgs e)
{
// Pengendali kejadian Klik sisi server;
// menyimulasikan sesuatu yang mungkin memakan waktu lama,
// seperti pengunggahan file atau pemrosesan server yang memakan waktu
DateTime dt = DateTime.Sekarang.AddSeconds(5);
while (DateTime.Sekarang < dt)
{
// tidak melakukan apa pun; simulasikan jeda 5 detik
}
// di akhir perulangan menampilkan pesan sukses
// dan sembunyikan formulir pengiriman
panelSuccess.Visible = benar;
PleaseWaitButton1.Visible = false;
}
</skrip>
<html>
<kepala>
<title>Menguji PleaseWaitButton</title>
</kepala>
<tubuh>
<form id="Form1" metode="posting" runat="server">
<P>Menguji kontrol PleaseWaitButton.</p>
<cc1:PleaseWaitButton id="PleaseWaitButton1" runat="server"
Text="Klik saya untuk memulai proses yang memakan waktu"
PleaseWaitText="Mohon Tunggu "
TolongTungguImage="tolongTunggu.gif"
OnClick="TolongTungguButton1_Klik" />
<asp:Panel id="panelSukses" runat="server"
terlihat="salah">
Terima kasih telah mengirimkan formulir ini
pengguna paling keren yang pernah saya layani dengan senang hati.
Tidak, sungguh, saya sungguh-sungguh. Tentu saja ada yang lain.
tapi kamu sebenarnya berada di kelas sendirian.
</asp:Panel>
</bentuk>
</tubuh>
</html>
Cara Kerjanya
Kontrol PleaseWaitButton membuat Tombol ASP.NET standar di dalam tag <div>. Itu juga membuat tag <div> kosong untuk informasi/gambar. Ketika tombol diklik, penyembunyian tombol dan tampilan informasi dikendalikan oleh fungsi Javascript (lihat fungsi klien di bawah). Untuk kenyamanan, penerapan semua kode klien javascript yang diperlukan ditangani oleh kontrol server PleaseWaitButton.
Karena PleaseWaitButton mengimplementasikan pengendali onclick javascriptnya sendiri, kita harus mengambil beberapa langkah tambahan untuk mempertahankan pengendali onclick asli dan mengizinkan kontrol untuk menjalankan beberapa kode validasi sisi klien dengan rapi. Untuk mencapai tujuan ini, pertama-tama kita mengembalikan kelas dasar Button ke buffer string, dan kemudian menanganinya dengan terampil untuk menyertakan kode onclick yang kita tetapkan.
override yang dilindungi void Render (keluaran HtmlTextWriter)
{
// Keluarkan html tombol (dengan atribut)
// ke HtmlTextWriter tiruan
StringWriter sw = StringWriter baru();
HtmlTextWriter wr = HtmlTextWriter baru(sw);
dasar.Render(wr);
string sButtonHtml = sw.ToString();
wr.Tutup();
sw.Tutup();
// sekarang modifikasi kode untuk menyertakan pengendali "onclick".
// dengan fungsi PleaseWait() kami dipanggil dengan tepat
// setelah validasi sisi klien.
sButtonHtml = UbahJavaScriptOnClick(sButtonHtml);
// sebelum merender tombol, keluarkan <div> kosong
// yang akan diisi di sisi klien melalui javascript
// dengan pesan "harap tunggu""
keluaran.Tulis(string.Format("<div id='pleaseWaitButtonDiv2_{0}'>",
ini.ID Klien));
output.Write("</div>");
// merender tombol dalam tag <div> miliknya sendiri
keluaran.Tulis(string.Format("<div id='pleaseWaitButtonDiv_{0}'>",
ini.ID Klien));
keluaran.Tulis(sButtonHtml);
keluaran.Tulis("</div>");
}
Teknik mereduksi tombol menjadi buffer string dan kemudian memproses konten onclicknya tentu saja merupakan peretasan. Namun teknik ini memungkinkan kita untuk mengimplementasikan kode validasi standar di kelas tombol induk dan kemudian mengimplementasikan pemanggilan fungsi Javascript PleaseWait(). Tanpa melakukan ini, kita harus mengimplementasikan pemanggilan fungsi PleaseWait() pada atribut onclick sebelum kode validasi, kecuali kita ingin sepenuhnya mengganti rendering atribut kelas Button induk. Dengan cara ini, meskipun ada kesalahan input pada halaman, akan berdampak menyembunyikan tombol dan menampilkan pesan "harap tunggu" yang tidak kita inginkan. Oleh karena itu, kita harus memaksa fungsi PleaseWait() klien kita di pengendali onclick untuk muncul setelah validasi halaman klien.
Modifikasi atribut onclick terjadi pada fungsi ModifyJavaScriptOnClick(). Fungsi ini mendapatkan string HTML yang dirender oleh tombol dan memeriksa apakah atribut onclick ada. Jika ya, fungsi ini akan memeriksa apakah kode validasi sisi klien digunakan. Jika hal ini terjadi, fungsi PleaseWait() yang kita definisikan akan ditambahkan di akhir kode onclick yang ada, segera setelah variabel boolin Page_IsValid diperiksa oleh klien. Variabel ini mewakili apakah kontrol validasi digunakan. Jika nilai Page_IsValid salah, pesan "Harap tunggu" tidak akan ditampilkan. Ditampilkan jika Benar.
string pribadi ModifyJavaScriptOnClick(string sHtml)
{
// Terima kasih kepada anggota CodeProject KJELLSJ (Kjell-Sverre Jerijaervi)
// agar ide kode memungkinkan tombol berfungsi dengan
string validasi sisi klien sReturn = "";
string sPleaseWaitCode = GeneratePleaseWaitJavascript();
// apakah sudah ada atribut onclick?
Regex rOnclick = Regex baru("onclick="(?<onclick>[^"]*)");
Cocokkan mOnclick = rOnclick.Match(sHtml);
if (mOnclick.Sukses)
{
// ada atribut onclick yang ada;
// tambahkan kode kita di akhir; jika sisi klien
// validasi telah diberikan, pastikan
// kami memeriksa apakah halaman tersebut valid;
string sExisting = mOnclick.Groups["onclick"].Nilai;
string sReplace = sAda
+ (sExisting.Trim().EndsWith(";") ? "" : "; ");
if (IsValidatorIncludeScript() && this.CausesValidation)
{
// sertakan kode untuk memeriksa apakah halaman tersebut valid
string sCode = "jika (Page_IsValid) " + sPleaseWaitCode
+ " kembalikan Page_IsValid;";
// tambahkan kode kita di akhir kode onclick yang ada;
sReplace = sReplace + sKode;
}
kalau tidak
{
// jangan khawatir halaman tersebut valid;
sReplace = sReplace + sPleaseWaitCode;
}
// sekarang gantikan kode onclick kita
sReplace = "onclick="" + sReplace;
sReturn = rOnclick.Replace(sHtml, sReplace);
}
kalau tidak
{
// tidak ada atribut onclick;
// tambahkan milik kita
int i = sHtml.Trim().Panjang - 2;
string sInsert = " onclick="" + sPleaseWaitCode + "" ";
sReturn = sHtml.Insert(i, sInsert);
}
return sReturn;
}
IsValidatorIncludeScript() menggunakan pemeriksaan di atas untuk melihat apakah ada blok kode Javascript standar untuk kontrol validasi asp.net yang terdaftar pada halaman. Berikut ini menggunakan metode sederhana untuk menguji apakah ada kode validasi dan variabel seperti Page_IsValid.
bool pribadi IsValidatorIncludeScript()
{
// kembalikan TRUE jika halaman ini telah mendaftarkan javascript
// untuk validasi sisi klien; kode ini mungkin tidak didaftarkan
// jika ASP.NET mendeteksi apa yang dipikirkannya (benar atau salah)
// adalah browser tingkat bawah.
kembalikan this.Page.IsStartupScriptRegistered("ValidatorIncludeScript");
} GeneratePleaseWaitJavascript() berikut membuat fungsi Javascript PleaseWait() yang terdapat dalam atribut onclick. Kita dapat menentukan tata letak yang diinginkan dengan memeriksa properti kontrol.
string pribadi HasilkanPleaseWaitJavascript()
{
// membuat panggilan fungsi JavaScript "PleaseWait()".
// cocok untuk digunakan dalam string pengendali event onclick
sMessage = "";
string sText = _pleaseWaitText;
string sImage = (_pleaseWaitImage != String.Kosong
? string.Format(
"<img src="{0}" align="absmiddle" alt="{1}"/>"
, _mohonTungguGambar, _mohonTungguTeks )
: String.Empty);
// membuat tata letak berdasarkan PleaseWaitType
beralih (_pleaseWaitType)
{
kasus PleaseWaitTypeEnum.TextThenImage:
sPesan = sTeks + sGambar;
merusak;
kasus PleaseWaitTypeEnum.ImageThenText:
sPesan = sGambar + sTeks;
merusak;
kasus PleaseWaitTypeEnum.TextOnly:
sPesan = sTeks;
merusak;
kasus PleaseWaitTypeEnum.ImageOnly:
sPesan = sGambar;
merusak;
}
// mengembalikan potongan kode terakhir
string sKode = string.Format(
"TolongTunggu('mohonTungguButtonDiv_{0}',
'tolongTungguButtonDiv2_{1}', '{2}');"
, ini.ClientID, ini.ClientID, sMessage);
sCode = sCode.Replace(""", """);
return sCode;
}
Jika Anda menentukan PleaseWaitImage, Anda harus menyertakan potongan kode Javascript tambahan untuk memberi tahu klien agar memuat gambar terlebih dahulu. Pendaftaran skrip ini akan muncul dalam metode OnPreRender yang diganti. Kunci terdaftar adalah nama gambar; jika beberapa tombol menggunakan gambar yang sama, skrip pramuat hanya perlu diterapkan satu kali. Ekspresi reguler digunakan di sini untuk membuat variabel gambar Javascript guna memastikan bahwa karakter khusus (seperti garis miring pada jalur file) diubah menjadi garis bawah.
penggantian yang dilindungi batalkan OnPreRender(EventArgs e)
{
base.OnPreRender (e);
// Jika kita menggunakan gambar, daftarkan beberapa javascript
// untuk pramuat gambar sisi klien
if (_pleaseWaitImage != String.Kosong
&& _pleaseWaitType != PleaseWaitTypeEnum.TextOnly)
DaftarJavascriptPreloadImage(_pleaseWaitImage);
}
kekosongan pribadi RegisterJavascriptPreloadImage(string sImage)
{
Regex rex = Regex baru("[^a-zA-Z0-9]");
string sImgName = "img_" + rex.Replace(sImage, "_");
StringBuilder sb = StringBuilder baru();
sb.Tambahkan("<bahasa skrip='JavaScript'>");
sb.Append("if (dokumen.gambar) { ");
sb.AppendFormat("{0} = Gambar baru();", sImgName);
sb.AppendFormat("{0}.src = "{1}";", sImgName, sImage);
sb.Tambahkan(" } ");
sb.Append("</script>");
this.Page.RegisterClientScriptBlock(sImgName + "_PreloadScript",
sb.ToString());
}
Fungsi sisi klien
File teks tertanam javascript.txt berisi <div> yang menyembunyikan tombol dan kode sisi klien yang menampilkan pesan atau gambar "harap tunggu". Kode-kode ini dimuat dalam metode pribadi RegisterJavascriptFromResource() yang dipanggil dalam metode OnInit() yang diganti. Metode ini memanggil metode generik GetEmbeddedTextFile(), yang memuat file sebagai sumber dan mengembalikan konten sebagai string.
override terproteksi void OnInit(EventArgs e)
{
base.OnInit(e);
// kode javascript sisi klien disimpan
// di sumber daya yang tertanam; memuat skrip
// dan daftarkan ke halaman tersebut.
DaftarJavascriptFromResource();
}
kekosongan pribadi DaftarJavascriptFromResource()
{
// memuat file teks yang disematkan "javascript.txt"
// dan daftarkan isinya sebagai skrip sisi klien
string sScript = GetEmbeddedTextFile("javascript.txt");
this.Page.RegisterClientScriptBlock("PleaseWaitButtonScript", sScript);
}
string pribadi GetEmbeddedTextFile(string sTextFile)
{
// fungsi umum untuk mengambil konten
// dari sumber file teks yang tertanam sebagai string
// kita akan mendapatkan rakitan pelaksana, dan memperolehnya
// namespace menggunakan tipe pertama di Majelis
Majelis a = Majelis.GetExecutingAssembly();
String sNamespace = a.GetTypes()[0].Namespace;
// dengan assembly dan namespace, kita akan mendapatkan
//menyematkan sumber daya sebagai aliran
Aliran s = a.GetManifestResourceStream(
string.Format("{0}.{1}", sNamespace, sTextFile)
);
// membaca isi aliran menjadi sebuah string
StreamReader sr = StreamReader baru;
String sContents = sr.ReadToEnd()
;
s.Tutup();
kembalikan sContents;
}
Sumber daya tertanam javascript.txt berisi metode sisi klien PleaseWait() yang dijalankan di pengendali tombol onclick Javascript. Kode ini juga memanggil metode sisi klien HideDiv() untuk menyembunyikan wadah tombol <div>, lalu menyusun informasi atau gambar ke dalam tag <div> yang sebelumnya kosong dengan menyetel atribut innerHTML. Fungsi tambahan GetDiv() mengembalikan objek <div> dengan id dengan memeriksa document.getElementById, document.all, dan document.layers, memastikan kompatibilitas dengan browser yang berbeda. Di bawah ini adalah keseluruhan kode javascript.txt:
<bahasa skrip="JavaScript">
fungsi GetDiv(sDiv)
{
vardiv;
jika (dokumen.getElementById)
div = dokumen.getElementById(sDiv);
else if (dokumen.semua)
div = eval("jendela." + sDiv);
else if (dokumen.lapisan)
div = dokumen.lapisan[sDiv];
kalau tidak
div = nol;
kembalikan div;
}
fungsi SembunyikanDiv(sDiv)
{
d = DapatkanDiv(sDiv);
jika(d)
{
if (dokumen.lapisan) d.visibilitas = "sembunyikan";
else d.style.visibility = "tersembunyi";
}
}
fungsi MohonTunggu(sDivButton, sDivMessage, sInnerHtml)
{
SembunyikanDiv(sDivButton);
var d = GetDiv(sDivMessage);
jika (d) d.innerHTML = sInnerHtml;
}
</script>
Tautan asli: http://www.codeproject.com/aspnet/PleaseWaitButton.asp
Unduh Sumber Proyek - 7 Kb
Unduh Proyek Demo - 30 Kb
http://www.cnblogs.com/jeffamy/archive/2006/08/20/481952.html