Web and Mobile Apps Codeware: Ajax ModalPopupExtender Demo in Asp.net

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:

Team tt24December 6, 2013 at 2:23 AM
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
Replies
sudhirFebruary 21, 2014 at 11:09 PM
how we write code if image button inside the Datalist and pop up image to a bigger size
ReplyDelete
Replies

Add comment