Loading

ASP.NET MVC

How to ActionLink HTML Helper in ASP.NET MVC?. The Complete ASP.NET MVC Developer Course 2022 [Videos].

In this Video, I am going to discuss how to generate Hyperlinks in ASP.NET MVC applications using the ActionLink HTML Helper. Please watch our previous Video before proceeding to this Video as we are going to work with the same example. In our previous Video, 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. In a later Video, we will discuss HTML Helpers in ASP.NET MVC in detail. Here, we will just see how to create hyperlinks using ActionLink HTML Helper.

ActionLink HTML Helper in ASP.NET MVC:

Let us understand the need and use of ActionLink HTML Helper in ASP.NET MVC Application 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 employees name, here we rendering 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.

ActionLink HTML Helper in ASP.NET MVC

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

Lets 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.FirstOrDefault(x => x.EmployeeId == id);
return View(employee);
}
}
}
ActionLink HTML Help Method:

There are many overloaded versions available for the ActionLink HTML Helper method. But we are going to use the following overloaded version which takes link text, action method name, and route values as parameters. The first parameter specifies that it is an extension method and we can access this using the HtmlHelper object.

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues);

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, lets change the Index view as shown below which displays the employee names as Hyperlinks using the 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 method. This method takes three parameters, the first parameter is the link text that will be rendered in the browser, the second parameter is the action method name and the third parameter is the route values that will be passed to the Details action method.

Adding Details view:

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. Lets Add Details View and then copy and paste the following codes into 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>

Thats it. We are done with our implementation. So now its time to run the application and see everything is working as expected. In this Video, we just see how to use the ActionLink HTML Helper in the ASP.NET MVC application. In our upcoming Videos, 

See All

Comments (277 Comments)

Submit Your Comment

See All Posts

Related Posts

ASP.NET MVC / Youtube

What is MVC?

MVC is an architectural software design pattern that is used for developing interactive applications where their user interaction is involved and based on the user interaction some event handling has occurred. It is not only used for web-based applications but it can also be used for Desktop or mobile-based applications where there are user interactions involved.
28-jan-2022 /28 /277

ASP.NET MVC / Youtube

How to Creat First ASP.NET MVC Application using Visual Studio?

In this article, I am going to discuss how to create the first ASP.NET MVC Application step by step from scratch using Visual Studio 2015. You can use any version as per your choice but the step will remain the same. Please read our previous article before proceeding to this article where we gave a brief introduction to ASP.NET MVC Framework.
28-jan-2022 /28 /277

ASP.NET MVC / Youtube

What is ASP.NET MVC File and Folder Structure?

In this article, I am going to discuss the auto-generated ASP.NET MVC File and File Structure when we create a new ASP.NET MVC application. Please read our previous article before proceeding to this article where we discussed how to create ASP.NET MVC 5 application step by step from scratch.
28-jan-2022 /28 /277