Display ASP.Net GridView Selected row details in bootstrap Modal Popup with CommandField using C# and VB.Net

Hi Makumbi,

Please refer below sample.

HTML

<div class="container">
    <asp:GridView runat="server" ID="gvCustomers" AutoGenerateColumns="false" DataKeyNames="CustomerId" OnRowCommand="Select">
        <Columns>
            <asp:CommandField ShowHeader="True" ShowSelectButton="True" />
            <asp:TemplateField HeaderText="Customer Id">
                <ItemTemplate>
                    <asp:Label ID="lblId" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Country">
                <ItemTemplate>
                    <asp:TextBox ID="txtCountry" runat="server" Text='<%# Eval("Country") %>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div id="myModal" class="modal fade" style="width: auto;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button style="padding: 0px" type="button" data-dismiss="modal">&times;</button>
                <h4>Customer's Details</h4>
            </div>
            <div class="modal-body">
                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                    <div class="form-group">
                        <asp:Label ID="lblId" runat="server" Text="CustomerId"></asp:Label>
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="txtName" runat="server" Text="Name"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <asp:TextBox ID="txtCountry" runat="server" Text="Country"></asp:TextBox>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript'>
    function openModal() {
        $('[id*=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();
    }
}

protected void Select(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Select")
    {
        GridViewRow gvRow = gvCustomers.Rows[Convert.ToInt32(e.CommandArgument)];

        lblId.Text = (gvRow.FindControl("lblId") as Label).Text;
        txtName.Text = (gvRow.FindControl("txtName") as TextBox).Text; ;
        txtCountry.Text = (gvRow.FindControl("txtCountry") as TextBox).Text;
        ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    }
}

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

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

Protected Sub [Select](ByVal sender As Object, ByVal e As GridViewCommandEventArgs)
    If e.CommandName = "Select" Then
        Dim gvRow As GridViewRow = gvCustomers.Rows(Convert.ToInt32(e.CommandArgument))
        lblId.Text = (TryCast(gvRow.FindControl("lblId"), Label)).Text
        txtName.Text = (TryCast(gvRow.FindControl("txtName"), TextBox)).Text
        txtCountry.Text = (TryCast(gvRow.FindControl("txtCountry"), TextBox)).Text
        ClientScript.RegisterStartupScript(Me.GetType(), "Pop", "openModal();", True)
    End If
End Sub

Private Sub BindGrid()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId, Name, Country 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

Screenshot