Create HyperLink in WebGrid in Web API

Introduction

This article explains how to create a hyperlink in a Web Grid. Here we create a hyperlink for the Employee Name.

Use the following procedure to create a sample application.

Step 1

Create a Web Application as in the following:

  • Start Visual Studio 2012.
  • From the Start window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click on the "Ok" button.

    Select MVC4 Application

  • From the "MVC4 Project" window select "Web API".

    Select Web API

  • Click on the "OK" button.

Step 2

Create a Model Class.

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    Add model Class

  • Click on the "Add" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace HyperlinkWebGridAPI.Models  
  6. {  
  7.     public class EmployeeDetail  
  8.     {  
  9.         public List<Employee> UserCollection { getset; }  
  10.     }  
  11.     public class Employee  
  12.     {  
  13.         public int Id { getset; }  
  14.         public string Emp_Name { getset; }  
  15.         public int Contact_No { getset; }  
  16.         public string Emp_Address { getset; }  
  17.     }  
  18. } 

Step 3

Now select the "HomeController".

  • In the "Solution Explorer".
  • Expand the Controller folder.
  • Select the "HomeController".

    Controller

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using HyperlinkWebGridAPI.Models;  
  7. namespace HyperlinkWebGridAPI.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.              EmployeeDetail obj = new EmployeeDetail();  
  14.              List<Employee> empdtl = new List<Employee>();  
  15.              empdtl.Add(new Employee { Id = 1, Emp_Name = "Name 1", Contact_No = 2345, Emp_Address = "Address 1" });  
  16.              empdtl.Add(new Employee { Id = 2, Emp_Name = "Name 1", Contact_No = 567, Emp_Address = "Address 1" });  
  17.              empdtl.Add(new Employee {Id = 3, Emp_Name = "Name 1", Contact_No = 4567, Emp_Address = "Address 1" });  
  18.              empdtl.Add(new Employee { Id = 4, Emp_Name = "Name 1", Contact_No = 345, Emp_Address = "Address 1" });  
  19.              empdtl.Add(new Employee { Id = 5, Emp_Name = "Name 1", Contact_No = 890, Emp_Address = "Address 1" });  
  20.              obj.UserCollection = empdtl;  
  21.              return View(obj);  
  22.         }  
  23.     }  
  24. }   

Step 4

Now write some HTML code in the "index.cshtml" file. This file exists:

  • In the "Solution Explorer".

  • Expand "Views" folder.

  • Select "Home" -> "index.cshtml".

Add the following code:

  1. @model HyperlinkWebGridAPI.Models.EmployeeDetail  
  2. @{  
  3.     ViewBag.Title = "create hyper ling in webgrid";  
  4. }  
  5. <style type="text/css">  
  6. table {  
  7.        font-family: verdana,arial,sans-serif;  
  8.        font-size:11px;  
  9.        color:#b6ff00;  
  10.        border-width: 1px;  
  11.        border-color: #666666;  
  12.        border-collapse: collapse;  
  13. }  
  14. table th {  
  15.        border-width: 1px;  
  16.        padding: 8px;  
  17.        border-style: solid;  
  18.        border-color: #666666;  
  19.        background-color: #dedede;  
  20. }  
  21. table td {  
  22.        border-width: 1px;  
  23.        padding: 8px;  
  24.        border-style: solid;  
  25.        border-color: #0026ff;  
  26.        background-color: #ffffff;  
  27. }  
  28. </style>  
  29. @using (Html.BeginForm("Index""Home"))  
  30. {  
  31.     var grid = new WebGrid(Model.UserCollection, columnNames: new[] { "Emp_Name""Contact_No" });  
  32.     @grid.GetHtml(columns: grid.Columns(  
  33.     grid.Column("Emp_Name", format: @<text>@Html.ActionLink((string)item.Emp_Name,"ActionName""Controllername"new { id = item.id }, null)</text>),  
  34.                     grid.Column("Contact_No"),  
  35.                     grid.Column("Emp_Address")  
  36.                     ))  
  37. } 

Step 5

Execute the application, the output will display like this:

Output