Generating Hyperlinks in MVC

Generating hyperlinks using ActionLink HTML Helper in MVC

In this article, we will discuss how to generate hyperlinks using the ActionLink HTML Helper in MVC for navigation between MVC pages. 

What is Html Helper?

Why we use Html Helper?

Different types of HTML Helper?

We will discuss all these concepts in our upcoming article in details.

We are going to work with the same example that we start in our last article. So please read Entity Framework in ASP.NET MVC article before proceeding to this article.

We want to display all the employees in a bulleted list as shown in the below image. Notice that all the employee names are rendered as hyperlinks.

 ActionLink HTML Helper in MVC

When the hyperlink is clicked by the user, then the user will be redirected to employee details page displaying the full details of the employee as shown in the below image.

 ActionLink HTML Helper in MVC  
Again, when the user Click on the Back to List button, it will be redirected to the employee Index page.

This is our requirement. Let’s see how to achieve this.

Let’s add Details action method to Employee Controller. Now we have two action methods in Employee Controller as shown below

namespace CRUD_OperationsInMVC.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            EmployeeDBContext dbContext = new EmployeeDBContext();
            List<Employee> empList = dbContext.Employees.ToList();
            return View(empList);
        }
        public ActionResult Details(int id)
        {
            EmployeeDBContext dbContext = new EmployeeDBContext();
            Employee employee = dbContext.Employees.Single(x => x.EmployeeId == id);
            return View(employee);
        }
    }
}

In our example, the Index action method retrieves the list of employees which is then passed to the Index view for rendering.

So, let’s change the Index view as shown below which display the employee list as Hyperlinks using ActionLink HTML Helper method.

@model IEnumerable<CRUD_OperationsInMVC.Models.Employee>
@using CRUD_OperationsInMVC.Models;
<div style="font-family:Arial">
    @{
        ViewBag.Title = "Employee List";
    }
    <h2>Employee List</h2>
    <ul>
        @foreach (Employee employee in @Model)
        {
            <li>@Html.ActionLink(employee.Name, "Details", new { id = employee.EmployeeId })</li>
        }
    </ul>
</div>
Points to Remember:

1. @model is set to IEnumerable<CRUD_OperationsInMVC.Models.Employee>

2. We are using Html.ActionLink HTML helper to generate links

Details action method takes a parameter as EmployeeId and then get the employee details based on the Employee ID and then pass that employee object to the view and then the view display the employee details.

Let’s Add Details View and copy and paste the following codes.

@model CRUD_OperationsInMVC.Models.Employee

<div>
    <h4>Employee Details</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Gender)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Gender)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.City)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.City)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Salary)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Salary)
        </dd>
    </dl>
</div>
<p>
    @Html.ActionLink("Back to List", "Index")
</p>

That’s it. We are done with our implementation. So now it’s the time to run the application and see everything is working as expected.

In this article, we just see how to use ActionLink HTML Helper in MVC application. Later articles, we will discuss HTML Helpers in details with some real time example.

In the next article, I will discuss how to work with multiple database tables in ASP.NET MVC application.

SUMMARY

In this article, I try to explain how to use ActionLink HTML Helper in MVC application with a simple example. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *