Vela — ASP.NET Core Port

Introduction

This package ports the Vela React Admin Dashboard Template into an ASP.NET Core Razor Pages project. It contains:

• 197 real routes, one Razor Page per page (plus a handful of dynamic-id detail routes such as /users/{id}), matching the original page-for-page.
• One shared, purged Tailwind CSS bundle under wwwroot/assets/ driving every page — same design tokens, spacing, and breakpoints as every other Vela port.
• Dark & light themes, switchable at runtime and persisted to localStorage.
• Working sidebar navigation, mobile drawer, and command palette (⌘K) on every page, shared via Pages/Shared/_Layout.cshtml.
• A real ASP.NET Core app with its own Program.cs, status-code page handling (real 404/500 pages, not the framework default), and HSTS/HTTPS redirection wired up for production.

Quick start

Requires the .NET 8 SDK (or later). From inside the vela-aspnet/ folder:

dotnet restore
dotnet run

Then open the URL printed in the console (typically http://localhost:5000 or a random HTTPS port) — it redirects straight to the Analytics dashboard.

Package structure

vela-aspnet/
├─ Program.cs               # App startup: routing, status-code pages, HTTPS/HSTS
├─ NavData.cs                 # Sidebar navigation tree (mirrors the React nav-config)
├─ NavMarkup.cs                 # Renders NavData into the sidebar's HTML
├─ Pages/
│  ├─ Shared/_Layout.cshtml      # Shared chrome: sidebar, topbar, mobile drawer, command palette
│  ├─ Shared/_AuthLayout.cshtml   # Chrome-less layout for login/register/404/etc.
│  └─ <Section>/<Page>.cshtml     # One Razor Page per route, @page "/section/page"
├─ wwwroot/assets/                 # Purged Tailwind CSS bundle, fonts, icons, images
│  └─ js/vela-static.js             # Same hand-written behavior layer as every other Vela port
└─ tools/                            # generate-pages.mjs / check-routes.mjs — the generator
                                       # that produced the Pages/ tree from vela-html/dist,
                                       # and the route-coverage checker used in QA

Every sidebar link, breadcrumb, and "view all" button is a real relative URL resolving to an existing Razor Page — there is no client-side router.

What's interactive vs. static

Every page ships the same vela-static.js behavior layer used across the HTML, Django, and Laravel ports of this product: tabs, toggles, accordions, dropdowns, modals, toasts, filters, and search all work against plain data-vela-* attributes baked into the page markup — no page-specific JavaScript needed.

The same known, intentional limitations documented for the static HTML export apply here too (this ASP.NET port templates the same generated markup):

• Kanban drag-and-drop stays visual-only, matching the React source.
• Column sorting combined with search/filter/pagination on the Data Tables and Support Tickets pages isn't implemented; search, filtering, and pagination on those pages do work.
• List pages (Users, Projects, Products, Orders, etc.) link every row to one representative detail route rather than a unique route per mock record.

Themes & navigation

Dark is the default on every page. The theme toggle writes to localStorage["vela-theme"] and is read back on every page load. The sidebar, mobile drawer, and command palette are driven by the same shared wwwroot/assets/js/vela-static.js file included by _Layout.cshtml on every page.

Customizing a page

• Content — edit the relevant .cshtml file directly under Pages/. Most pages use _Layout (set implicitly via Pages/Shared/_ViewStart.cshtml).
• Colors / accent — the design tokens are CSS custom properties defined once in wwwroot/assets/css/style.css. Change them there and every page updates.
• Navigation — edit NavData.cs; the sidebar is rendered from this single C# data structure via NavMarkup.cs, not duplicated per page.
• Adding a page — add a new .cshtml file under Pages/ with an @page directive for its route; ASP.NET Core's file-based routing picks it up automatically, no separate route table to edit.

Deployment

No secrets are committed — there's no appsettings.json with credentials in this package. For a real deployment:

dotnet publish -c Release -o ./publish

Program.cs already enables UseHsts() and UseHttpsRedirection() outside the Development environment, and routes real 404/500 responses to the product's own error pages instead of the framework default.

Credits & licenses

Fonts

Images & icons

• All icons and illustrations are hand-drawn inline SVG — no icon font or icon library is bundled.
• Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own imagery.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.

© Vela. All rights reserved.