AJAX di ASP.NET (Modal Dialog Box)

AJAX di ASP.NET. Modal Dialog Box

Saya ingin mengambil kesempatan ini untuk memperkenalkan kontrol yang berguna yang dapat membuat aplikasi Anda benar-benar interaktif. Dalam demonstrasi ini, saya akan menunjukkan kepada Anda bagaimana kita dapat menerapkan modal Dialog Box menggunakan AJAX di ASP.NET. Modal Dialog Box (disebut ModalPopupExtender) sangat penting dalam aplikasi saat ini, seperti menulis JavaScript window.open () untuk membuka pop-up atau untuk membuka halaman ASP.NET terpisah sebagai pop-up kadang-kadang sangat membosankan, memakan waktu dan yang lebih penting, berkali-kali kinerja harus dikorbankan. Contoh sederhana bisa membuktikan poin saya.

Langkah-langkah

1. Create a new AjaxEnabledWebSite dari Visual Studio pilihan Wizard Proyek.
2. Tambahkan AjaxControlToolkit.dll yang ada di file artikel ini.
3. Di Web Application (contohnya Default.aspx), Tambahkan Link Button contah nama : "View Job Details".
4. Tambahkan table HTML statik. tambahkan tombol OK dan Cancel.
5. Jika tag ScriptManager tidak tampil di form, tambahkan skrip seperti di bawah ini
 

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 

6. Tambahkan beberapa baris stylesheet css.
 

body, div, p, h1, h2, h3, h4, ul, li, table 
{
    margin:0;
    padding:0;
    border:none;
}

/* Modal Pop-up */ 

.modalBackground 
{
    background-color:
    filter:alpha(opacity=70);
    opacity:0.7; 
} 

.modalPopup 
{
    background-color:#ffffdd; 
    border-width:3px; 
    border-style:solid; 
    border-color:Gray; 
    padding:3px; 
    width:250px; 
}

7. Panggil halaman css tersebut
 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 

8. Sekarang tempatkan kode berikut tepat di atas kontrol Panel di baris seprate:
 

<ajaxtoolkit:modalpopupextender 
    id="ModalPopupExtender" 
    runat="server" 
    backgroundcssclass="modalBackground" 
    cancelcontrolid="CancelButton" 
    dropshadow="true" 
    okcontrolid="OkButton" 
    popupcontrolid="Panel1" 
    popupdraghandlecontrolid="Panel3" 
    targetcontrolid="lbn_job_det"> 
</ajaxtoolkit:modalpopupextender> 

CancelControlId di ModalPopUpExtender menandakan bahwa yang mengendalikan diperlakukan sebagai tombol Batal. Secara default properti dari kontrol ini adalah untuk menutup dialog. Tapi itu dapat disesuaikan menggunakan atribut OnCancelScript . Anda hanya perlu menggunakan fungsi JavaScript untuk melakukan itu. Ada atribut OnOkScript juga.

9. Untuk memanggil file ajaxcontroltoolkit, tambahkan skrip ini di atas html
 

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="ajaxToolkit" %>  

10. Run

Ini adalah ide dasar dan demonstrasi tentang bagaimana menerapkan Modal Popup Extender di ASP.NET.

Ajax Control Toolkit.dll 
Contoh Program (ModalPupupExtender) 

 (Sumber)