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"
"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">
<Columns>
<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 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;
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 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');;
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 would see how to execute server side
functions when user clicks the Link Button.
Happy Coding!!!
No comments:
Post a Comment