In this article I will explain with an example, how to display the details of the GridView Row in JavaScript alert message box when the Button inside the GridView Row is clicked in ASP.Net using C# and VB.Net.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net GridView with three BoundField columns and a Button. The Button has been assigned an OnClientClick event handler which makes call to the ViewDetails JavaScript function.
The multiple Eval (DataBinder.Eval) values are passed as parameters to the ViewDetails JavaScript function using string.Format function. The string parameter values are passed within double quotes.
The ViewDetails JavaScript function displays the parameter values using JavaScript alert message box.
Note: The syntax for escaping double quote character is different for C# and VB.Net languages.
C#
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="View" runat="server" OnClientClick='<%# string.Format("return ViewDetails({0}, \"{1}\", \"{2}\");", Eval("Id"), Eval("Name"), Eval("Country")) %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function ViewDetails(customerId, name, country) {
        var message = "CustomerId: " + customerId;
        message += "\nName: " + name;
        message += "\nCountry: " + country;
        alert(message);
        return false;
    }
</script>
 
VB.Net
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button Text="View" runat="server" OnClientClick='<%# String.Format("return ViewDetails({0}, ""{1}"", ""{2}"");", Eval("Id"), Eval("Name"), Eval("Country")) %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function ViewDetails(customerId, name, country) {
        var message = "CustomerId: " + customerId;
        message += "\nName: " + name;
        message += "\nCountry: " + country;
        alert(message);
        return false;
    }
</script>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Screenshot
Display GridView Row details in JavaScript Alert message box
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code