Bikin Preloader di ASP.net pake Ajax

Well well…. Kadang user tuh suka gak sabaran ya nungguin loading di suatu web, secara aq juga begitu. Kalo lagi buka web dan dalam 5 detik masih proses pasti pada ngedumel. Kenapa nih web lemot banget…. Ya ya ya biar mreka tau kalo program kita lagi in progress alias masih ngelakuin suatu proses (proses ya bukan lemot), kita kasih tanda aja kalau lagi proses. Tanda lagi proses itu dikenal dengan nama Preloader. Mmmm klo di flash emang namanya preloader tapi kalo di visual studio apa ya namanya? Aq belum tau hehehe… Anggep aja sama lah ya😀

Gini nih cara bikinnya…

  1. Siapin file kamu yg akan dikasih preloader dan tambahkan komponen UpdateProgress. Eh perlu diinget nih kawan, form page kita neh harus ajax enable ya dan harus ada komponen UpdatePanel sama ScriptManager dan UpdateProgress kita masukin dalem UpdatePanel. Kayak punyaq gini nih

  2. pre_1

  3. Terus masuk ke source aspx-nya dan ketikkan code css berikut di tag head di dalam tag style
  4. .updateProgressPanel
    {
    position: absolute;
    width: 200px;
    left: 30%;
    top: 200px;
    background-color: #fff;
    border: solid 1px #919b9c;
    text-align: left;
    vertical-align: middle;
    padding-top: 16px;
    padding: 5px;
    }
    

    serta code berikut didalam code UpdateProgress

    <div class=”updateProgressPanel” style=”left: 34%; top: 10px;”>
    <img src=”Image/ajax-loader.gif” alt=”Loading” />
    Loading please wait….</div>

    Kalau code yg kamu masukin bener hasilnya kayak gini nih

    pre_2

  5. Oke, kalo udah sekarang masuk ke file code *.vb-nya dan ketikkan code berikut di event mana yg bakal keluar preloader, misalnya di event Page_Load
  6. System.Threading.Thread.Sleep(2000)
  7. Udah selesai prosesnya tinggal run web kalian… Kayak gini nih punya aq. Gimana punya kalian?
  8. pre_3

2 Komentar (+add yours?)

  1. Soleh Hudin
    Des 17, 2008 @ 17:17:23

    keep coding nya Teh…

    Balas

  2. isdah ahmad
    Des 19, 2008 @ 01:35:17

    wah lom pernah pegang aspx😀

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: