Use a Razor Pages scaffolder to build an app with ASP.NET MVC controls

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.

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

Next, set the Page Model name as IndexModel.

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

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

Click the sorting tab and check Allow Sorting.

Click the paging tab and check Allow Paging.

Click Html Attributes tab and set height.

Click Add.

Razor Page scaffolder generates TagHelper code

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

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.

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.

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