.Net Core Create New Page

If you are new for .Net Core template, here you start with creating new page.

Basic Steps to create new page with Frest admin template for AspnetCoreStarter or AspnetCoreFull :
  1. Create New Model with .cshtml.cs extension under the Pages/Test/ directory.

    Let's create a blank Model for an example with filename TestPage.cshtml.cs and placing the below code in that file.

  2. using System;
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    namespace AspnetCoreStarter.Pages
      public class TestPageModel : PageModel
        public void OnGet() { }
  3. Create New Page with .cshtml extension at same directory of .cshtml.cs file.

    Let's create a TestPage for an example with filename TestPage.cshtml and placing the below code in that file.

  4. @page
    @model AspnetCoreStarter.Pages.TestPageModel
      ViewData["Title"] = "TestPage - My Application";
    <!-- ************** Content ************** -->
    <h4 class="py-3 mb-4">Test Page</h4>
  5. Add page link to vertical & horizontal menu. Find _VerticalMenu.cshtml and _HorizontalMenu.cshtml files inside Pages/Layouts/Sections/Menu/ folder.

  6. Option 1: To add menu item as main menu:

    <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
      <a asp-page="/Test/TestPage" class="menu-link">
        <i class="menu-icon tf-icons bx bx-home-alt"></i>
        <div data-i18n="TestPage">TestPage</div>

    Option 2: To add menu item as sub menu:

    Move both files TestPage.cshtml and TestPage.cshtml.cs to Pages\Test\ folder.

    <li class='menu-item@(currentPage.StartsWith("/Test/") ? " active open" : "")'>
      <a href="javascript:void(0);" class="menu-link menu-toggle">
        <i class='menu-icon tf-icons bx bx-food-menu'></i>
        <div data-i18n="Test">Test</div>
      <ul class="menu-sub">
        <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
          <a asp-page="/Test/TestPage" class="menu-link">
            <div data-i18n="TestPage">TestPage</div>
  7. For page searching options in navbar search box, add page link in search-vertical.json and search-horizontal.json inside wwwroot/json/ folder.
  8. {
      "name": "TestPage",
      "icon": "bx-home-alt",
      "url": "Test/TestPage"
  9. Add page name to wwwroot\json\locales\en.cshtml{all language json} file to display in multi language.
  10. "Dashboard": "Instrumententafel",
    "Test": "Test",
    "TestPage": "Page de test",

Run dotnet watch command in the project directory to see the changes.

© 2017- Pixinvent, Hand-crafted & Made with ❤️