Create Five Page Web Application Using ASP.NET MVC:-
1) Create Empty Project
2) Create Controller on right-click on the Controllers folder and define five HttpGet Method
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult Aboutus()
{
return View();
}
public ActionResult Services()
{
return View();
}
public ActionResult Gallery()
{
return View();
}
public ActionResult Contactus()
{
return View();
}
}
Step3rd:- Create a Master Page or Layout page under the views folder, create another subfolder and create a layout page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Step6:-
Create Content or Child page on right-click on controller HttpGet method and select layout or master page.
Step7:- Create Menu using Hyperlink under Layout page or Master page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/assets/css/Style.css" rel="stylesheet" />
</head>
<body>
<header>
<nav> <a href="/Home/Index">Home</a><a href="/Home/Aboutus">About Us</a><a href="/Home/Services">Service</a><a href="/Home/Gallery">Gallery</a><a href="/Home/Contactus">Contact us</a> </nav>
</header>
<section>
<div>
@RenderBody()
</div>
</section>
<footer>
</footer>
</body>
</html>
1) Create Empty Project
2) Create Controller on right-click on the Controllers folder and define five HttpGet Method
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult Aboutus()
{
return View();
}
public ActionResult Services()
{
return View();
}
public ActionResult Gallery()
{
return View();
}
public ActionResult Contactus()
{
return View();
}
}
Step3rd:- Create a Master Page or Layout page under the views folder, create another subfolder and create a layout page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Step4th:- Design Layout of Layout page |Master page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<header>
</header>
<section>
<div>
@RenderBody()
</div>
</section>
<footer>
</footer>
</body>
</html>
Step5th:- Create CSS file to provide width and height of different section
body {
}
header {
background-color:orange;
height:100px;
}
section {
height:500px;
background-color:black;
color:white;
}
footer
{
background-color:orange;
height:50px;
}
Step6:-
Create Content or Child page on right-click on controller HttpGet method and select layout or master page.
Step7:- Create Menu using Hyperlink under Layout page or Master page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="~/assets/css/Style.css" rel="stylesheet" />
</head>
<body>
<header>
<nav> <a href="/Home/Index">Home</a><a href="/Home/Aboutus">About Us</a><a href="/Home/Services">Service</a><a href="/Home/Gallery">Gallery</a><a href="/Home/Contactus">Contact us</a> </nav>
</header>
<section>
<div>
@RenderBody()
</div>
</section>
<footer>
</footer>
</body>
</html>
Post a Comment
If you have any doubt in programming or join online classes then you can contact us by comment .