Bind ASP.Net GridView inside bootstrap modal on Button Click inside another GridView using C# and VB.Net

Hi mehram,

 Please refer below sample.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div class="container">
    <asp:ScriptManager runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:GridView runat="server" ID="gvCustomers" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="CustomerId" HeaderText="ID" />
                    <asp:BoundField DataField="ContactName" HeaderText="Name" />
                    <asp:TemplateField HeaderText="Save">
                        <ItemTemplate>
                            <asp:Button Text="Preview" ID="btnPreview" runat="server" OnClick="OnPreview" CommandArgument='<%#Eval("CustomerId")%>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <div>
                <div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Monthly Member Payment Detail </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="box-body table-responsive">
                                        <div class="row" id="divSearch" runat="server" visible="true">
                                            <div class="col-xs-12">
                                                <asp:GridView ID="gvOrders" runat="server" AllowPaging="false" ShowFooter="true"
                                                    CssClass="table table-bordered table-hover dataTable" AutoGenerateColumns="false" DataKeyNames="OrderId">
                                                    <Columns>
                                                        <asp:BoundField DataField="OrderId" SortExpression="OrderId" HeaderText="ID"></asp:BoundField>
                                                        <asp:BoundField DataField="ShipVia" SortExpression="Quantity" HeaderText="Quantity"></asp:BoundField>
                                                        <asp:BoundField DataField="Freight" SortExpression="Freight" HeaderText="Amount" DataFormatString="{0:n2}" />
                                                        <asp:BoundField DataField="OrderDate" SortExpression="OrderDate" HeaderText="OrderDate" DataFormatString="{0:dd/MM/yyyy}"></asp:BoundField>
                                                        <asp:BoundField DataField="ShipCountry" SortExpression="ShipCountry" HeaderText="ShipCountry"></asp:BoundField>
                                                    </Columns>
                                                </asp:GridView>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-flat toolbtn" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

<script type="text/javascript">
    function ShowPopup() {
        $('#mymodal').modal('show');
    };
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string conn = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conn))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 CustomerId, ContactName FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
                }
            }
        }
    }
}

protected void OnPreview(object sender, EventArgs e)
{
    string customerId = (sender as Button).CommandArgument;
    string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(cs))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 OrderId, ShipVia, Freight, OrderDate,ShipCountry FROM Orders WHERE CustomerId = @id", con))
        {
            cmd.Parameters.AddWithValue("@Id", customerId);
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvOrders.DataSource = dt;
                    gvOrders.DataBind();
                    ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup();", true);
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim conn As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conn)
        Using cmd As SqlCommand = New SqlCommand("SELECT TOP 5 CustomerId, ContactName FROM Customers", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    gvCustomers.DataSource = dt
                    gvCustomers.DataBind()
                End Using
            End Using
        End Using
    End Using
End Sub

Protected Sub OnPreview(ByVal sender As Object, ByVal e As EventArgs)
    Dim customerId As String = (TryCast(sender, Button)).CommandArgument
    Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(cs)
        Using cmd As SqlCommand = New SqlCommand("SELECT TOP 5 OrderId, ShipVia, Freight, OrderDate,ShipCountry FROM Orders WHERE CustomerId = @id", con)
            cmd.Parameters.AddWithValue("@Id", customerId)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Using dt As DataTable = New DataTable()
                    sda.Fill(dt)
                    gvOrders.DataSource = dt
                    gvOrders.DataBind()
                    ScriptManager.RegisterStartupScript(TryCast(sender, Control), Me.GetType(), "Popup", "ShowPopup();", True)
                End Using
            End Using
        End Using
    End Using
End Sub

Screenshot