Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

Asp.Net MVC

Learn step by step



Layout and Section in Razor

Let you are creating an ASP.NET web application and you want to keep a regular look and notice across all the pages within your web application. then you have 2 choices:

  • The first one is to design the header, main body and footer sections on each page. In this point of view , you require to write more code on each page so ASP.NET 2.0 introduced "Master Pages" that assist allow this when using .aspx based pages or templates.
  • The second option.Razor also maintain this idea with a characteristics called "layouts" that permit you to define a regular site template, and then inherit its inspect and realize across all the views/pages on your web application.

Create an MVC Application

We will make an MVC application using Visual Studio 2012 ultimate . So below is the step-by-step process how to create a MVC application.

Step 1:"File" -> "New" -> "Project".

Step 2: Select"ASP.NET MVC 4 Web Application" from the list, then make the application name "TutOnMvcApplication" and assign the path in the location input where you want to make the application.

Step 3: Now Select the Project Template "Empty" and select "Razor" as the view engine from the dropdown list.

Create Layout for Application

A layout is used to supply a regular look and notice of all pages of a web application so we make a layout for the web application. Let's see the procedure below step-by-step:

Step 1: Make a "Content" folder in the root directory of the web application.

Step 2: Make a Style Sheet "Style.css" under the content folder. That CSS file keeps all CSS classes compulsory for a regular web application page design.

Step 3: Make a "Shared" folder under the "View" folder.

Step 4: Make a "_Layout.cshtml" file under the "Shared" folder. The file "_Layout.cshtml" belong the layout of every page in the application.In Solution Explorer on Shared folder Right-click on that , then go to "Add" item and click on "View".


Figure Create a layout for application

Now the View has been generated. Write the following code in the "_Layout.cshtml" file.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - TutOnMVC</title>
<link href="~/favicon.ico"
rel="shortcut icon" type="image/tuton-icon" />
<link rel="stylesheet"
href="@Url.Content("~/Content/Style.css")" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("TutOnMVC",
"Index", "Home")
</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home",
"Index", "Home")</li>
<li>@Html.ActionLink("About",
"About", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year TutOnMVC</p>
</div>
</div>
</footer>
</body>
</html>

In this layout, we are using an HTML helper method and some other system defined methods so let's see these methods one by one.

  • Url.Content():Url.Content(): Content() method is a method of UrlHelper class. It change a virtual (relative) path to an application complete path. It has one variable of string type that is a relative path of the content. It render an application's complete path. If the identify content path (parameter of the method) does not start with the tilde (~) character, then this method render contentPath unaffected. Url.Content() make sure that all links work no matter if the site is in a virtual directory or in the web site root.
  • Html.ActionLink(): Html.ActionLink(): The simplest way to render an HTML link in is to use the HTML.ActionLink() helper. MVC, the Html.ActionLink() do not link to a view. It makes a link to a controller action. ActionLink() is an addition method of the HtmlHelper class. It render an anchor element (an element) that keep the virtual path of the particular action. When you use an ActionLink() method, then you required to pass three string variable. The variable are linkText (the inner text of the anchor element), actionName (the name of the action) and controllerName (the name of the controller).
  • RenderSection(): RenderSection() is a function of the WebPageBase class.The first variable to the "RenderSection()" helper method particular the name of the section we want to render at that position in the layout template. The second variable is optional, and permit us to define whether the section we are rendering is need or not. If a section is "required", then Razor will deliver an error at runtime if that section is not implemented within a view template that is based on the layout file (that can make it easier to track down content errors). It render the HTML content.
  • RenderBody(): In layout pages, renders the part of a content page that is not within a named section. It render the HTML content. RenderBody is needed, since it's what renders each view.

The _ViewStart File

The "_ViewStart" file in the Views folder keep the following content:


@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

Create Controller in MVC Application

We require to make a controller that keep an action method to render the view on the user interface. We will make a TutOnController controller with two action methods, one is Index and second one is About. Both action methods execute when the request type is GET and renders a view on the browser. So use the following Steps:

Step 1: In Solution right-click on the Controllers folder then go to "Add" and click on "Controller".

Step 2: Give the name TutOnController for the Controller name input and Choose "Empty MVC controller" from the Template dropdown list and click on "Add".

Now you required to write the following code in the "TutOnController.cs" file:


using System.Web.Mvc;
namespace LayoutMvcApplication.Controllers
{
public class TutOnController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult Index()
{
return View();
}
}
}

Create View in MVC Application

We require to make two views (Index and About) that inherit the "_Layout" view via the "_ViewStart" view so you require to use the following steps.

Step 1: Right-click on the Index() action method under the "TutOnController.cs" file, then click on "Add View".

Step 2: Left Add New screen unchanged and click on "Add".

Now you should write the following code in index view:


@{
ViewBag.Title = "Index";
}

@section featured
{
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
</hgroup>
<p>
HI,TutOn - Online Redefining Education.It is featured section.
How are you....
</p>
</div>
</section>
}
<p> This is body of Index view that renders in BodyRender.</p>

We can follow the same steps for the About view and make it.


Figure Implement layout on view



Related Videos