Create Hyperlink or Actionlink (Html.ActionLink) from Controller in Asp.Net MVC 4 Example

  Total Views : 3662
  Comments : 0
 
  Keywords : Create hyperlinks in asp.net mvc with example, Use actionlink (html.actionlink) from controller in asp.net mvc, Generate actionlink or hyperlink from controller in asp.net mvc with example

Here we will learn how to create a hyperlink in asp.net mvc or create actionlink using controller in asp.net mvc with example and how to use hyperlinks to call controller methods in asp.net mvc.

 

Generally asp.net mvc provide Html helper class (@Html.ActionLink) to generate hyperlinks or actionlinks. We will see how to create hyperlinks or actionlins in asp.net mvc with simple example. Now create new asp.net mvc web application for that follow below steps 

 

Open visual studio studio à Go to File à Select New à Select Project. Once we select project new dailog will pop up in that select asp.net 4 web applicaiton and give name for your application and click ok it will create new application.

Adding Controller in MVC Application

Here we are not creating any new application instead we are using previous applicaiton ur routing in asp.net mvc. Now let’s start with adding Controller and View. For adding controller right click on Controllers folder à inside that select Add à then select Controller. Now new pop up will open in that give controller name as "MainController" and select template as "Emply MVC Controller" like as shown below 

 

Creating new controller in hyperlinks example in asp.net mvc

 

Here is the project view after adding MainController (Note: we created this controller in previous project that's why it's having other controller also)

 

after adding controller asp.net mvc hyperlinks project structure

 

Now open MainController it will contain code like as shown below 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial8.Controllers

{

public class MainController : Controller

{

//

// GET: /Main/

publicActionResult Index()

{

return View();

}

}

}

In this Controller we will add extra Action Methods to show it in demo

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial8.Controllers

{

public class MainController : Controller

{

//

// GET: /Main/

[HttpGet]

public ActionResult Index()

{

return View();

}

 

[HttpGet]

public ActionResult Home()

{

return View();

}

 

[HttpGet]

public ActionResult About()

{

return View();

}

 

[HttpGet]

public ActionResult Contactus()

{

return View();

}

}

}

Now let’s add View to this Controller.

Adding View to Controller in Asp.Net MVC

For Adding View just right click inside Index ActionResult Method and Select "Add View" to create the view template for our Index form. Here in below snapshot we selected View engine as Razor and we are not going to create a strongly type view that why we didn't check Create option strongly type view finally click on Add button. 

 

add view to controller in asp.net mvc application

 

Here is Project view after adding all View related to Action Method in MainController.

 

After adding view in asp.net mvc application structure

 

Now on Index view let’s add Hyperlink. To add Hyperlink we need to begin with @html helper with following Action Link then we need to provide linkText to display and ActionName. Following is the snapshot while creating Action link.

 

creating html.actionlink in asp.net mvc application

Following example show how to create Hyperlink with Text - About page  and Action Name - About.

 

@Html.ActionLink("About page","About")

Here is code snippet of Index.cshtml

 

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<h2>Generate HyperLinks</h2>

<table cellspacing="20px">

<tr>

<td>@Html.ActionLink("Mainpage", "Index")</td>

</tr>

<tr>

<td>@Html.ActionLink("Home page", "Home")</td>

</tr>

<tr>

<td>@Html.ActionLink("Contactus page", "Contactus")</td>

</tr>

<tr>

<td>@Html.ActionLink("About page", "About")</td>

</tr>

</table>

Now run application to see output that would be like as shown below 

 

output of html or actionlinks in asp.net mvc application

 

If you check view source of Index Page following is the way how hyperlinks are generated

 

source view of hyperlinks in asp.net mvc application

Finally we finished generating hyperlinks or actionlink using controller in asp.net mvc with example.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User