If you are new for .Net Core template, here you start with creating new page.
AspnetCoreStarter
or AspnetCoreFull
: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.
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace AspnetCoreStarter.Pages
{
public class TestPageModel : PageModel
{
public void OnGet() { }
}
}
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.
@page
@model AspnetCoreStarter.Pages.TestPageModel
@{
ViewData["Title"] = "TestPage - My Application";
}
<!-- ************** Content ************** -->
<h4 class="py-3 mb-6">Test Page</h4>
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:
<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>
</a>
</li>
Option 2: To add menu item as sub menu:
Move both files TestPage.cshtml
and TestPage.cshtml.cs
to Pages\Test\
folder.
open
class for horizontal menu.
<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>
</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>
search-vertical.json
and search-horizontal.json
inside wwwroot/json/
folder.{
"name": "TestPage",
"icon": "bx-home-alt",
"url": "Test/TestPage"
},
wwwroot\json\locales\en.cshtml
{all language json} file to display in multi language."Dashboard": "Instrumententafel",
"Test": "Test",
"TestPage": "Page de test",
Run dotnet watch
command in the project directory to see the changes.