Pass value from ASP.Net GridView to Bootstrap modal popup on LinkButton Click using C# and VB.Net

Hi Stella,

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

C#

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=linkbutton1]").click(function () {
            var text = $("[id*=hfNotes]").val();
            $("[id*=modal_body]").html(text);
            openModal();
        });
        function openModal() {
            $("[id*=myModal]").modal('show');
        }
    });
</script>
<div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Modal Title</h4>
                </div>
                <div class="modal-body">
                    <p id="modal_body" runat="server">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="EmployeeID" HeaderText="Id" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HiddenField ID="hfNotes" runat="server" Value='<%# Eval ("Notes")%>' />
                    <asp:LinkButton ID="linkbutton1" runat="server" data-toggle="modal" 
                    Text='<%# Eval ("Notes").ToString().Length > 10 ? Eval("Notes").ToString().Substring(0,10): Eval("Notes").ToString()%>'></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

VB.Net

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=linkbutton1]").click(function () {
            var text = $("[id*=hfNotes]").val();
            $("[id*=modal_body]").html(text);
            openModal();
        });
        function openModal() {
            $("[id*=myModal]").modal('show');
        }
    });
</script>
<div>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        Modal Title</h4>
                </div>
                <div class="modal-body">
                    <p id="modal_body" runat="server">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="EmployeeID" HeaderText="Id" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HiddenField ID="hfNotes" runat="server" Value='<%# Eval ("Notes")%>' />
                    <asp:LinkButton ID="linkbutton1" runat="server" data-toggle="modal" 
                    Text='<%# If (Eval ("Notes").ToString().Length > 10, Eval("Notes").ToString().Substring(0,10), Eval("Notes").ToString())%>'></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
</form>

Namespace

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.BindGird();
    }
}

private void BindGird()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 4 EmployeeID,Notes FROM Employees", con))
        {
            con.Open();
            gvEmployees.DataSource = cmd.ExecuteReader();
            gvEmployees.DataBind();
            con.Close();
        }
    }
}

VB.Net

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

Private Sub BindGird()
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT TOP 4 EmployeeID,Notes FROM Employees", con)
            con.Open()
            gvEmployees.DataSource = cmd.ExecuteReader()
            gvEmployees.DataBind()
            con.Close()
        End Using
    End Using
End Sub

Screenshot