Controlul ModalPopupExtender
Creați o fereastră modal pop-up cu biblioteca AJAX de Control Toolkit este destul de simplu. În primul rând aveți nevoie pentru a determina panoul, care oferă o interfață de utilizator, și apoi adăugați un buton care declanșează afișarea casetei de dialog:
Apoi, aveți nevoie pentru a configura o extensie și specificați obiectivul de ID-uri de control și fereastra pop-up:
ID-ul obiectivului de control al extinderii ModalPopup - identificator pentru controlul serverului. care determină apariția casetei de dialog făcând clic. ID-ul fereastra pop-up de control - ID-ul de control ale serverului, care permite conținutul casetei de dialog.
Infrastructura de control AJAX Toolkit nu prevede casete de dialog stilul standard. Pentru a elimina fereastra, utilizatorul trebuie să utilizeze elementele panoului grafic. Fig. 2 prezintă un exemplu de acțiune caseta de dialog. Acesta oferă unele informații, și vă permite să confirmați. Cu toate acestea, dacă doriți sensibile la context ferestre care necesită acțiuni suplimentare de utilizator va trebui să lucreze un pic mai mult.
Fig. 2 Exemplu de ferestre de dialog de acțiune web modal
Puteți adăuga un număr de caracteristici care ModalPopup de expansiune arata ca o casetă de dialog pentru Windows. De exemplu, este util pentru a adăuga capacitatea de a închide caseta de dialog prin apăsarea tastei Esc - o caracteristică comună pe Windows, nu acceptă încă AJAX de Control Toolkit.
Înainte de a razibrat aceste funcții, vă voi spune pe scurt despre metodele și controlul proprietăților ModalPopupExtender. Fig. 3 enumeră proprietățile sale, cu excepția tuturor automat moștenită din clasele de bază.
Figura de control 3 Proprietăți ModalPopupExtender
Controlul clasa semnăturii ModalPopupExtender este după cum urmează:
Aici este o clasă de bază - extinderea bibliotecii definită și DynamicPopulate oferă suport pentru mai multe extensii. DynamicPopulate - o altă extensie AJAX Toolkit de control, înlocuind DOM element text markup returnat de un apel la serviciul Web. extinderea ModalPopup depinde de alte extensii AJAX Toolkit de control, inclusiv DropShadow și DragPanel.
Caseta de dialog Conținut subramificație complet opredeleyaetsya DOM, având un element rădăcină, a declarat prin proprietatea PopupControlID. Adesea, acest lucru ASP.NET control de tip server, cum ar fi panou. Poziția ferestrei pop-up este determinată de proprietățile X și Y, sunt însă dacă coordonatele nu sunt specificate, fereastra va fi centrat pe orizontală.
Ca orice caseta de dialog pentru Windows clasic, fereastra pop-up-ul modal poate fi tras. Pentru a asigura acest lucru, trebuie să specificați în proprietatea elementului ID PopupDragHandleControlID, care va fi folosit ca un „mâner“ pentru a drag and drop și un scenariu construit va face restul. Rețineți că fereastra modal poate fi tras numai în zona paginii acoperite de DOM. Cu alte cuvinte, în cazul în care zona paginii DIV este definit ca având o înălțime de 100 de pixeli, iar pagina este afișată în fereastra browser-ului 1600 x 1024 pixeli, fereastra poate fi tras în plan vertical cu 100 de pixeli, indiferent de dimensiunea fizică a ferestrei browser-ului.
Dacă setați proprietățile RepositionMode orice altă valoare decât „Niciuna“ (implicit), inclusiv comportamentul script care actualizează poziția ferestrei pop-up atunci când derulați sau schimbați dimensiunea ferestrei browser-ului unui utilizator (vezi. Fig. 4).
Fig. 4 Schimbați poziția casetei de dialog modal
Închiderea pop-up butonul Esc
Adăugarea de animație la ecranul
Când a terminat cu acest lucru, puteți trece la alte lucruri. Ar fi frumos să folosească ceva de genul efectul estompare, care utilizează Windows Vista® pentru aplicații Web, nu-i așa? Acest efect este integrat în fereastra normală sub Windows, de exemplu, cele care apar atunci când apelați window.alert metodă. Obiceiul modal ferestre pop-up, cum ar fi cele pe care noi nu trebuie să o facem noi înșine.
În viitorul apropiat, animația poate fi construită funcție de extensie a ModalPopup, dar încă face să funcționeze destul de ușor, datorită interfeței API deja terminat animații AJAX control Toolkit bibliotecă. Codul de mai jos se referă la extinderea animației, care asigură animarea unor dezvoltări prefinit ale DOM, cum ar fi onload, OnClick, onMouseover și onMouseOut. puncte TargetControlID la un element DOM, evenimentul care va începe o animație:
Animațiile pot fi asamblate în mod succesiv, iar unele pot fi chiar și redate simultan. Codul de mai sus panoul O pur și simplu lent asociat cu o fereastră pop-up modal pentru o anumită perioadă de timp și numărul de cadre după presare. Codul de mai jos prezintă o animație mai complexă, care desfășoară mai multe efecte:
Orice cod care este asociat cu evenimentul de afișare este executată imediat înainte de afișarea ferestrei pop-up. Acest eveniment poate fi folosit pentru a efectua orice sarcini de inițializare pe partea de client. Alte evenimente client la care se pot lega includ ascunde (ascunde), ascuns (ascuns) și prezentat (afișat).
Elemente de initializare pop-up
Pe partea de client extensia ModalPopup comutã vizibilitatea copac DOM, atribute definesc PopupControlID. Codul sursă pentru comportamentul client poate fi văzut pentru interceptarea marcaje de cod suplimentare, care sunt încărcate de pe server ca parte a paginii nod, care poate fi utilizat pentru afișare.
Prin urmare, este imposibil de a face modificări în fereastra vsplyuchayuschego model sau conținutul după încărcarea paginii. Să considerăm un exemplu de realizare. Utilizatorul selectează un client, să zicem, din lista verticală și a vedea detaliile. Ar putea fi necesar să se schimbe orice informații despre client. Într-o aplicație Web tipică, utilizatorul este redirecționat către o pagină nouă sau, de exemplu, a revenit cu un alt conținut de sarcină. În ASP.NET 2.0 și versiuni mai noi, acest lucru face controlul DetailsView. Aplicația poate fi utilizată dialogooe fereastra modal pentru mediul de lucru. Pentru aplicații cu suport AJAX sunt acum disponibile fereastra de web interactiv.
Caseta de dialog utilizată pentru a schimba clientul are un regim permanent, care este umplut cu conținut nou de fiecare dată când apare. Să presupunem că executați o postback completă la alegerea clientului. În cazul unor schimbări în alegerea reprezentării clientului actualizate și în plus controlează fereastra pop-up modal. Astfel, atunci când apăsați butonul, o casetă de dialog apare cu cele mai recente informații deja încărcate.
Dar aplicația AJAX de obicei nu efectuează postback completă. Fig. 5 prezintă un fragment de pagină AJAX pentru ASP.NET, folosește redare parțială pentru a actualiza prezentarea clientului. Zona actualizată este legată de evenimentul SelectedIndexChanged la un copil de control listă drop-down. La rândul său, proprietatea lista AutoPostBack drop-down este setat la „true“. Rezultatul este că, în cazul în care utilizatorul schimbă selecția în lista verticală, tabelul din fig. 5 este actualizat fără a reîncărca pagina. Până în prezent, totul este clar.
Figura 5 Utilizarea redare parțială pentru a actualiza reprezentarea clientului
Următoarea etapă - pentru a actualiza panoul din Fig. 6, care reprezintă conținutul popup-modal. Panoul trebuie să fie sincronizat cu reprezentarea clientului.
Figura 6 Conținutul pop-up modal acceptă redare parțială
Panoul poate fi actualizat atunci când un client nou, atunci când panoul este afișat, sau direct în fața panoului de afișaj:
În cazul în care conținutul ferestrei pop-up este actualizată imediat în fața ecranului (am recomanda această abordare), inițializarea codul casetei trebuie să fie executat pe server, dar nu va avea evenimente postback de la un control care afișează o fereastră modal. Chiar dacă se vor schimba dialogul de control casetă va fi prea târziu. expansiune ModalPopup adaugă la control-clic de tratare a evenimentelor elementul țintă pe partea de client și împiedică acțiunea implicită - în acest caz un postback.
Deci, trebuie să folosim un control țintă fals pentru a extinde ModalPopup, că nu este aruncat afară din elementul automat. Cum, atunci, executați o fereastră de tip pop-up modal? Aici este un exemplu. Apăsând partea inferioară a handler serverului de operare imagistica efectuat OnClick:
Acest lucru are două avantaje. În primul rând, pagina nu este actualizată complet. În al doilea rând, codul OnClick pe server poate fi utilizat pentru a inițializa corect panoul pop-up, și apoi specificați extensia pentru a afișa o fereastră pop-up:
Metoda InitDialog conține un cod intern necesar pentru a inițializa toate controalele în panoul din Fig. 6. Codul este suficient pentru a schimba controalele de stat, dar nu se schimba markup lor. Astfel, acesta a obținut deoarece codul se realizează pe redarea parțială de transmisie inversă. Următorul pas este de a actualiza repornește panoului. În cele din urmă, un apel la o metodă de extensie ModalPopup Show. Acest apel asigură încărcarea corespunzătoare în script-ul browser-ul, care arată de dialog de încărcare a paginii. Fig. 7 prezintă efectul unei set de pagini pe aceste recomandări.
Fig. 7 Modal dialoguri cu date din contextul actual
Deci, dacă aveți nevoie de o singură pagină toate aceste domenii de redare parțială? În cazul în care singura ta sarcină - să dau seama cum de a rula dialoguri codul de server, atunci poate că se poate face fără unele zone. Dar dacă doriți să lucrați în caseta de dialog de inițializare pe partea de server, atunci cu siguranță ar trebui să fie supuse actualizării datelor colectate de pagini. În acest caz, este necesar să se întoarcă datele la server.
Reveniți date la server
Aici este un exemplu handler OK:
Acum e rândul tău
Pentru a rula acest exemplu, nu am adăuga codul de control existente sau comportamentul clientului. Am folosit doar de un set de elemente (atât client și server), pentru a îmbunătăți dialogul de inițializare și de comunicare cu pagina de start. Pentru a evita reîncărcare completă, am folosit o redare parțială, acolo unde a fost necesar.
Se repetă același lucru în cererea dumneavoastră este de a instala cea mai recentă versiune a AJAX Toolkit de control, împachetare panoul modal către UpdatePanel, acordând o atenție să nu includă butoane „OK“ si „Cancel“ în zona parțială. Apoi, cravată ModalPopup expansiune invizibil pentru software-ul de control și de afișare și a ascunde fereastra pop-up. În cele din urmă, dacă doriți să adăugați butoane suplimentare într-o fereastră fără ao închide, tot ce ai nevoie - adăugați-le la panoul de UpdatePanel, care descrie fereastra pop-up. Detalii suplimentare pot fi găsite în codul sursă. O linie de cod este în valoare de o mie de cuvinte!