In this blog, we'll look at how to use the Razor Pages scaffolder to quickly add and insert a ComponentOne for ASP.NET MVC control to create a sales dashboard.

For this example, we've created a Razor Pages application and used Entity Framework Core scaffolder to generate the model from anexisting Northwind database. We'll use this model for scaffolding ComponentOne controls.

Use the ComponentOne Razor Page Scaffolder

First, in Visual Studio, right-click on the Pages folder and select Add New Scaffolded Item.

In the Add Scaffold Window, under the MVC node, click View. Select C1Scaffolder from right pane and click Add.

Razor Pages Scaffolder

From Add Scaffold window, select FlexGrid from the list of controls and click next.

Add a FlexGrid

Next, set the Page Model name as IndexModel.

Set the model class

Then set the Model class as Product_Sales and Data Context as NorthwndContext.

Set the Page Model

Next, go into the filtering tab and check Allow Filtering.

Allow filtering

Click the sorting tab and check Allow Sorting.

Allow Sorting

Click the paging tab and check Allow Paging.

Allow Paging

Click Html Attributes tab and set height.

Set height

Click Add.

Razor Page scaffolder generates TagHelper code

Finally, the scaffolder generates relevant TagHelper code and page model for the control:

TagHelper code

Run the Razor Pages app

On running the app, FlexGrid displays the top product sales data.

Insert additional ASP.NET MVC controls to the Razor Page app

Now, let's use the Razor Pages scaffolder to insert another MVC control to the page so we can display category sales.

First, right-click on the page where the control code needs to be place.

Then, from the context menu, select Insert C1 MVC Control.

From the C1 MVC Scaffolder window, select FlexChart and click next.

Add a FlexChart

On the FlexChart window, on general tab set:

  • Model class as CategorySalesfor1997
  • DataContext as NorthwndContext
  • Binding X as CategoryName
  • Binding as CategorySales

Set other properties like Animation, LineMarker, and Selection.

Set properties for MVC chart

Finally, click Add. The scaffolder generates the relevant FlexChart code as per the settings provided:

Run the app to view top product sales and category sales data:

Get the Razor Pages Scaffolder in C1 Studio Enterprise