A modális párbeszédablakok ajax, ajax - szoftverek
Ellenőrző ModalPopupExtender
Hozzon létre egy modális pop-up ablak a AJAX Ellenőrző Toolkit könyvtár meglehetősen egyszerű. Először meg kell határozniuk a panel, amely egy felhasználói felületet, majd adjunk hozzá egy gombot, ami elindítja a kijelzőn a párbeszédablak:
Akkor meg kell, hogy hozzanak létre egy kiterjesztése, és adja meg a célt a kontroll azonosítók és a pop-up ablak:
ID ellenőrzés célja bővülő ModalPopup - azonosítója a kiszolgáló ellenőrzés. ami a megjelenését a párbeszédablakot. ID ellenőrzés felugró ablak - ID a szerver vezérlő, amely lehetővé teszi, hogy a tartalma a párbeszédablak.
Infrastruktúra AJAX Ellenőrző Toolkit nem biztosít párbeszédpanelek alapértelmezett stílust. Ahhoz, hogy távolítsa el az ablak, a felhasználónak kell használni a grafikus panel elemeket. Ábra. A 2. ábra egy példa a párbeszédablak lépéseket. Ez ad némi információt, és lehetővé teszi, hogy erősítse meg. Azonban, ha azt szeretnénk, környezetfüggő ablakok igénylő felhasználó további intézkedéseket kell dolgozni egy kicsit.
Ábra. 2. példa cselekvési web modális párbeszédablakok
Felveheti számos funkció, hogy az expanziós ModalPopup nézett ki, mint egy párbeszédablakban. Például érdemes felvenni a képesség, hogy zárja be a párbeszédablakot az Esc gomb - közös jellemzője a Windows, még nem támogatja az AJAX Ellenőrző eszközkészlet.
Mielőtt razibrat ezeket a funkciókat, röviden mondani, a módszerek és tulajdonságok ModalPopupExtender ellenőrzés. Ábra. 3 felsorolja tulajdonságait, kivéve az összes automatikusan örökölt az alapvető osztályok.
3. ábra Tulajdonságok ModalPopupExtender kontroll
Az aláírás osztály ModalPopupExtender szabályozás a következő:
Itt van egy alap osztály - kiterjesztés meghatározott könyvtári és DynamicPopulate támogatja több kiterjesztéseket. DynamicPopulate - további kiterjesztése AJAX Ellenőrző Toolkit helyett DOM elem jelölő szöveget vissza egy hívást, hogy a webes szolgáltatást. ModalPopup terjeszkedés függ más bővítmények AJAX Ellenőrző eszközkészlet, beleértve DropShadow és DragPanel.
Tartalom párbeszédablak teljesen opredeleyaetsya részfa DOM, amelynek gyökér elem, az átmenő PopupControlID tulajdon. Gyakran ez ASP.NET szerver vezérlők, mint a panel. A helyzete a pop-up ablak tulajdonságai határozzák meg az X és Y, jelentése de ha a koordináták nincs megadva, az ablak vízszintesen középre.
Mint minden klasszikus Windows párbeszédpanelen a modális előugró webablakot lehet húzni. Annak érdekében, hogy ezt, meg kell határozni az ingatlan PopupDragHandleControlID elemazonosítóval, amelyeket használni fognak, mint a „kezelni” drag and drop és a beépített script elvégzi a többit. Megjegyezzük, hogy a modális ablak lehet húzni csak az oldalon belül által lefedett területen DOM. Más szóval, ha a terület az oldal DIV definiáljuk, amelynek magassága 100 pixel, és az oldal jelenik meg a böngésző ablakában 1600 1024 pixeles, az ablak lehet húzni függőlegesen 100 képpont, függetlenül a fizikai mérete a böngésző ablakot.
Ha a tulajdonságok RepositionMode eltérő értéket „None” (ez az alapértelmezett), beleértve a viselkedés a forgatókönyvet, hogy frissíti a helyzet a pop-up ablakot, amikor lapozunk, vagy módosíthatja a felhasználó böngésző ablak méretét (lásd. Ábra. 4).
Ábra. 4 Állítsa át a modális párbeszédablak
Zárás a pop-up gomb Esc
Hozzátéve animáció a képernyőn
Ha ezzel végzett, akkor lépni más dolgokat. Jó lenne használnunk, mint például a fade hatás, ami a Windows Vista a webes alkalmazások, nem? Ez a hatás integrálódik a normál ablakot Windows alatt, például azok, hogy felbukkan, amikor hívja window.alert módszer. Az egyéni modális pop-up ablakokat, mint azok, amelyek mi kell csinálni magunknak.
A közeljövőben, az animáció építhető kiterjesztés funkció ModalPopup, de még ez a munka elég könnyen köszönhetően már kész API felületet animációk AJAX Ellenőrző Toolkit könyvtárban. A következő kód utal, hogy a bővítés a animáció, amely biztosítja az animáció néhány előre kész fejlesztések a DOM, mint például onLoad, OnClick, onMouseOver, és onMouseOut. TargetControlID pont egy DOM elemet, az esemény, amely indul az animáció:
Az animációk lehet összeszerelni sorrendben, és néhány még el is játszott egyszerre. A fenti kód csak lassú O panel társított modális pop-up ablak, amely egy meghatározott ideig, és a képkockák számát megnyomása után. Az alábbi kód azt mutatja, egy bonyolultabb animációs, teljesítő több hatás:
Bármilyen kód, amely a kijelzőhöz kapcsolódó esemény kerül végrehajtásra előtt közvetlenül a kijelző a pop-up ablakot. Ez az esemény lehet használni, hogy végre bármilyen kezdeti feladatok a kliens oldalon. Egyéb ügyfél eseményeket, amelyekre kötődhet közé bújva (rejtőzik), rejtett (rejtett), és kimutatták (jelenik meg).
Inicializálás elemek felugró
A kliens oldalon mellék ModalPopup átváltja a láthatóságát a DOM fában, attribútumait PopupControlID. A forráskód az ügyfél viselkedését látható elfogó kiegészítő kód jelölések, amely tele van a szerver részeként a csomópont oldalon, ami lehet használni kijelzőn.
Ezért lehetetlen, hogy a változások a minta vagy a tartalom vsplyuchayuschego ablak után az oldal betöltésekor. Tekintsünk egy kiviteli alak. A felhasználó kiválaszt egy ügyfél, mondjuk, a legördülő listából, és látni a részleteket. Lehet, hogy módosítania kell semmilyen információt az ügyfél. Egy tipikus webes alkalmazás, a felhasználó irányítva egy új oldalt, vagy például, jött vissza a terhelés más tartalom. Az ASP.NET 2.0 és újabb verziók, ez teszi a DetailsView ellenőrzés. Az alkalmazás használható dialogooe modális ablak a munkakörnyezet. Olyan alkalmazásokhoz, AJAX támogatás már elérhető interaktív webes ablakot.
A párbeszédablak változtatni az ügyfél állandó rendszert, amely tele van új tartalom minden alkalommal bukkan fel. Tételezzük fel, hogy egy teljes postback az ügyfél választása. Abban az esetben, változások a választott frissített ügyfél képviselete, és ezen felül vezérli a modális popup. Így, ha megnyomja a gombot, egy párbeszédablak bukkan fel a legújabb információk már betöltött.
De az AJAX alkalmazás általában nem végez teljes postback. Ábra. Az 5. ábra egy töredéke AJAX oldal ASP.NET használ részleges rendering az ügyfél frissítésére bemutatót. Frissítve terület kapcsolódik SelectedIndexChanged esemény egy gyermek legördülő listából ellenőrzés. Másfelől, a legördülő listából AutoPostBack tulajdonság értéke „true”. Az eredmény az, hogy ha a felhasználó megváltoztatja a kiválasztást a legördülő listában, a táblázat látható. 5 frissítik nélkül betölteni az oldalt. Eddig minden világos.
5. ábra A részleges rendering frissíteni ügyfélképviselet
A következő szakaszban -, hogy frissítse a panel látható. 6, amely a tartalmát a modális felugró. Panel szinkronizálni kell az ügyfél képviseletét.
6. ábra A tartalom a modális előugró részben támogatja rendering
A panel lehet frissíteni, ha egy új ügyfél, ha a panel jelenik meg, vagy közvetlenül előtte a kijelző panel:
Ha a tartalmát a pop-up ablak azonnal frissítik előtt a kijelzőn (ajánlom ezt a megközelítést), inicializálás mezőben kódot kell a kiszolgálón fut, de akkor nem lesz események postback egy kontroll, amely megjeleníti a modális ablakot. Még ha meg fogják változtatni a párbeszédablak ellenőrzések már túl késő lesz. ModalPopup bővítése növeli a cél elemet kontroll kattintással eseménykezelő a kliens oldalon, és megakadályozza az alapértelmezett művelet - ebben az esetben a postback.
Tehát, meg kell használni egy dummy cél kontroll bővíteni ModalPopup, hogy nem dobták ki a tételt automatikusan. Hogyan, akkor futtassa a modális pop-up ablak? Itt egy példa. Alsó részét megnyomva a képalkotó végrehajtott művelet szerverkezelő OnClick:
Ennek két előnye van. Először is, a lap nem frissül teljesen. Másodszor, a onclick kódot a szerver használható inicializálása a pop-up panel, majd adja meg a kiterjesztést, hogy megjelenjen a felugró ablakban:
InitDialog eljárás tartalmaz egy belső kódot kell inicializálni összes vezérlőelemet a panel ábrán. 6. A kód elegendő, ha megváltoztatjuk az állami ellenőrzést, de nem változtatja meg jelölést. Így kapunk, mivel a kód kerül végrehajtásra a fordított átviteli részleges rendering. A következő lépés az, hogy frissítse a panel újraindul. Végül egy hívást egy kiterjesztése módszer ModalPopup Show. A hívás biztosítja a megfelelő terhelés a böngésző szkript, amely bemutatja az oldalak betöltési párbeszédablak. Ábra. A 7. ábra a hatás egy oldal létre ezeket az ajánlásokat.
Ábra. 7 modális párbeszédablakok adatokat a jelenlegi helyzetben
Tehát szükség van-e az egyik oldalon az e területek részleges rendering? Ha az egyetlen feladata -, hogy kitaláljuk, hogyan lehet futtatni dialógusok szerver kód, akkor talán meg tudod csinálni anélkül egyes területeken. De ha azt akarjuk, hogy a munka a szerver oldalon inicializálás párbeszédablak, akkor biztosan kell kötni, hogy frissítse az oldalt gyűjtött adatokat. Ebben az esetben van szükség, hogy visszatérjen az adatokat a szerverre.
Az adatok a szerverre
Itt egy példa felvezető OK:
Most te jössz
Futtatni ezt a példát, nem adja hozzá a kódot meglévő ellenőrzések vagy az ügyfél viselkedését. Csak használni a meglévő elemekre (mind kliens és szerver), hogy javítsa az inicializáló párbeszéd és a kommunikáció a honlapon. Annak elkerülése érdekében, a teljes oldal újratöltés, szoktam részleges rendering, ahol helyénvaló volt.
Ismételjük meg ugyanezt a kérelmet, hogy telepítse a legújabb verzióját az AJAX Ellenőrző eszközkészlet, és a csomagolás a modális panel a UpdatePanel, ügyelve, hogy ne olyan gombok „OK” és a „Cancel” részleges területen. Ezután kösd terjeszkedés ModalPopup láthatatlan az ellenőrző és kijelző szoftver és elrejteni felugró ablakban. Végül, ha a felvenni kívánt további gombok egy ablak bezárása nélkül is, csak annyit kell - adja hozzá a testület a UpdatePanel, leírja a pop-up ablakban. További részletek megtalálhatók a forráskódot. Egy sor kódot ér ezer szónál!