- Create a New Web site in VS 2010.Add a Web form.
- Drag and drop AJAX Toolkit Script Manager on the Webform (To embed AJAX Control Toolkit please visit this article and follow steps 1- 8)
- Link :- http://www.dotnetfunda.com/articles/article2344-upload-image-using-ajax-async-file-uploader-in-database.aspx
- Remember :- We are working with Modal POP - UP Control so we need to drag and drop Modal POP - UP Control and not A SYNC Up-loader.
Understanding Properties of AJAX Modal POP - UP
TargetControlID :- The ID of the control which will trigger the Pop up panel.
PopupControlID :- The ID of the Panel to be shown in the Pop UP.
BackgroundCssClass :- The CSS Class which will help to shade out the back ground.
CancelControlID:- This will be the ID of the Control which will Cancel the Modal POP-up.
DropShadow :- This will be either true or false.If true it will drop a Shadow effect on the background.
// Tables & Stored Procedure
USE [DNF]
GO
/****** Object: Table [dbo].[Countries] Script Date: 07/25/2013 21:23:01 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Countries](
[CountryID] [int] IDENTITY(1,1) NOT NULL,
[Countries] [varchar](25) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
create proc [dbo].[GetCountriesList]
as
begin
select * from Countries
end
GO
//CSS - Name :- Main.css
body {
}
.modalBackground
{
background-color: Green;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modalPopup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 40px;
padding-left: 10px;
width: 300px;
height: 450px;
}
//HTML Mark up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAXModalPopup.aspx.cs" Inherits="AJAXModalPopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<link href="Main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="Toolkitscriptmanager1" runat="server">
</asp:ToolkitScriptManager>
<div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div align="center">
<asp:Button ID="btnShowCountries" Width="400" Height="200" runat="server" BackColor="Chocolate" ForeColor="White"
Text="Show Countries" />
</div>
<br />
<br />
<div align="center">
<asp:Panel ID="popuppanel" CssClass="modalPopup" runat="server">
<asp:GridView ID="xdata" HeaderStyle-BackColor="CadetBlue" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Countries" HeaderText="Countries" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnClose" runat="server" BackColor="Chocolate" ForeColor="White"
Text="Close" />
</asp:Panel>
<asp:ModalPopupExtender ID="xmpe" TargetControlID="btnShowCountries" CancelControlID="btnClose" PopupControlID="popuppanel" BackgroundCssClass="modalBackground" DropShadow="true"
runat="server">
</asp:ModalPopupExtender>
</div>
</form>
</body>
</html>
// Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class AJAXModalPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
// Function to bind the data to Grid.
SqlConnection con = new SqlConnection("Data Source=AG-KKC;Initial Catalog=DNF;Persist Security Info=True;User ID=sa;Password=sqluser");
con.Open();
SqlCommand getcontent = new SqlCommand("GetCountriesList", con);
getcontent.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(getcontent);
DataSet ds = new DataSet();
da.Fill(ds);
xdata.DataSource = ds;
xdata.DataBind();
}
catch (Exception ex)
{
}
}
}
Understanding the Application
- In this application we will drag and drop a Button and a Panel.
- The Panel will pop up as we click the Show Counties Button.
- The Pop - up of the Panel is handled with the modal-pop up class.
- We will bind the Grid on Page Load of the Application so that we just need to show the Grid in modal pop-up.
- The Grid will be placed in the Panel.
Here is the UI Screen
Output : Modal Popup