Get ID of Button inside GridView when clicked using JavaScript in ASPNet

In this article I will explain with an example, how to get the ID of Button inside ASP.Net GridView when clicked using JavaScript.

When the Button is clicked, a JavaScript function is called and the ID will be fetched and displayed using JavaScript Alert Message Box.

HTML Markup

The HTML Markup consists of an ASP.Net GridView with three BoundField columns and one TemplateField column.

The TemplateField column consists of a Button control. The Button has been assigned with an OnClientClick event handler which makes call to a JavaScript function.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<asp:BoundField DataField="Id" HeaderText="Customer Id" />

<asp:BoundField DataField="Name" HeaderText="Name" />

<asp:BoundField DataField="Country" HeaderText="Country" />

<asp:TemplateField>

<asp:Button ID="btnSelect" runat="server" Text="Select" OnClientClick="return GetButtonId(this)" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Namespaces

You will need to import the following namespace.

using System.Data;

Binding the GridView

Inside the Page Load event, the GridView is populated with a dynamic DataTable with some dummy records.

Note: For more details on dynamic DataTable refer my article Dynamically create DataTable and bind to GridView in ASP.Net.

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();

}

Getting ID of Button inside ASP.Net GridView when clicked using JavaScript

When the Select Button inside the GridView Row is clicked, the GetButtonId JavaScript function is called and the reference of the clicked Button is passes as parameter.

Inside the GetButtonId JavaScript function, the clicked Button object is received as parameter and the ID of the Button is determined.

Finally, the Button ID is displayed using JavaScript Alert Message Box.

function GetButtonId(button) {

//Fetch the reference of the Button which was clicked from parameter.

var message = button.id;

//Display the data using JavaScript Alert Message Box.

alert(message);

return false;

};

</script>

Screenshot