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.
  
  
  
  
• From the "MVC4 Project" window 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.
  
  
  
  
• Click on the "Add" button.

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HyperlinkWebGridAPI.Models
{
    public class EmployeeDetail
    {
        public List<Employee> UserCollection { get; set; }
    }
    public class Employee
    {
        public int Id { get; set; }
        public string Emp_Name { get; set; }
        public int Contact_No { get; set; }
        public string Emp_Address { get; set; }
    }
}

Step 3

Now select the "HomeController".

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

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HyperlinkWebGridAPI.Models;
namespace HyperlinkWebGridAPI.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
             EmployeeDetail obj = new EmployeeDetail();
             List<Employee> empdtl = new List<Employee>();
             empdtl.Add(new Employee { Id = 1, Emp_Name = "Name 1", Contact_No = 2345, Emp_Address = "Address 1" });
             empdtl.Add(new Employee { Id = 2, Emp_Name = "Name 1", Contact_No = 567, Emp_Address = "Address 1" });
             empdtl.Add(new Employee {Id = 3, Emp_Name = "Name 1", Contact_No = 4567, Emp_Address = "Address 1" });
             empdtl.Add(new Employee { Id = 4, Emp_Name = "Name 1", Contact_No = 345, Emp_Address = "Address 1" });
             empdtl.Add(new Employee { Id = 5, Emp_Name = "Name 1", Contact_No = 890, Emp_Address = "Address 1" });
             obj.UserCollection = empdtl;
             return View(obj);
        }
    }
}

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:

@model HyperlinkWebGridAPI.Models.EmployeeDetail
@{
    ViewBag.Title = "create hyper ling in webgrid";
}
<style type="text/css">
table {
       font-family: verdana,arial,sans-serif;
       font-size:11px;
       color:#b6ff00;
       border-width: 1px;
       border-color: #666666;
       border-collapse: collapse;
}
table th {
       border-width: 1px;
       padding: 8px;
       border-style: solid;
       border-color: #666666;
       background-color: #dedede;
}
table td {
       border-width: 1px;
       padding: 8px;
       border-style: solid;
       border-color: #0026ff;
       background-color: #ffffff;
}
</style>
@using (Html.BeginForm("Index", "Home"))
{
    var grid = new WebGrid(Model.UserCollection, columnNames: new[] { "Emp_Name", "Contact_No" });
    @grid.GetHtml(columns: grid.Columns(
    grid.Column("Emp_Name", format: @<text>@Html.ActionLink((string)item.Emp_Name,"ActionName", "Controllername", new { id = item.id }, null)</text>),
                    grid.Column("Contact_No"),
                    grid.Column("Emp_Address")
                    ))
}

Step 5

Execute the application, the output will display like this: