ActionLink HTML Helper in ASP.NET MVC

ActionLink HTML Helper in ASP.NET MVC to Generate Hyperlinks

In this article, I am going to discuss how to generate Hyperlinks in ASP.NET MVC Application using the ActionLink HTML Helper. Please read our previous article before proceeding to this article as we are going to work with the same example. In our previous article, we discussed how to use Entity Framework Database First Approach in ASP.NET MVC Application to interact with the SQL Server Database. In general, we used hyperlinks for navigation between the pages of a website.

ActionLink HTML Helper:

Let us understand the need and use of ActionLink HTML Helper with an example. We want to display all the employees in a bulleted list as shown in the below image. Please have a look at the employee’s name, here we rendered the employee name as hyperlinks.

ActionLink HTML Helper in ASP.NET MVC Application

When we click on the above name hyperlink, then we need to redirect to the employee details page where we will display the full details of the employee as shown in the below image.

Generating Hyperlinks in ASP.NET MVC using ActionLink HTML Helper

Again, when we click on the “Back to List” button, it will be redirected to the employee list page.

Let’s see how to achieve this.

Please modify the Employee controller as shown below. Here we add the Details action method to Employee Controller. Now we have two action methods i.e. Index and Details 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);
        }
    }
}
Modifying the Index View:

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 displays 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>

As you can see in the above code, we set the @model to IEnumerable<CRUD_OperationsInMVC.Models.Employee> and we are generating the hyperlinks using Html.ActionLink HTML helper.

The Details action method takes a parameter as EmployeeId and then gets the employee details based on the Employee ID. Once it gets the employee details then it passes that employee object to the view and then the view displays the employee details.

Adding Details view:

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

@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 the ActionLink HTML Helper in ASP.NET MVC application. In our upcoming articles, we will discuss the HTML Helpers in detail with some real-time examples.

In the next article, I am going to discuss how to work with multiple database tables in ASP.NET MVC application with an example. Here, In this article, I try to explain how to generate hyperlinks using ActionLink HTML Helper in ASP.NET MVC application with a simple example. I hope this article will help you with your needs. 

Leave a Reply

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