Introducing the ASP.NET MVC Control Designer Control Wizard (Video)

ComponentOne Studio Enterprise, ASP.NET MVC Edition now includes a scaffolder control wizard so you can easily add or update controls even when you’re not using Entity Framework. This is a step-by-step tutorial (with video) on using the scaffolder control wizard.

MVC Control Wizard - Video Tutorial

Let’s look at the control wizard in an ASP.NET Core project, created using the ComponentOne project template.

Getting started with the MVC Control Wizard

First, we’ll declare a FlexGrid control using TagHelpers. We’ll be displaying products data.

Right-click the definition and select “Update C1 MVC control” from the context menu.

Now we’re on the general tab. Since we’re not using Entity Framework, the related Model class and data context class settings are disabled.

Add an id for the FlexGrid.

Next, move to the columns tab, and add the columns you’ll need to display the products data.

Click add and set the binding to ProductID.

Add two more columns, and set the binding to ProductName and UnitsInStock, respectively.

On the filtering tab, check Allow Filtering.

In the HTML attributes tab, set the height to 300 pixels.

Click update.

We’ve updated the FlexGrid definition. The height, ID, and filtering property are set, and the columns with respective binding have been added.

Now, let’s use the ODATA source element of FlexGrid to set the service URL, table name, and keys.

The FlexGrid is now ready to display the products data.

We can also insert any C1MVC control into the Razor View.

Right-click in the Razor view and select “Insert C1 MVC Control” from the context menu.

In the C1 MVC scaffolder window, click on the input tab.

Select InputDate.

Set the Id on the general tab.

On the miscellaneous tab, set the Date Selection Mode to Month.

Click Add.

As you can see, the ComponentOne ASP.NET MVC Control Designer is easy to use and will save you time when configuring controls in ASP.NET and Core projects.

If you have any questions about this control, please leave a comment in the thread below.