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>


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 .

Previous Post Next Post