.Net Core MVC Create New Page

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

Basic Steps to create new page with Vuexy admin template for AspnetCoreMVCStarter or AspnetCoreMVCFull :

1. Create New Controller with .cs extension in the Controllers/ directory.

   Let's create a blank Controller for an example with the file name TestController.cs and placing the below code in that file.

Copy

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using AspnetCoreMvcStarter.Models;

namespace AspnetCoreMvcStarter.Controllers;

public class TestController : Controller
{
  public IActionResult TestPage() => View();
}

2. Create New View with .cshtml extension in Views/{view_name}/ directory.

   Let's create a blank View for an example with filename TestPage.cshtml in Views/Test/ directory and placing the below code in that file. The controller TestController.cs sets view for TestPage.cshtml

Info: Always name controller such as it is prefix of view name & it ends with a suffix 'Controller'. For example, TestController.cs controller has TestPage.cshtml view.
Also, avoid same name for controller and view. For example, TestController.cs controller has Test.cshtml view.
Copy

@{
  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 Views/Shared/Sections/Menu/ folder.

Option 1: To add menu item as main menu:

Copy

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

Option 2: To add menu item as sub menu:

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 ti ti-list'></i>
    <div data-i18n="Test">Test</div>
  </a>
  <ul class="menu-sub">
    <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
      <a asp-controller="Test" asp-action="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": "ti-smart-home",
  "url": "Test/TestPage"
},

5. Add page name to wwwroot\json\locales\en.cshtml{all languages 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.