Powered by Blogger.

Friday, February 14, 2014

Show ModalPopupExtender in code behind in Ajax in Asp.Net

In this post we will discuss how to show a ModalPopupExtender in the code behind rather than in a simple button click. Also you can check my previous articles on:

- Data access block of Microsoft enterprise library 6.0 using stored procedure

- Set Maximum length for multiline textbox in asp.net

- Steps to create wcf service and host wcf service as windows service in C#.Net

If you want to show a modal popup directly on a button click then check this article.

Suppose you want to show the modal popup on a button click after executing some conditions then you can do like below:

First drag and drop a Ajax ModalPopupExtender from the toolbox. If the Ajax Extender controls are not appearing in the toolbox then check this article to add to the toolbox.

To achive this we will take 2 button and one button we will hide by writing Style="display: none" and we will give the TargetControlID to this button Id. We will not set any property. And in the other button

OnClick event we will show the modalpopup like below:


You can follow below code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=50);
            opacity: 0.7;

        .modalPopup {
            background-color: #FFFFFF;
            border: 3px solid #CCC;
            padding-top: 10px;
            padding-left: 10px;
            width: 300px;
            height: 140px;
            clear: both;
            position: absolute;
            margin-top: 0;
    <form id="form1" runat="server">
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <asp:Button ID="btnForAjax" runat="server" Text="" Style="display: none" />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg"

                    <asp:Panel ID="pnlPopupMsg" runat="server" CssClass="modalPopup">
                        <asp:Label ID="lblMessage" runat="server" Text="Here is the message which will come!!!"></asp:Label><br />
                        <br />
                        <asp:Button ID="btnYes" runat="server" Text="Yes" OnClick="btnYes_Click" />
                        <asp:Button ID="btnNo" runat="server" Text="NO" OnClick="btnNo_Click" />
                    <asp:Button ID="btnClick" runat="server" Text="Click here" OnClick="btnClick_Click"/>

Below is the .cs code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default15 : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
    protected void btnYes_Click(object sender, EventArgs e)
    protected void btnNo_Click(object sender, EventArgs e)
    protected void btnClick_Click(object sender, EventArgs e)


Now it will appear like below:


Nitesh Kumar April 18, 2017 at 10:18 PM

I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in AJAX, kindly contact us http://www.maxmunus.com/contact
MaxMunus Offer World Class Virtual Instructor led training on AJAX. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023

Post a Comment