Example of ModalpopupExtender – Ajax Control

 

In this article I will illustrate how to create a ModalpopupExtender.

Its Use: ModalpopupExtender is an Ajax Control. It is used to pop up a panel. Whatever the controls you want to see in your ModalPopupExtender add it to a panel and assign this Panel Id to “TargetControlID” attribute of ModalpopupExtender.

Important attributes of this control are :

TargetControlID – to which we need to assign a Id of the Control (like button or hyperlink)

PopupControlID – assign Id of the panel to be shown in the pop up.

OkControlId – Id of Ok / Submit button control.

CancelControlId – Id of Cancel button

OnOkScript – add some java script functionality for click of Ok button

OnCancelScript - add some java script functionality for click of Cancel button.

So to use it we need to either register Ajax Control ToolKit or add namespace in Web.Config file. For adding Ajax Control Toolkit to the project or solution , check my earlier article :

http://sailajareddy-technical.blogspot.in/2012/09/how-to-install-aspnet-ajax-control.  

Aspx Code:

 <form id="form1" runat="server">
    <asp:ScriptManager ID="Sc1" runat="server"></asp:ScriptManager>
    SAMPLE CODE TO ILLUSTRATE MODELPOPUPEXTENDER OF AJAX CONTROL TOOLKIT
    <br />
    <br />
    <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
    <br />
    <br />
    Text Entered in Modalpopup:
    <asp:TextBox ID="txtShow" runat="server"></asp:TextBox>
    <asp:Panel ID="Pn1" runat="server">
        <asp:TextBox ID="txtData" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click" />
        <asp:Button ID="btnCancel" Text ="Cancel" runat="server" />
    </asp:Panel>
    
    <ajaxToolkit:ModalPopupExtender 
        ID="PopUp1" runat="server" 
        TargetControlID="btnShow" 
        PopupControlID="Pn1"
        CancelControlID="btnCancel">
    </ajaxToolkit:ModalPopupExtender>
    </form>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Forum_Topics_ModelpopupExtender_Sample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        txtShow.Text = txtData.Text;
    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        txtShow.Text = txtData.Text;
    }
}