.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 Materio 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.

Copy

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace AspnetCoreStarter.Pages
{
  public class TestPageModel : PageModel
  {
    public void OnGet() { }
  }
}

2. 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.

Copy

@page
@model AspnetCoreStarter.Pages.TestPageModel
@{
  ViewData["Title"] = "TestPage - My Application";
}

<!-- ************** Content ************** -->
<h4 class="py-3 mb-6">Test Page</h4>

3. Add page link to vertical & horizontal menu. Find _VerticalMenu.cshtml and _HorizontalMenu.cshtml files inside Pages/Layouts/Sections/Menu/ folder.

Option 1: To add menu item as main menu:

Copy

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

Option 2: To add menu item as sub menu:

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

Info: No need to add open class for horizontal menu.
Copy

<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 ri-layout-2-line'></i>
    <div data-i18n="Test">Test</div>
  </a>
  <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>
      </a>
    </li>
  </ul>
</li>

4. For page searching options in navbar search box, add page link in search-vertical.json and search-horizontal.json inside wwwroot/json/ folder.
Copy

{
  "name": "TestPage",
  "icon": "ri-home-smile-line",
  "url": "Test/TestPage"
},

5. Add page name to wwwroot\json\locales\en.cshtml{all language json} file to display in multi language.
Copy

"Dashboard": "Instrumententafel",
"Test": "Test",
"TestPage": "Page de test",

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