In this tutorial you will learn how to fire the client side onclick event of link button inside gridview in asp.net using jquery. I have already taught you about how to fire the server side click event of gridview link button in asp.net using c#. The reason that's why I am writing this article is that if we can do the same work through the client side then there is no need to fire the link button's server side click event because the client side method is always speedy.

How to fire the client side onclick event of link button inside gridview in asp.net using jquery

jquery code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
jQuery(function()
{
//debugger;
jQuery("table[id$='GridView1'] td:nth-child(2)").live('click',function(event){window.location="nextpage.aspx?firstname="+jQuery(event.target).text();});
});
</script>

.aspx code

<asp:GridView ID="GridView1" runat="server" EnableTheming="false" AutoGenerateColumns="false" GridLines="None" Width="100%">

<Columns>

<asp:TemplateField HeaderText="Sr#" HeaderStyle-Width="10%" HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Label ID="lblSrNo" runat="server" EnableTheming="false" Text='<%# Bind("SrNo")%>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>

<asp:TemplateField HeaderText="First Name" HeaderStyle-Width="15%" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:LinkButton ID="lnkFirstName" runat="server" EnableTheming="false" Text='<%# bind("firstName") %>'></asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

<asp:TemplateField HeaderText="Last Name" HeaderStyle-Width="15%" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" EnableTheming="false" Text='<%# Bind("LastName")%>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>

</Columns>

</asp:GridView>

You have to include the jquery file in your .aspx page and then copy/paste the above mentioned javascript function and change it according to your need.

jQuery's Selectors allow you to select DOM elements so that you can apply functionality to them using jQuery's operational methods. jQuery uses CSS 3.0 syntax (plus some extensions) to select single/multiple elements in a document. Using CSS syntax you can select elements by their id, CSS class, attribute filters, by relationship to other element and even filter conditions that can be chained together.

Now let's understand the jquery code use in this example. td:nth-child(2) means get the all second column TD elements of gridview. nth means all elements and then using built-in live() function of jquery I am binding it's client side onclick event and then I have written a code that will be executed whenever client side onclick event will be fired. As you know when asp page renders then <asp:Gridview> is converted into table that's why I am using td:nth-child(2).

jQuery(event.target).text() is getting the text of link button and then I am redirecting user to nextpage.aspx.

So this is the way to fire the clientside onclick event of link button inside gridview in asp.net using jquery.