ASP.NET MVC Controls | ComponentOne
In This Topic
    Scaffolding in Razor Pages
    In This Topic

    Scaffolding is a code generation framework for ASP.NET MVC applications. You add scaffolding to your project when you want to quickly add code that interacts with data models. Using scaffolding can reduce the amount of time to develop standard data operations in your project.

    The ComponentOne ASP.NET MVC Edition provides scaffolding in Razor Pages for FlexGrid, MultiRow, FlexSheet, FlexChart, FlexPie, Sunburst Chart, FlexRadar and Input controls.

    The steps to scaffold control for ASP.NET MVC are as follows:

    1. Configure the datasource. For more information on configuring a datasource in ASP.NET Core application, see https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/intro?view=aspnetcore-3.1.
    2. In the Solution Explorer, right-click the project name and select Add|New Scaffolded Item. The Add Scaffold wizard appears.

    3. In the Add Scaffold wizard, select Common|Razor Pages and then select C1 Scaffolder from the right pane.

    4. Click Add.

    5. Select the control as per your requirements, and then click Next. In our case we have selected FlexGrid control.


      The C1 ASP.NET MVC FlexGrid wizard appears with the General tab selected by default.

    6. In the General tab, specify the model as follows:

      1. Fill in the Page Model Name.
      2. Select Model Class from the drop-down list. The list shows all the available model types in the application in addition to the C1NWind.edmx model added in Step 1. In our case, we select Product to populate products in the FlexGrid.
      3. Select Data Context Class from the drop-down list. In our case, we select C1NWindEntities.

    7. Go to Columns tab to specify the columns in the FlexGrid control. By default Auto Generate Columns is checked; if not, then you can add, delete, or move columns upward or downward in the sequence in which they should appear in the final view. In our case, we have selected columns as shown in the following image:


    8. Go to Editing tab and check Allow Edit and Allow Delete check boxes.

    9. Go to Grouping tab. In the Group Settings, check Show Groups and CategoryID check boxes from Group Descriptions, and give Group Header Format a name, say 'Group by Category ID'.

    10. Go to Filtering tab and check Allow Filtering check box. Let the other settings be same as default.

    11. Go to Sorting tab and let the setting be same as default - both Allow Sorting and Show Sort check boxes should be checked.

    12. Go to Client Events and check BeginningEdit check box.

    13. Click Add to create the code in FlexGridController.cshtml and FlexGridController.cshtml.cs files.