Monday, January 14, 2013

Calling JavaScript function from Link Button in ASP.NET

This is a simple article which demonstrates how to use Link Button control of ASP.NET in the web applications. This article explains on how to execute client side functions when the link button is clicked.

Example projects are created using Visual Studio 2008 and the project type created is Web Application.

Purpose: Calling JavaScript function and passing the property value.

Here is my UI code:

I have added a Grid View control of ASP.NET to display a list of products. The columns displayed are Product Name and Description.

To display the Product Name, I have added a Link Button control which has got text value as the Product Name. I have added one custom property called “myCustomID” and setting the property with a value of the Product ID.

Note: You can add as many custom properties in controls and can access them wherever is needed though you will not see when using the Intellisense while defining them.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HyperLinkExample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript" src="JS/jquery.js"></script>

    <script type="text/javascript">

$(document).ready(function() {

   jQuery('[id$="LinkProducts"]').click(function() {

   var customID = $(this).attr('myCustomID');;







    <form id="form1" runat="server">


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


                <asp:TemplateField HeaderText="Product Name">


<asp:LinkButton ID="LinkProducts" runat="server" myCustomID='<%# Eval("ID")%>' Text='<%# Eval("Name")%>'></asp:LinkButton>



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







In the code behind file, I have added a class called “Product” which has got 3 public properties: ID, Name, and Description.

    public class Product


       public string Name { get; set; }

       public string ID { get; set; }

       public string Description { get; set; }


Now include the name space System.Collection.Generic for using the collections in your example.

using System.Collections.Generic;

Now create a collection of objects of type “Product” and define the property values. In a real-time application, you might get data from the databases.

Add the following code in the Page Load event of the class:

List<Product> ProductList = new List<Product>


new Product(){Name="Product1", ID="1",Description = "Description1"},

new Product(){Name="Product2", ID="2",Description = "Description2"},

new Product(){Name="Product3", ID="3",Description = "Description3"}


            ShowProducts.DataSource = ProductList;


The above code initializes a collection object ProductList with 3 Product type data and binds the data to the Grid View.

When you run your application, your browser should be displayed as below:

Now we need to write client side script for Link Button Click event. I am using jQuery in my example. You can download the jQuery from the jQuery website or from the code attachment with this article.

Include the jQuery in the page and then write code for click function. Get the custom property value and display as an alert.

<script type="text/javascript" src="JS/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

   jQuery('[id$="LinkProducts"]').click(function() {

   var customID = $(this).attr('myCustomID');;





Now click on the hyperlink in your browser and you should see that the javascript function is invoked and an alert with the ID of the Product Name is displayed.


In real-time applications, the custom property value will be used for other purposes like displaying corresponding client side data for the value or hiding/showing some of the elements and calculating some of the values based on the requirements.

This article is intentionally made short so that if someone searches for this requirement, he/she should be able to get the proper help.

In my next article we would see how to execute server side functions when user clicks the Link Button.

Happy Coding!!!

No comments:

Post a Comment