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:

Step 2

Create a Model Class.

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 { get; set; }
  10. }
  11. public class Employee
  12. {
  13. public int Id { get; set; }
  14. public string Emp_Name { get; set; }
  15. public int Contact_No { get; set; }
  16. public string Emp_Address { get; set; }
  17. }
  18. }

Step 3

Now select the "HomeController".

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:

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