Home > AJAX, ASP.Net > Ajax ModalPopup with Iframe Within Gridview

Ajax ModalPopup with Iframe Within Gridview


Hi all,

try this example to open Ajax ModalPopup with Iframe Within Gridview for Details

In this Example i will use Northwind Database

Step1 :- Create a new Website and Add Two Pages “Orders.aspx” , “CustomerDetails.aspx”

Step2:- Add Web.Config file and add the connection String of your Database to be like that

<connectionStrings>
  <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Srep3:- Open Orders.aspx and Add ScriptManager and  Gridview control and Bind it using SqlDataSource control and put them inside UpdatePanel control so your page will be like that

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Orders.aspx.cs" Inherits="Orders" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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">
    body, div, p, h1, h2, h3, h4, ul, li, table
    {
      margin:0;
      padding:0;
      border:none;
    }
    /*Modal Popup*/
    .modalBackground
    {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
    }
    .modalPopup
    {
      background-color:Gray;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:3px;     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="OrderID" DataSourceID="SqlDataSource1" AllowPaging="True">
                    <Columns>
                        <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False"
                            ReadOnly="True" SortExpression="OrderID" />
                        <asp:BoundField DataField="OrderDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="OrderDate" SortExpression="OrderDate" />
                        <asp:BoundField DataField="RequiredDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="RequiredDate" SortExpression="RequiredDate" />
                        <asp:BoundField DataField="ShippedDate" DataFormatString="{0:dd/MM/yyyy}"
                            HeaderText="ShippedDate" SortExpression="ShippedDate" />
                        <asp:BoundField DataField="ShipCity" HeaderText="ShipCity"
                            SortExpression="ShipCity" />
                        <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"
                            SortExpression="ShipCountry" />
                        <asp:TemplateField HeaderText="CustomerID" SortExpression="CustomerID">
                            <ItemTemplate>
                                <asp:LinkButton ID="lbtn_Details" runat="server" Text="Show Customers"></asp:LinkButton>
                                <cc1:ModalPopupExtender ID="mdl1" runat="server" TargetControlID="lbtn_Details" PopupControlID="GVMP"
                                            BackgroundCssClass="modalBackground" OkControlID="OkButton"
                                            CancelControlID="CancelButton"/>
                                <asp:Panel ID="GVMP" runat="server" CssClass="modalPopup" style='display:none;'>
                                 <iframe src="CustomerDetails.aspx?CustomerID=<%# Eval("CustomerID") %>" width="60%" height="100%" scrolling="auto"></iframe><br /><br />
                                    <asp:Button ID="OkButton" runat="server" Text="OK" Width="50" />
                                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" Width="50" />
                                </asp:Panel>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                    SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate], [RequiredDate], [ShippedDate], [ShipCity], [ShipCountry] FROM [Orders]">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel> 
    </form>
</body>
</html>

Step3:- Open Page CustomerDetails.aspx and add Gridview and Bind it to Customers Table and filter it with CustomerID which will be from Querystring from Orders.aspx page so your page will be like that

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomerDetails.aspx.cs" Inherits="CustomerDetails" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"
                    SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
                    SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName"
                    SortExpression="ContactName" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers] WHERE ([CustomerID] = @CustomerID)">
            <SelectParameters>
                <asp:QueryStringParameter Name="CustomerID" QueryStringField="CustomerID"
                    Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
    </form>
</body>
</html>

Hope that helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net
  1. mirek
    July 29, 2011 at 10:21 pm

    That is a very good article! I’m trying to achieve something similar but my data source is linq to sql created in code behind. And that presents a big troubles with passing the query string to the iframe src. Any idea how to do that ?
    Thanks
    Mirek

  2. yasserzaid
    August 3, 2011 at 2:03 pm

    @mirek :- You are welcome hope my post helps you … Good Luck

  3. February 12, 2012 at 8:39 am

    test gravatar

  4. Shonia
    June 12, 2013 at 2:31 pm

    This is very similiar to what I am doing in a project I have, except I have an issue when I go to another page of the gridview, my iframe will not close. The only difference is that my gridview is within an update panel. I know it’s a synchronization issue but I can not figure it out. Any ideas?

    • Shonia
      June 12, 2013 at 2:33 pm

      My mistake, I see you are also using an Update Panel. So I am going to download this code and implement it and see if you have the same issue with your iframe when paging in the gridview.

  5. Shonia
    June 12, 2013 at 3:44 pm

    Hi there. I have tested the code and yours works great — but it has a slightly different issue – when you click on a records on the first page, works great. If you go to another page, the first time you click on a record to open iframe, then you close that iframe, it does a full postback of the gridview. Then, any other records on that page work fine because it is async postbacks. This is where I am pulling my hair out – do you have any thoughts? I would appreciate it very much.

  6. innocent
    April 28, 2016 at 10:08 am

    This is Nice I like it

    • yasserzaid
      October 23, 2016 at 7:11 am

      Thank you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: