Render Action in Layout Page with ASP.NET MVC

Home » .NET » ASP.NET MVC » Render Action in Layout Page with ASP.NET MVC
26 Apr, 2018 Categories: ASP.NET MVC


Create ASP.NET MVC Project

On the Visual Studio, create new ASP.NET MVC Web Application project

Select Empty Template and Core Reference is MVC




Create Layout Page

In Views folder, create new folder named Shared. In this folder, create MVC 5 Layout Page (Razor) named _MyLayoutPage.cshtml as below:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>

    <table border="1" cellpadding="2" cellspacing="2" width="500">
        <tr>
            <td colspan="2">
                <a href="@Url.Action("Index", "Home")">Home</a> |
                <a href="@Url.Action("Index", "AboutUs")">About Us</a> |
                <a href="@Url.Action("Index", "News")">News</a>
            </td>
        </tr>
        <tr>
            <td valign="top">
                <h3>Categories</h3>
                @{ Html.RenderAction("Index", "MyLayoutPage"); }
            </td>
            <td valign="top">
                @RenderBody()
            </td>
        </tr>
        <tr>
            <td colspan="2">Copyright 2018</td>
        </tr>
    </table>

</body>
</html>

Create Controller

In Controllers folder, create new controllers as below:

MyLayoutPageController Controller

Create new controller named MyLayoutPageController.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class MyLayoutPageController : Controller
    {
        public ActionResult Index()
        {
            List<string> categories = new List<string>() {
                "Category 1", "Category 2", "Category 3", "Category 4"
            };
            ViewBag.categories = categories;
            return View();
        }
    }
}

Home Controller

Create new controller named HomeController.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

AboutUs Controller

Create new controller named AboutUsController.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class AboutUsController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

    }
}




News Controller

Create new controller named NewsController.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class NewsController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

    }
}

Create View

In Views folder, create new razor views as below:

MyLayoutPage Views

In Views/MyLayoutPage folder, create new razor view named Index.cshtml as below:

<ul>
    @foreach (var category in ViewBag.categories)
    {
        <li>@category</li>
    }
</ul>

Home Views

In Views/Home folder, create new razor view named Index.cshtml as below:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";
}

<h2>Home Page</h2>

AboutUs Views

In Views/AboutUs folder, create new razor view named Index.cshtml as below:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";
}

<h2 class="format">About Us Page</h2>

News Views

In Views/News folder, create new razor view named Index.cshtml as below:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MyLayoutPage.cshtml";
}

<h2>News Page</h2>

Structure of ASP.NET MVC Project

Run Application

Access Index action in Home controller with following url: http://localhost:49328/Home/Index

Output

Access Index action in AboutUs controller with following url: http://localhost:49328/AboutUs/Index

Output

Access Index action in News controller with following url: http://localhost:49328/News/Index

Output

References

I recommend you refer to the books below to learn more about the knowledge in this article:


Tags

Related Posts

Top