Modal Popup Extender using ASP Net AJAX


Core ASP.NET Links

 

Modal Popup Extender using ASP Net AJAX

Getting started with ASP.Net AJAX:

Ajax(Asynchronous Javascript and XML) is entirely a new approach to web development, It is mostly used to enhance the interactivity of a web application. Traditional web application are based on the request-response model. For each client interaction with the user interface of a web application, an HTTP request is sent to the IIS Server, which process the request and sends back the processed result to the web application. During the mean time when this process in progress the entire web application or browser windows re-loads which quite frustrating.To remove the shortcomings like round trip to server & Page reloading, Ajax which implements entirely a different approch to web development,was introduced & its solves problem using its own AJAX engine which comes in between the web application & the IIS Server. Ajax engine makes an asynchronous call to the server without interrupting the User Interactions with the UI part of web application.


Basic steps required before starting with ASP.Net Ajax:
 

1)  Download AJAX Control Toolkit from asp.net

2) Extract the Downloaded folder & go to Visual Studio

3) Right Click on toolbox under AJAX Extensions > Choose Items

Ajax Modal Popup Tutorial Choose

4) Under .Net Framework Components Tab Select Browse

Ajax Modal Popup Tutorial Browse

5) Browse your downloaded folder & open AjaxControlToolkit.dll file

Ajax Modal Popup Tutorial Ajax dll

6) Now you will find all the Ajax controls are added automatically under AJAX Extensions which anyone can use.

Ajax Modal Popup Tutorial Ajax Toolkit



ASP.Net AJAX Modal Popup Extender:
Modal Popup Extender using ASP.Net Ajax is out first example, A modal popup using Ajax is basically used within a web page for displaying some messages on certain events performed by user.

How to Display Modal popup using Ajax in ASP.Net:

Here is the step by step tutorial for displaying a Modal popup using Ajax in ASP.Net:

Step1: Register the Ajax controltoolkit Assembly on page

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

Step2: Add a new Web page in the project say, popup.aspx

Step3: Add ScriptManager on Page :

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>


Step4: Create your message box design:

<table id="tb" bgcolor="White" width="35%">
            <tr>
                <td bgcolor="White" colspan="2" valign="middle" align="center">
                    &nbsp;
                    <asp:Label ID="Label2" runat="server" Font-Names="Verdana" Font-Size="Medium" Font-Bold="true" Text="Core ASP.Net"></asp:Label>
                    <br />
                </td>
            </tr>
            <tr>
                <td bgcolor="White">
                    &nbsp;<asp:Image ID="Image1" runat="server" ImageAlign="Top" ImageUrl="~/Users/image/error.jpeg"
                        Height="40px" Width="40px" />
                    &nbsp;
                    <br />
                </td>
                <td bgcolor="White" align="left" valign="middle">
                    <asp:Label ID="lblError" runat="server" Text="Welcome to ASP.Net Ajax Tutorial. This tutorial is submitted by CoreASP.Net Admin."></asp:Label>
                </td>
            </tr>
            <tr>
                <td bgcolor="White" align="center" colspan="2">
                    <asp:LinkButton ID="LinkButton1" runat="server" class="button"><span>Close</span></asp:LinkButton>
                    <br />
                </td>
            </tr>
            <tr>
                <td bgcolor="White" colspan="2" align="center">
                    &nbsp;
                    <br />
                    © Copyright CoreAsp.net 2009-2010
                </td>
            </tr>
        </table>
 

Step5: Add Modal popup Extender on Page

<cc1:ModalPopupExtender ID="mpeMessage" runat="server" PopupControlID="tb" TargetControlID="hf" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

<asp:Hiddenfield Id="hf" runat="server" />

Step 6: from C# Code you just have to call show() method to open the popup.

protected void btnSubmit_Click(object sender, EventArgs e)
    {
        mpeMessage.Show();
    }

Popup.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pop.aspx.cs" Inherits="pop" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
        }
        .modalBackground
        {
            background-color: gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <p>
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Show Popup" />
    </p>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table id="tb" bgcolor="White" width="35%">
            <tr>
                <td bgcolor="White" colspan="2" valign="middle" align="center">
                    &nbsp;
                    <asp:Label ID="Label2" runat="server" Font-Names="Verdana" Font-Size="Medium" Font-Bold="true" Text="Core ASP.Net"></asp:Label>
                    <br />
                </td>
            </tr>
            <tr>
                <td bgcolor="White">
                    &nbsp;<asp:Image ID="Image1" runat="server" ImageAlign="Top" ImageUrl="~/Users/image/error.jpeg"
                        Height="40px" Width="40px" />
                    &nbsp;
                    <br />
                </td>
                <td bgcolor="White" align="left" valign="middle">
                    <asp:Label ID="lblError" runat="server" Text="Welcome to ASP.Net Ajax Tutorial. This tutorial is submitted by CoreASP.Net Admin."></asp:Label>
                </td>
            </tr>
            <tr>
                <td bgcolor="White" align="center" colspan="2">
                    <asp:LinkButton ID="LinkButton1" runat="server" class="button"><span>Close</span></asp:LinkButton>
                    <br />
                </td>
            </tr>
            <tr>
                <td bgcolor="White" colspan="2" align="center">
                    &nbsp;
                    <br />
                    © Copyright CoreAsp.net 2009-2010
                </td>
            </tr>
        </table>
        <cc1:ModalPopupExtender ID="mpeMessage" runat="server" PopupControlID="tb" TargetControlID="hf"
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
<asp:Hiddenfield Id="hf" runat="server" />
    </div>
    </form>
</body>
</html>
 

popup.aspx.cs :

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class pop : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        mpeMessage.Show();
    }
}

Ajax Modal Popup Tutorial output

 
Comments
Ashik
Posted on : 5/8/2011 9:52:45 AM
Its a very good tutorial on Modal Popup Extender using ASP.Net Ajax
Post Your Comments/Queries
Name :
Email :
 
Comments :
 
Quick Links
Welcome Guest User
Login login
Register Register
Site Map Sitemap


You searched for : Modal Popup Extender using ASP Net AJAX