Posts Tagged ‘extender’

Ajax Control Toolkit – ModalPopUp

May 13th, 2010

Σήμερα θα μιλήσουμε για το modal popup window το οποίο περιέχεται μέσα στο ajax control toolkit.

Αρχικά κατεβάζουμε το ajax control toolkit από εδώ.

Στη συνέχεια αποσυμπιέζουμε το αρχείο του toolkit και τοποθετούμε  το αρχείο AjaxControlToolkit.dll στο bin folder του project μας.
Κάνουμε reference της παραπάνω βιβλιοθήκης στο project μας και συνεχίζουμε βάζοντας τα controls του ajax toolkit στην toolbar του Visual Studio.

Αυτό γίνεται ως εξής:
Κάνουμε δεξί κλικ στην toolbar και επιλέγουμε Add Tab. Στη νέα καρτέλα δίνουμε το όνομα Ajax Control Toolkit.
Συνεχίζουμε κάνοντας δεξί κλικ πάνω στην καρτέλα που μόλις δημιουργήσαμε και πατάμε Choose Items.
Πατάμε το κουμπί browse και βρίσκουμε την βιβλιοθήκη που τοποθετήσαμε στο bin folder.
Πατάμε OK και είμαστε έτοιμοι να χρησιμοποιήσουμε τα πολυπόθητα controls.

Αφού κάνουμε reference της βιβλιοθήκης όπως αναφέρθηκε παραπάνω, τοποθετούμε με drag n drop το ToolkitScriptManager control στην asp.net σελίδα μας ακριβώς κάτω από εκεί που δηλώνουμε τη φόρμα μας.
Προκύπτει δηλαδή κάτι τέτοιο:

<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

Τελικά αυτό που θα κάνουμε είναι να δημιουργήσουμε ένα κρυφό panel μέσα στο οποίο μπορούμε να τοποθετήσουμε ένα login/signup control. Το panel αυτό θα εμφανίζεται αφού πυροδοτηθεί ένα event από κάποιο άλλο control όπως ένα image button ή ακόμη και από ένα Hyperlink.
Παραθέτω τον κώδικα για ένα panel μέσα στο οποίο βρίσκεται ένα login control.

<asp:Panel ID="panelLogin" runat="server" CssClass="panelPopUp" style="display:none;">
            <asp:Hyperlink ID="cancelBtn1" runat="server" ImageUrl="~/images/exit_btn.png">
            </asp:Hyperlink>
            <asp:Login ID="login1" runat="server" CssClass="loginControl">
</asp:Login>
        </asp:Panel>

Και στο τέλος του προγράμματος προσθέτουμε τον modalPopUp extender ο οποίος πυροδοτεί το event:

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
        PopupControlID="panelLogin" TargetControlID="LoginHyperlink"
        CancelControlID="cancelBtn1" BackgroundCssClass="modalpopup">
    </asp:ModalPopupExtender>

Ουσιαστικά κοιτάζοντας τον extender παρατηρούμε ότι καθορίζουμε το control (LoginHyperlink) το οποίο με το που θα το πατήσουμε θα πυροδοτήσει το panel control (panelLogin).
Όλα τα παραπάνω είναι χρήσιμα για να φτιάξετε ένα πανέμορφο web 2.0 interface στο δυναμικό (και όχι μόνο) site σας.

Tags: , , ,
Posted in Coding | Comments (0)

  • Twitter
  • Facebook
  • LinkedIn