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:

this.ModalPopupExtender1.Show();

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">
    <title></title>
    <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;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnForAjax" runat="server" Text="" Style="display: none" />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg"
                        TargetControlID="btnForAjax">
                    </ajaxToolkit:ModalPopupExtender>

                    <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:Panel>
                    <asp:Button ID="btnClick" runat="server" Text="Click here" OnClick="btnClick_Click"/>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

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)
    {
        this.ModalPopupExtender1.Show();
    }

}

Now it will appear like below:





0 comments

Post a Comment