Sample on AJAX Modal Popup with Grid-view

Raj.Trivedi
Posted by in ASP.NET AJAX category on for Beginner level | Points: 250 | Views : 5420 red flag

In this article we will see how we can show dynamically bound grid in Modal POP -UP.

Introduction


Hello Friends,

In this article we will see how we can bind a grid and show it in modal pop - up of AJAX.We will be using CSS feature to show the modal pop - up.Some times we have to show some results in a pop-up and for that we can use the AJAX - Modal POP - UP.

Pre-requisite
Basic Knowledge of CSS


Objective


  1. Understanding AJAX Modal POP - UP Control Properties.


Using the code


  1. Create a New Web site in VS 2010.Add a Web form.
  2. Drag and drop AJAX Toolkit Script Manager on the Webform (To embed AJAX Control Toolkit please visit this article and follow steps 1- 8)
  3. Link :-   http://www.dotnetfunda.com/articles/article2344-upload-image-using-ajax-async-file-uploader-in-database.aspx
  4. 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

  1. In this application we will drag and drop a Button and a Panel.
  2. The Panel will  pop up as we click the Show Counties Button.
  3. The Pop - up of the Panel is handled with the modal-pop up class.
  4. We will bind the Grid on Page Load of the Application so that we just need to show the Grid in modal pop-up.
  5. The Grid will be placed in the Panel.

Here is the UI Screen



Output : Modal Popup







Conclusion


This can be useful if you want to capture users attention to a specific result set.You can modify the CSS as per your need to change the Background of the Modal POP - UP.

Reference



Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)