How to create MVC outbound URL’s (MVC Tutorial number 9)?

Introduction

This is the 9th MVC (Model view controller) tutorial and in this article we will try to create outbound navigation links using MVC framework. In case you are completely new to MVC (Model view controller), do have a look at the previous articles and videos given in the table below for quick start.

My half life has been spent on writing interview questions for Microsoft technology and I hope I keep writing them. You can see my video tutorial for the same by clicking on .NET,ASP.NET,C#,MVC Interview questions and answers

When we talk about web applications end users would like to navigate from one page to other page. So as a simple developer your first thought would be to just give page names as shown in the below figure.

So for example if you want to go and browse from home.aspx to about.aspx give the anchor hyper link page name and things should be fine.

By doing that you are violating MVC principles. MVC principle says that hit should first come to the controller but by specifying <a href=”Home.aspx”> the first hit comes to the view. This bypasses your controller logic completely and your MVC architecture falls flat.
 

Ideally the actions should direct which page should be invoked. So the hyperlink should have actions in the anchor tags and not the page names i.e. direct view name.

Step 1:- Create views

Lets create three views as shown in the below figure “Home”,”About” and “Product”.

Let’s create a simple navigation between these 3 pages as shown below. From the home view we would like to navigate to about and product view. From about and product view we would like to navigate back to the home view.

Step 2 :- Create controller for the views

Next step is to define controller actions which will invoke these views. In the below code snippet we have defined 3 actions “GotoHome” (this invokes home view), “Aboutus” ( this invokes the about view) and “SeeProduct” ( this invokes product view).

public class SiteController : Controller
{
//
// GET: /Site/

public ActionResult GotoHome()
{
return View("Home");
}

public ActionResult AboutUs()
{
return View("About");
}

public ActionResult SeeProduct()
{
return View("Product");
}
}

Step 3:- Provide actions in the link

To invoke the actions rather than the views we need to specify the actions in the anchor tag as shown in the below code snippet.
This is products

<a href="GotoHome">Go Home</a><br />
<a href="Aboutus">About us</a><br />

If you want to create the anchor links using the HTML helper classes you can use the action link function as shown in the below code snippet.

<%= Html.ActionLink("Home","Gotohome") %>

The above code was for the products page , you can do the same type of navigations for the about us and the home page.

This is About us
<a href="GotoHome">Go Home</a><br />
<a href="SeeProduct">See Product</a><br />

This is home page
<br />
<a href="SeeProduct">See Product</a><br />
<a href="Aboutus">About us</a><br />

</div>

Step 4:- Enjoy your navigation

Once you have specified the actions inside the link you navigate between home, about and products page.

While navigating you can see how the URL’s are pointing to the actions rather than absolute page names like home.aspx , aboutus.aspx etc which violates the complete MVC principle.