How to Add ASP.NET MVC UI Controls to Your Web Applications

ComponentOne provides an extensive range of desktop, Web, and mobile controls. These controls are reusable design elements that help developers implement a wide variety of features in NET applications without the need to re-invent the wheel. ComponentOne provides a complete set of high-performing, flexible .NET controls, including datagrids, charts, reports, input, etc. It also offers specialized controls for business applications along with powerful Web APIs.

In this article, we will focus on:

• ASP.NET MVC Controls and how to add them to your web applications
• Adding MVC controls from NuGet
• Adding controls in Razor pages, MVC Core application using Scaffolder, and handling client-side events

How to Find ComponentOne Controls on NuGet

The packages name for ComponentOne Controls follows a naming convention. The core controls like FlexGrid, FlexChart, etc., are saved in a single package, and enterprise controls Multirow, OLAP, etc., are saved in their individual packages. All the ComponentOne packages have a prefix C1.*. For example, the core NuGet package for MVC controls is C1.Web.Mvc and for MVC Core controls is C1.AspNetCore.Mvc.

The enterprise controls, such as Multirow, and OLAP, have their namespaces after the Mvc part. For example, for MVC Multirow control, the package name is C1.Web.Mvc.Multirow and for MVC Core controls, it is C1.AspNetCore.Mvc.Multirow.

So, for MVC controls, the packages are:

• C1.Web.Mvc - Core library, always required
• C1.Web.Mvc.Multirow - Multirow library
• C1.Web.Mvc.Olap - OLAP library
• C1.Web.Mvc.FlexSheet - FlexSheet library

And for MVC Core controls, the packages are:

• C1.AspNetCore.Mvc - Core library, always required
• C1.AspNetCore.Mvc.Multirow - Multirow library
• C1.AspNetCore.Mvc.Olap - OLAP library
• C1.AspNetCore.Mvc.FlexSheet - FlexSheet library

Creating MVC App using C1 Project Templates

ComponentOne provides an easy way to create ComponentOne Apps using the C1 project templates. While creating a new project in Visual Studio, search for C1 in the project template dialog box, and all the available C1 projects will be displayed. This article will focus on the ASP.NET Core MVC template. Select the C1 ASP.NET Core MVC Application and click on Next. Enter the project location and name.

Select the appropriate .NET version and libraries and click OK.

Once the project is loaded, it will automatically load all the libraries required and set up all the necessary code snippets.

Adding controls using Code

Code writing is the basic and most widely used way to add MVC controls to your application. Like ASP.NET MVC in-built controls, ComponentOne also supports writing code using tag helper. First, you will need to add the tag helper for C1.AspNetCore.Mvc package in _ViewImports.cshtml file.

@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

You can also add other modules as required.

Once the tag helpers are added, we can add controls using code. Open any cshtml file and start writing the below code, this will add a simple read-only flexgrid control with Model binding:

<c1-flex-grid id="grid" auto-generate-columns="true" is-read-only="true" height="500px">
        <c1-items-source source-collection="Model" />
</c1-flex-grid>

Similarly, you can provide a read-action-url, update-action-url, etc so that the data is fetched and updated from the controller instead of the Model:

<c1-flex-grid auto-generate-columns="false" sorting-type="SingleColumn" is-read-only="true"
              class="grid" selection-mode="Row">

             <c1-items-source read-action-url="@Url.Action("GridBindCategory")"
                     update-action-url="@Url.Action("GridUpdateCategory")"
                     create-action-url="@Url.Action("GridCreateCategory")"
                     delete-action-url="@Url.Action("GridDeleteCategory")">
             </c1-items-source>
</c1-flex-grid>

The code for GridBindCategory, GridBindCategory, etc., are controller methods that read, update, add or delete data according to your requirements. The code for this is provided in the sample link at the end.

You can add properties to the controls according to the requirements. The property name follows the kebab case. For example, the isReadOnly property will be denoted as is-read-only.

Add Controls using ComponentOne Scaffolder

ComponentOne also provides a scaffolder for adding controls easily. We can use the scaffolder to bind FlexGrid and other bound controls, set control's properties, add events, etc.

• Go to a .cshtml file to use the scaffolder, right-click on the file, and click Insert MVC Control

• Select the control you want to add; in this case, we will use FlexGrid

• Select the controller and the action method in which the control will be added

• Next, you can select whether the grid will be in bound or unbound mode. If you choose the bound mode, you can select the Model class, DbContext class, and various other information

