Tuesday, May 21, 2013

Ajax ModalPopupExtender Demo in Asp.net | Ajax ModalPopupExtender Example

Hello In this post i will be demonstrating on how to use Ajax ModalPopupExtender control in asp.net.

Example:

1. On linkbutton click I will be showing the Ajax modal popup Screen. On the modal popup screen i will bind a gridview with some sample Data.

2. Below is the code

Aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopup.aspx.cs" Inherits="Mailjavascript" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajax:ToolkitScriptManager>
    <asp:LinkButton ID="LinkButton1" runat="server">Click Me</asp:LinkButton>

    <asp:Panel ID="Panel1" runat="server" BorderColor="Black" BackColor="White" Height="300px"
        Width="800px" HorizontalAlign="Center">
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <br />
        <br />
        <asp:Button ID="Ok" runat="server" Text="submit" OnClick="Button2_Click" />
        <asp:Button ID="can" runat="server" Text="cancel" />
    </asp:Panel>

    <ajax:ModalPopupExtender ID="MPE" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1"
        BackgroundCssClass="modalBackground" CancelControlID="can">
    </ajax:ModalPopupExtender>
    </form>
</body>
</html>



Codebehind:


using System;
using System.Web;
using System.Web.UI;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public partial class Mailjavascript : System.Web.UI.Page
{
    string conStr = ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ConnectionString.ToString();
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection s1 = new SqlConnection(conStr);
        s1.Open();

        string queryString = "SELECT * FROM employee";
        SqlDataAdapter adapter = new SqlDataAdapter(queryString, s1);

        DataSet employee = new DataSet();
        adapter.Fill(employee, "employee");

        s1.Close();

        GridView1.DataSource = employee.Tables[0];
        GridView1.DataBind();
    }


    protected void Button2_Click(object sender, EventArgs e)
    {
        MPE.Show();
    }
}


3. Result:


1. Click on linkButton

2. ModalPopExtender Screen

3 comments:

  1. really nice sir ...
    you can try another example of it here this is also very helpful...
    http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html

    ReplyDelete
  2. how we write code if image button inside the Datalist and pop up image to a bigger size

    ReplyDelete
    Replies
    1. Place your image button inside the asp:TemplateField tag.
      And On the image button click event , show the modal popup extender.

      Delete