ViewComponent in ASP.NET Core Razor Pages

This project will demonstrate how to use ViewComponent in ASP.NET Core Razor Pages

  • LearnASPNETCoreRazorPagesWithRealApps
    • Pages
      • Components
        • Category
          • Index.cshtml
        • Vendor
          • Index.cshtml
      • Shared
        • _Layout.cshtml
      • Index.cshtml
      • Index.cshtml.cs
      • AboutUs.cshtml
      • AboutUs.cshtml.cs
      • News.cshtml
      • News.cshtml.cs
    • ViewComponents
      • CategoryViewComponent.cs
      • VendorViewComponent.cs
    • _ViewImports.cshtml
    • Startup.cs
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace LearnASPNETCoreRazorPagesWithRealApps.ViewComponents
{
    [ViewComponent(Name = "Category")]
    public class CategoryViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<string> categories = new List<string>() {
                "category 1", "category 2", "category 3", "category 4", "category 5"
            };
            return View("Category", categories);
        }
    }
}
<h3>Categories List</h3>
<ol>
    @foreach (var category in Model)
    {
        <li>@category</li>
    }
</ol>
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace LearnASPNETCoreRazorPagesWithRealApps.ViewComponents
{
    [ViewComponent(Name = "Vendor")]
    public class VendorViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<string> vendors = new List<string>() {
                "Vendor 1", "Vendor 2", "Vendor 3", "Vendor 4", "Vendor 5"
            };
            return View("Vendor", vendors);
        }
    }
}
<h3>Vendors List</h3>
<ol>
    @foreach (var vendor in Model)
    {
        <li>@vendor</li>
    }
</ol>
<!DOCTYPE html>

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

    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <td colspan="2">
                <a asp-page="index">Home</a> |
                <a asp-page="aboutus">About Us</a> |
                <a asp-page="news">News</a>
            </td>
        </tr>
        <tr>
            <td valign="top">
                @await Component.InvokeAsync("Category")

                @await Component.InvokeAsync("Vendor")
            </td>
            <td valign="top">
                @RenderBody()
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Copyright PMK Lab
            </td>
        </tr>
    </table>

</body>
</html>
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}
@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Home</h1>
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class AboutUsModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}
@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.AboutUsModel
@{
    ViewData["Title"] = "About Us";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>About Us</h1>
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class NewsModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}
@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.NewsModel
@{
    ViewData["Title"] = "News";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>News</h1>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace LearnASPNETCoreRazorPagesWithRealApps
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();

            app.UseMvc();
        }
    }
}

Screenshots