• Using the navigation bar on the left, you can add columns, set properties, and add events. Once you have specified all the details, click on the Add button. The scaffolder will automatically add the code for the flexgrid
  
  

If you have added the FlexGrid in bound mode, you can also set up batch editing using the scaffolder. In the editing tab, check the Batch Edit tab. The scaffolder will automatically add the code in both View and Controller.

You can also access the C1Scaffolder by right-clicking on the project name and going to Add New → New Scaffold Item. Select Common → C1 Scaffolder from the right pane to add controls in the dialog box. 

Add Controls in Razor Pages

Razor Pages is a newer, simplified web application programming model. It removes much of the ceremony of ASP.NET MVC by adopting a file-based routing approach. Each Razor Pages file found under the Pages directory equates to an endpoint. Razor Pages have an associated C# object called the page model, which holds each page's behavior. Additionally, each page works on the limited semantics of HTML, only supporting GET and POST methods. For Razor Pages, we need to add controls by typing code snippets. Before adding controls by code, we can add a tag helper in the _ViewImports.cshtml file to use IntelliSense in Visual Studio.

@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

You can also add other modules as required.

Now, for example, if we need to add FlexGrid control, we need to use the following code:

<c1-flex-grid id="grid" auto-generate-columns="true" is-read-only="false" allow-add-new="true" allow-delete="true" height="500px">
        <c1-items-source source-collection="Model" />
</c1-flex-grid>

This will display a simple FlexGrid with one-way data binding. We can also add a FlexGrid with CRUD operations using the PageModel of the razor pages.

<c1-flex-grid id="grid" auto-generate-columns="true" is-read-only="false" allow-add-new="true" allow-delete="true" height="500px">
        <c1-items-source update-action-url="@Url.Page("Index", "Flexgrid1_Update")" read-action-url="@Url.Page("Index","GridReadData")"
        create-action-url="@Url.Page("Index","GridCreateCustomer")" delete-action-url="@Url.Page("Index","GridDeleteCustomer")" />
</c1-flex-grid>

Refer to the sample at the bottom for the code behind it.

Adding Client-Side Events

As described previously, a scaffolder can also add client-side events. Go to the Client Events tab and select the events you want to add.

The scaffolder will add the event name in the control tag and the corresponding event. The naming convention of the event will be <control-id>_<event-name>.

You can implement the events as per your requirements. For example, if your requirement is to prevent editing in some cells, then you can use the beginningEdit event as follows:

<c1-flex-grid auto-generate-columns="false" selection-mode="Row" beginning-edit="theGrid_BeginningEdit" height="500px" id="theGrid">

<script>
function theGrid_BeginningEdit(sender, e){
    // prevent editing for even rows
    e.cancel = sender.rows[e.row].index % 2 === 0;
}
</script>

Similarly, ComponentOne controls also support typescript. TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Check the Enable Client-side IntelliSense and Add app.ts file in the application wizard to add typescript support.

After the project is loaded, the wizard will add an app.ts file and typings.d.ts file in the wwwroot/js folder. Instead of adding events in the .cshtml file, you will need to add the events in the app.ts file. In the app.ts file, you will observe that the reference to the typings file is already added, which can be used for typings.

This makes it easier for developers who prefer typed languages and prevent errors during compile time.

In some cases, the MVC project is already created. So, in that case, you can add an app.ts file manually, and you will need to copy the typings file into your project. The typings are located in C:\Program Files (x86)\ComponentOne\ASP.NET MVC Edition\TsTypings. The c1.mvc.basic.lib.d.ts file contains the typings for the core library, and all the other d.ts file contains typings for specific libraries. You can include these typings files in your app.ts file using the reference HTML tag:

/// <reference path="<path to typings>/c1.mvc.basic.lib.d.ts" />

Using Intellisense with Client-Side

Along with typescript, ComponentOne also supports Intellisense with client-side JS or TS. To use IntelliSense, the above d.ts file will be required. In the previous example, we showed how we could use IntelliSense for events, but in some cases, we need to update the properties of controls or call client-side methods on the control. We will need to fetch the control and cast it into the appropriate control class.

In TypeScript file, use typecasting:

let grid = wijmo.Control.getControl("#theGrid") as wijmo.grid.FlexGrid;

In Javascript or CSHTML file, use the cast method:

var grid= wijmo.grid.FlexGrid.cast("#theGrid");

Conclusion

Documentation links:

• MVC Overview
• Project Templates
• Razor Syntax
• C1 Scaffolder
• Client-Side Support

Sample:

• Razor Pages
• ASP.NET MVC FlexGrid Editing