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

Mehram
 
on Nov 23, 2021 12:53 AM
Sample_309340.zip
604 Views

Sir,

Need your support, the model page is loading but not showing any data in gridview. Please help

button inside the gridview is inside the UpdatePanel

<asp:TemplateField HeaderText="Dues" SortExpression="Dues" ItemStyle-HorizontalAlign="right">
    <ItemTemplate>
        <asp:Button  ID="lnkView" runat="server" Text='<%# Bind("Dues")%>'  Width="100px" Font-Underline="true" data-toggle="modal" data-target="#mymodal" OnClick="Preview" CommandArgument='<%#Eval("MemberID")%>' UseSubmitBehavior="false" />
    </ItemTemplate>
</asp:TemplateField>

Model page

<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="gvFeeDetail" runat="server" AllowPaging="false" ShowFooter="true"
                                    CssClass="table table-bordered table-hover dataTable" AutoGenerateColumns="false" DataKeyNames="ID">
                                    <Columns>
                                        <asp:BoundField DataField="ID" SortExpression="ID" HeaderText="ID"></asp:BoundField>
                                        <asp:BoundField DataField="MemberID" SortExpression="MemberID" HeaderText="ID" Visible="false" ></asp:BoundField>
                                        <asp:BoundField DataField="Month" SortExpression="Month" HeaderText="Month"></asp:BoundField>
                                        <asp:BoundField DataField="Rs" SortExpression="Rs" HeaderText="Amount" DataFormatString="{0:n}" />
                                        <asp:BoundField DataField="Remarks" SortExpression="Remarks" HeaderText="Status"></asp:BoundField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </div>
                    </div>
                    <%--<p>Some text in the modal.</p>--%>
                </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>

vb.net code

Protected Sub Preview(ByVal sender As Object, ByVal e As EventArgs)
        'Dim MemberID As String = (TryCast(lnk.NamingContainer, GridViewRow)).Cells(1).Text
        Dim MemberID As String = DirectCast(sender, Button).CommandArgument
        Dim ObjJobMaster As New clsmemberFeeDetail
 
        Dim dsJobHead As New DataSet
        ObjJobMaster.MemberID = MemberID
        ObjJobMaster.CompanyID = Session("CompanyID")
        If ObjJobMaster.LoadFeeHistory(dsJobHead) = False Then
            lblMessage.Text = "<div class=""alert alert-error"">" & ObjJobMaster.ErrMessage & "</div>"
            Exit Sub
        End If
        If dsJobHead.Tables(0).Rows.Count = 0 Then
            lblMessage.Text = "<div class=""alert alert-info"">No Data</div>"
        Else
            gvFeeDetail.DataSource = dsJobHead.Tables(0).DefaultView
            gvFeeDetail.DataBind()
 
            If gvFeeDetail.Rows.Count > 0 Then
                gvFeeDetail.HeaderRow.TableSection = TableRowSection.TableHeader
            End If
        End If
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "modelBox", "<script>$('#mymodal').modal('show');</script>", True)
    End Sub

 

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Nov 23, 2021 02:11 AM
on Nov 23, 2021 03:13 AM

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