You must Sign In to post a response.
  • Category: ASP.NET

    Ajax modalpopup example

    how to create ajax modal popup control in web form. In my form i didnt get this.
  • #767462
    Hi,
    You can use AjaxControlToolkit's ModalPopupExtender control.

    Register AJAX Control Toolkit Library first:

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


    ModalPopup Code:

    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Button ID="ButtonOpen" runat="server" Text="Show Modal Popup" />
    <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="PanelDemo" TargetControlID="ButtonOpen"
    CancelControlID="Button">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="PanelDemo" runat="server" align="center" style = "display:none">
    Hi from PopUp.
    <asp:Button ID="ButtonClose" runat="server" Text="Close" />
    </asp:Panel>
    </form>

  • #767463
    I tried this...
    but not getting ajaxtoolkit
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

  • #767466
    Hi,
    Goto visual studio's Package Manager Console and run this command:
    It will install AjaxControlToolkit to VS.

    PM> Install-Package AjaxControlToolkit


    Or
    1. Download AjaxControlToolkit.dll from here:
    http://ajaxcontroltoolkit.codeplex.com/releases/view/116091
    2. Then is VS ToolBox, click 'Add Tab' and give name as 'AjaxControlToolkit'.
    3. Then right click on newly added tab 'AjaxControlToolkit' and click 'Choose Items..'.
    4. Click on 'Browse' button and choose the downloaded AJAX Control Toolkit DLL. Then click Ok.
    5. All the AjaxControlToolkit controls will be now displayed in your Toolbox.

  • #767484
    Hi,

    while using AJAX modal you must and should know the below property usage

    TargetControlID — ID of the element that activates the modal popup.
    PopupControlID – Id of the element to display as a modal popup.
    CancelControlID - ID of the element that cancels the modal popup, but in my example I'm not using CancelControlID. I handle cancel action using Javascript function.
    BackgroundCssClass - This is the property to set the back ground color while modal is appear in the screen.

    then design your page like below

    <asp:Button ID="btnShowPopup" Text="Show Popup" runat="server" Style="display: none" />
    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShowPopup"
    PopupControlID="pnlPopup" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="pnlPopup" runat="server">
    <table>
    <tr>your modal dialog</tr>
    </table>
    </asp:Panel>



    You have to design your page like above...

    Hope this will help you..

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/


  • Sign In to post your comments