Introduction
This article is the continuation of Part 1, Part 2 and Part 3.
In the first article, we focused on understanding requirements and breaking them into objects, then finding out the relationships among them, and finally, designing and implementing the database. And (good news!) our first article won the best article of the Nov 2014 award.
In the second article, we saw how to create a solution, add multiple projects to it, and add desired references to their respective projects. So, finally we are done with our Business Object Layer.
In the third article, we saw how to implement our UI (User Interface). In this article, let us try to understand and implement master layout and bootstrap.
3: Implementing All the Layers (Master layout and Bootstrap)
Our next work item or task is adding bootstrap feature.
Let us observe an option whenever I was trying to add View, i.e., It was asking to use a layout.
It means that it was creating a separate layout for each area.
Layout (in MVC) is nothing but a type of MasterPage (in ASPX webforms). It is creating separate Master Pages for each Area and I don’t want to have separate layout for each area. I want to have a common layout for all the Areas. Let us observe that first.
If you look into Shared folder -> layout as shown:
This is the layout you have in Areas -> Admin -> Views -> Shared -> _layout.cshtml.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null,
new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
It is set in ViewStart for each area.
In the same sense, in Common, if you observe, you’ll have the same exact layout and it is setting it in ViewStart.
In the same way, if you look into Security, you’ll have the same layout and setting it in ViewStart.
Also the same in User:
Now I want to push layout to the Common view folder that I have outside the Area:
Add a new folder in Views and name it "Shared".
I’ll drag one of the layouts and place it in Shared.
In ViewStart, I’ll just remove the "/Areas/User" i.e., it is going to use the share layout of your common Views folder.
Same way do for all the Areas (Admin, Common, and Security). So each view is now pointing to this layout MasterPage.
I can name my Application Name as "LinkHub".
@Html.ActionLink("LinkHub", "Index", "Home",
new { Area = "Common" }, new { @class = "navbar-brand" })
Whenever I click LinkHub, it should take me to Index Home as mentioned in the above statement.
So I need to pass one more parameter for Area. Whenever I click on LinkHub, it will take me to Common Area and Home Controller and Action Index. Save all and execute and Browse for URL /Common/Home. If I click on LinkHub, it will be redirecting to the same page.
As we know, the default controller is Home. Now, how do we set the default Area? I want the default to redirect me to controller Home of Common Area.
It is very simple to do that. I need to edit the route table and change the default Area.
Look for the area and change it to Common.
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {controller = "Home", action = "Index", id = UrlParameter.Optional }
);
(RouteTable.Routes[routes.Count - 1] as Route).DataTokens["area"] = "Common";
}
}
Save and Execute. By default, it should redirect to Common -> Home Controller.
This is how you can set your default Area. Now let’s switch to layout. I want links to all the controller indexes or all the links. Notice that you have a div tag with unordered list and in this I’m adding list items.
For example, Home, which is pointing to the Controller Home of Area Common.
I’m adding all the links:
Now, let me execute this. And I get my application name Home, Category, ListCategory.
Submit URL: We created this form in our earlier article.
I’ve linked all the pages, but how about UI? It’s not looking good. Here comes the power of your Bootstrap. I need to just right click on the LinkHubUI project in solution and say Manage NuGet Packages.
We need to look online so it requires an internet connection search for bootstrap. Then I’ll select Bootstrap for MVC 5.1 and Install. It will install Bootstrap. Read and accept the agreement and say close.
Now if you execute, you should see the magic. It should turn into a beautiful UI.
For Submit URL, you should see an awesome form with good dropdown.
Now, I’m going to show you one more power of Bootstrap -- it is responsive. For any kind of screen resolution, it is going to work or for any screen size. If I’m trying to access my page on my mobile, try checking adjusting the browser window size and see that it will adjust all the link items automatically.
Finally, it has turned into a beautiful Menu.
This is a responsive design that I get with the help of Bootstrap. That’s it for this article.
Thanks for reading.
