Calling JavaScript Function From Link Button in ASP.NET

Introduction

This is a simple article that demonstrates how to use a Link Button control of ASP.NET in web applications. This article explains 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 a 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 the text value of the Product Name. I have added one custom property called "myCustomID" and set the property to the Product ID.

Note: You can add many custom properties in controls and can access them wherever needed though you will not see them 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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');;
alert(customID);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="ShowProducts" runat="server" AutoGenerateColumns="false">
<Coluns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:LinkButton ID="LinkProducts" runat="server" myCustomID='<%# Eval("ID")%>' Text='<%# Eval("Name")%>'></asp:LinkButton>
</ItemTemplate
</asp:TemplateField>
<asp:BoundField DataField="Description" HeaderText="Description" />
</Columns
</asp:GridView>
</div>
</form>
</body>
</html>

In the code-behind file, I have added a class called "Product" which has 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;
ShowProducts.DataBind();

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 in the following:

Now we need to write a client-side script for the 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 the code for the 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');;
alert(customID);
});
});
</script>

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.

Conclusion

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 will see how to execute server-side functions when the user clicks the Link Button.