CCNextGen_Template 1.0.63

CC NextGen Template

Note

Please visit the Source Repository on Github for the most up-to-date documentation.

Installation

1. Download the template and link it to your project.
2. Add the necessary code to Program.cs to allow the library to run.
3. Delete or rename the default _Layout.cshtml file (this is what the template uses and local files override the template)
4. Add the configuration items from the section below to your appsettings.json file
5. Add additional partials to add items to the sidebar or top menu based on the options in the sections below.

Program.cs

using CCNextGen_Template;

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.ConfigureOptions(typeof(UIConfigureOptions));
builder.Services.AddRazorPages(); //if it is not already there

app.MapRazorPages();

Add .AddCustomRazorConfiguration() Extension Methods

Add the .AddCustomRazorConfiguration() method to both the .AddControllerWithViews() and .AddRazorPages() in your startup code. This will allow the partials to render properly.

builder.Services.AddControllersWithViews().AddCustomRazorConfiguration();

builder.Services.AddRazorPages().AddCustomRazorConfiguration();

Appsettings.json

Add the following to appsettings.json

    "TemplateConfiguration": {
        "AppFullName": "",
        "AppShortName": "",
        "ThemeColor": "#00072d",
        "Favicon": "",
        "Logo": ""
    }

Template Files

You can create partials with the following names to add content to various areas of the template.

Sections

You can add sections to individual pages, or if you want them to appear on multiple pages, add them to _ViewStart.cshtml or _ViewImports.cshtml

Helpful Partials

_PageHeader.cshtml

This partial will display the title of the page as well as add a button linking to the "Create" form (or if on an editor page, a link to return to the list view. Success, error, and warning message displays are also generated from this partial.

To set the text in the partial, set the following in your view

ViewData["Title"] = "Page Title"

To hide the button, set the following

ViewData["HideButton"] = true

To add additional buttons, you can create a list of AdditionalLink objects:

ViewData["AdditionalLinks"] = new List<AdditionalLinks> {
	new AdditionalLink {
		Url = "http://google.com",
		Title = "Google",
		ClassName = "btn btn-secondary",
		IdName = "googleButton",
	},
	new AdditionalLink {
		Area = "Admin",
		Controller = "Users",
		Action = "Edit",
		Data = new Dictionary<string, string> {
			{ "id", "3" }
		},
		Title = "Edit Account",
		Icon = "person"
	}
}

* Either URL or asp-based routing needs to be used for the button

_Pagination.cshtml

Generates pagination links and a drop down to change the number of items displayed on a list page. This partial requires the package:

https://github.com/SitholeWB/Pagination.EntityFrameworkCore.Extensions

Your results need to be of the type Pagination<TModel> and from your controller, the following ViewData items need to be set: |ViewData Key | Description | | --- | --- | | Search | Search Term (can be blank or null) | | Page | int, default to 1 | | PerPage | int, default to 100 |

something along the lines of the following would provide everything the pagination partial needs to function.

public async Task<IActionResult> Index(string? search = "", int page = 1, int perPage = 100)
{
	var users = _context.Users.AsQueryable();

	if(!String.IsNullOrEmpty(search))
	{
		users = users.where(x => x.FirstName.Contains(search) || x.LastName.Contains(search));
	}

	ViewData["Search"] = search;
	ViewData["Page"] = page;
	ViewData["PerPage"] = perPage;

	return View(new Pagination(await user.Skip((page - 1) * perPage)).Take(perPage).ToListAsync(), await user.CountAsync(), page, perPage))

}

Special Sub-Layouts

These layouts extend the base layout for cases where patterns were identified in page layouts.

_Editor.cshtml

A simple page layout for forms. This layout loads the page header partial and the code for select2.

_Index.cshtml

A complex layout that makes rendering list pages simple. This layout displays the page header partial, but also displays a search form (and if the user is searching, it provides a link to "view all results."). The Pagination is disabled at the bottom of this view. When you load this view, all you need to worry about is creating the data table.

The necessary javascript to make the pagination work, and the links for the page header will work automatically.

To uses these pages, open the view you want to use the "sub-layout" on:

e.g., /views/users/index.cshtml

@model Pagination<MyNameSpace.Models.User>
@{
	ViewData["Title"] = "Manage Users";
	Layout = "SubLayouts/_Index";
}

<table class="table table-striped">
...rest of code...
</table>

Layout Partial Samples

_Sidebar.cshtml

The sidebar makes use of Bootstrap pills and Material Icons. Below is an example of what the file may look like

<hr />
<ul class="nav nav-pills flex-column mb-auto flex-grow-1">
	<li>
	    <a asp-area="" asp-controller="Home" asp-action="Create"
	       class="nav-link text-white @Html.ActiveClass(controller: "Home", action: "Index", cssClass: "active")">
	        <div class="d-flex justify-content-start align-items-center g-2">
	            <i class="material-symbols-outlined me-2">home</i>
	            <span class="text-nowrap flex-grow-1">Home</span>
	        </div>
	    </a>
	</li>
</ul>

Additional Notes

To use the Yellow pill highlighting in the sidebar, add the following CSS to your stylesheet. (It is used on a per-app basis, so it is not enabled by default).

.nav-pills .nav-link.active
{
    background-color: #ECC435 !important;
    color: black !important;
}