In this article I explain how to use layouts in ASP.Net MVC3 using Razor view, for this use the following steps.
Step 1 : First open Visual Studio and then select File->New->Project.
Step 2 : A window is appear from this Select ASP.NET MVC 3 Web application inside the Web template, give the name of the project that you want to give and then click on ok button.
Step 3 : In the new window select Empty and view as a Razor view and click ok.
![razor1.jpg]()
Step 4 : Now add a controller by right-clicking on the controller in the Solution Explorer.
![razor2.jpg]()
Step 5 : Give the name of the controller and click ok.
![razor3.jpg]()
Step 6 : The controller contains the code:
namespace MvcApplication9.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Step 7 : Click on _Layouts.cshtml:
![razor4.jpg]()
In this write the code as:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>
Welcome to the DOT NET world</h1>
<div class="topLink">
<div class="autoCenter">
<ul class="link">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Technologies</a></li>
<li><a href="#">Article </a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Interview questions</a></li>
</ul>
</div>
</div>
</div>
<div id="sidebar">
<p>
Must Read</p>
<ul>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">Window Phone</a></li></ul>
</div>
<div id="content">
@RenderBody()
</div>
<div id="footer">
<div class="autoCenter">
<ul class="link">
<li class="first"><a href="#">Contact Us</a></li>
<li><a href="#">Privacy & Policy</a></li>
<li><a href="#">Conditions </a></li>
</ul>
</div>
</div>
</body>
</html>
Step 8 : Now add some style in Content/site.css as:
#header
{
background-color:Blue;
color:White;
padding:1px;
}
#content
{
float:left;
margin:10px;
}
#sidebar
{
float:right;
margin:10px;
padding:10px;
border:dotted 5px red;
width:180px;
}
#footer
{
text-align:center;
clear:both;
}
.topLink
{
width: 100%;
overflow: hidden;
background: #db4c2c;
border-bottom: 1px solid #d3330f;
}
.autoCenter
{
width: 1024px;
margin: 0px auto;
overflow: hidden;
}
ul.link
{
list-style: none;
margin: 0px;
padding: 0px;
}
Step 9 : Now add a view by right-clicking on the action method and write the code in it as:
@{
ViewBag.Title = "Index";
}
<h2>Latest Topic</h2>
<p>Working with ASP.NET</p>
<p>Working with CSS and JavaScript</p>
<p>jQuery</p>
Step 10 : Run the application by pressing F5. The output is shown as:
![razor5.jpg]()
Summary : In this article I explained how to use layouts in MVC3 Razor view.