Friday 12 April 2013

Ajax Modal Popup With Asp.net



Hi Friends,

In this article I will show you how to Show modal Popup using Ajax Modal Popup Extender

Ajax introduces Modal Popup Extender for showing popup in Asp.net Application.


Step 1: Create one Asp.net Web Application

Step 2: Add Script Manager on the Aspx Page.

     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
      
Step 3: Add reference of Ajax Assembly

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


Step 4: Add Ajax modal popup extender on the Aspx page. Where TargetControlId is on which control you want to show modal popup and PopupControlID is a panel/div where you want to show some message or content on modal popup


    <asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"     runat="server" CancelControlID="btnCancel" OkControlID="btnDone" TargetControlID="btnAddNew" PopupControlID="pnlpopup" Drag="true" >
            </asp:ModalPopupExtender>


Step 5: Add some CSS for better UI Looking like

<style type="text/css">
.ModalPopupBG
{
background-color: Black;
filter: alpha(opacity=10);
opacity: 0.7;
z-index: 10000;
}    </style>

Step 6: I added one panel called “pnlpopup” and  added some controls on that panel.


        <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="400" Width="500px"
            Style="display: none">
            <table width="100%" style="border: Solid 3px #D55500;
 width: 100%; height: 100%"
                cellpadding="0" cellspacing="0">
                <tr style="background-color: #D55500">
                    <td colspan="2" style="height: 10%; color: White; 
font-weight: bold; font-size: larger"
                        align="center">
                        User Details
                    </td>
                </tr>
             
                <tr>
                    <td align="right">
                        Product Name:
                    </td>
                    <td>
   <asp:TextBox ID="txtname" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
               Product Quantity:
           </td>
           <td>
               <asp:TextBox ID="txtqaun" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
            Product Rate:
           </td>
           <td>
               <asp:TextBox ID="txtrate" runat="server" />
           </td>
       </tr>
       <tr>
           <td align="right">
               Total:
           </td>
           <td>
               <asp:TextBox ID="txtTotal" runat="server" />
           </td></tr>
<tr>
            <td>
            </td>
            <td>
                <asp:Button ID="BtnSave"  runat="server"
                    Text="Add" />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                <asp:Button ID="btnDone" runat="server" Text="Done" />
            </td>
        </tr>
    </table>
</asp:Panel>




                                                                                                                                                                                                                                                          

                                                                                                

Step 7: You can run this application. Now your popup will look like




Happy Programming!!
Don’t forget to leave your feedback and comments below!
If you have any query mail me to Sujeet.bhujbal@gmail.com     
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
----------------------------------------------------------------------------------

No comments:

Post a Comment