Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET

Practical Guide for Creating HyperLinkField in GridView in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.60/5 (5 votes)
10 Aug 2010Ms-PL3 min read 83.7K   1.6K   13   18
This article is a step by step approach to create HyperLinkField in GridView in ASP.NET.

Introduction

Sometimes, you may need to put a hyperlink within a row. Let’s consider a simple example; you have a database of best viewed links with comments. Or say for example, there are some student details with photo and CVs within a database you want to display to the college authority; the CVs and photos are stored physically on the server.

In ASP.NET 2.0, there is a control called GridView. I want to discuss about the thing called HyperLinkField, the great support from Microsoft.

There are too many discussions and contributions on the web about this topic, but I've not seen anything without SQLDataSource control.

I like to work with 3 layer architecture and my students and corporate clients require this.

Here, I'm taking a step by step approach to create HyperLink field in GridView.

Background

It's expected that you have some ideas about the 3 layer architecture and have worked with that. Apart from this, you have at least created a simple web application once. (Obviously, you know basic C# syntaxes).

Let’s start.

Step 1: Create a table with the following design (Are you lazy like me? Download the SQL Script and generate the table).

Column Name Data Type
UID varchar(50)
PhotoPath varchar(50)
UName varchar(50)
FilePath varchar(50)

Ready with the table? Good. Move to Step 2.

Step 2: Open a new Web Application Template with Visual Studio 2005/2008

Now perform the following steps...

  1. Take a GridView Control from ToolBox.
  2. Click on the SmartTag and Click on "Edit Columns".
  3. The "Fields" Dialog Box will Pop-up.
  4. Take 4 Bound Fields (Click BoundField on the Left pane and Click "Add" button).
  5. Set "HeaderText" property for each BoundField (Select from the lower left pane and set on property window).
  6. Now Click on "Convert this field into a templatecolumn" link for each and every boundfield.
  7. Do not forget to uncheck the "Auto Generate Fields".
  8. Now, we are ready with the GridView. It's time to edit the templates. First click on the smart tag and then click on "Edit Templates" to edit all the 4 templates created.
  9. Right Click on the Grid and Click "Edit Template"; A pop-up menu will appear. Click Column[3]-FilePath.
  10. On the "ItemTemplate" part, a Label will be there, Delete and put a HyperLink from ToolBox and name that. If you want, you can set other properties as well.
  11. Click the Smart Tag of the Hyper link; Click "Edit Data Bindings".
    1. On the Text Property, I wanted to display the Files Path; so write Eval("FilePath"); means the field name of the DB.
    2. Similarly click NavigateURL property and type the same thing; as I wanted to open the file also.
  12. Follow the same procedure (Right Click on the Grid --> Edit Templates --> Column[2]-PhotoPath) to display the image. I deleted the label control (default) and put one Image Control from toolbox and then typed Eval("PhotoPath") on the ImageURL property.
  13. Now, Click "End Template Editing" from the Smart Tag Menu of the Gridview to get the normal view.
  14. At last, it's time to play with the code.

I have already said, I'm going to use a 3 layer architecture....

Firstly, I have the following code in my DataBase Access Layer (DAL). (Everything is there within the App_Code folder.) The Class Name is DB:

C#
public DataTable FillAndReturnDataTable(string SelectQuery)
{
    SqlDataAdapter adp = new SqlDataAdapter(SelectQuery, GetConnection());
    DataTable dt = new DataTable();
    adp.Fill(dt);
    CloseConnection();
    return dt;
} 

It's time to concentrate on the Business Logic Layer (BLL) (under App_Code folder).

I have added the following code on my BLL; the class name is bllRegistration.

C#
DB dbObj = new DB();  
/// <summary>
/// Selects and Retrieves all Data from Profile Table
/// </summary>
/// <returns>A DataTable</returns>
public DataTable RetrieveProfile()
{
    DataSet ds = dbObj.FillAndReturnDataSet("Select * from Profile");
    return ds.Tables[0];    
} 

We are almost ready. Finally, you can add the code to your User Interface (UI Layer).

Your Page_Load event will contain the following:

C#
protected void Page_Load(object sender, EventArgs e)
{
    FillMyGrid();
}  

So, what about the FillMyGrid() Method within the UI?

C#
public void FillMyGrid()
  {
       //I use Camel Case convention in UI layer....
       //This is my practice boss...

        //Instantiate Object of BLL
       bllRegistration bllObject = new bllRegistration();

        //Fill a DataTable
       DataTable dtProfile = bllObject.RetrieveProfile();

       if (dtProfile.Rows.Count != 0)
       {
           GridView1.DataSource = dtProfile;
           GridView1.DataBind();
       }
 }

Ultimate Output????

Output_HyperlinkField.jpg

History

This is my first article. So, I'm really happy with this. If you like this and the PDF with images, just put a line on "Contact Us" page at http://www.souravmaitra.com.

Wish you all happy Hyperlink Field-ing......

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Technical Lead
India India
I didn't like to be in the development area, so moved to the interface between Training & Development. Where I basically guide people to develop applications and train with latest technologies and processes.

Here in Kolkata, India I'm attached with different organisations.

Comments and Discussions

 
QuestionShow File Names Instead of Their Paths Pin
ASPnoob12-Sep-12 10:12
ASPnoob12-Sep-12 10:12 
AnswerRe: Show File Names Instead of Their Paths Pin
Mr.Sourav.Maitra2-Oct-12 2:47
Mr.Sourav.Maitra2-Oct-12 2:47 
GeneralMy vote of 3 Pin
Pyaephyomgmg26-Dec-10 0:10
Pyaephyomgmg26-Dec-10 0:10 
GeneralRe: My vote of 3 Pin
Mr.Sourav.Maitra2-Jun-11 5:38
Mr.Sourav.Maitra2-Jun-11 5:38 
GeneralFormatting Sucks!!! Pin
Kunal Chowdhury «IN»5-Aug-10 23:19
professionalKunal Chowdhury «IN»5-Aug-10 23:19 
Can you properly format your article please?


Don't forget to Click on [Vote] and [Good Answer] on the posts that helped you.


Regards - Kunal Chowdhury | Software Developer | Chennai | India | My Blog | My Tweets | Silverlight Tutorial

GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:06
Mr.Sourav.Maitra10-Aug-10 8:06 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 8:13
professionalKunal Chowdhury «IN»10-Aug-10 8:13 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:18
Mr.Sourav.Maitra10-Aug-10 8:18 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 8:27
professionalKunal Chowdhury «IN»10-Aug-10 8:27 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:31
Mr.Sourav.Maitra10-Aug-10 8:31 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 8:35
professionalKunal Chowdhury «IN»10-Aug-10 8:35 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:38
Mr.Sourav.Maitra10-Aug-10 8:38 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:33
Mr.Sourav.Maitra10-Aug-10 8:33 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 8:38
professionalKunal Chowdhury «IN»10-Aug-10 8:38 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:36
Mr.Sourav.Maitra10-Aug-10 8:36 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 8:43
professionalKunal Chowdhury «IN»10-Aug-10 8:43 
GeneralRe: Formatting Sucks!!! Pin
Mr.Sourav.Maitra10-Aug-10 8:46
Mr.Sourav.Maitra10-Aug-10 8:46 
GeneralRe: Formatting Sucks!!! Pin
Kunal Chowdhury «IN»10-Aug-10 9:26
professionalKunal Chowdhury «IN»10-Aug-10 9:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.