Migrating LightSwitch To HTML5: A look at ASP.NET Core Scaffolders and Code Generators

Microsoft recently announced that Visual Studio 2015 would be the last version to support LightSwitch and advised developers not to start new development using this platform. This has left many LOB developers looking for a stable, well-supported platform to replace LightSwitch, and moving from LightSwitch to HTML5 is one of the most suitable paths.

In this two-part series, we'll look at how to create a simple data-driven app in HTML5 using Angular and ASP.NET MVC. In this blog, we'll focus on ASP.NET Core.

Angular vs. ASP.NET MVC: Benefits of Migrating LightSwitch Apps

A client-side technology such as Angular is a natural choice, as it offers:

Structure to JavaScript

Templating

Two-way data-binding

Great for SPA (Single-Page Applications)

Modular development

For someone coming from LightSwitch background, though, it's still missing some features. LightSwitch offered designers and screens to quickly create LOB applications, and while Angular is easy, it presents a learning curve for someone coming from server side C#, and it involves writing some code for simple apps.

Server side ASP.NET has come a long way. It provides easy-to-use tools, and builds scalable business applications. Feature highlights include:

Scaffolding, which helps to generate screens based on the model

A strong HTML5 editor, which makes writing HTML code a breeze

TagHelpers in ASP.NET Core, which you can think of as XAML on the web

TypeScript for client-side scripting

Entity Framework, which helps with quick model generation

Create a Simple App in ASP.NET Core

Let's start with a simple app in ASP.NET Core. This walkthrough uses VS2015.

Our requirements include:

A screen that displays product information inside a grid

User can edit, delete, page and filter the grid data

A grid that has conditional formatting for a certain threshold of stock

Step 2: Add Licensing

Click on Tools > GrapeCity License Manager to open the the GrapeCity License Manager Add-In. If you're not already logged in, you'll need to sign in with the GrapeCity credentials:

SignIn

Next, Click on the "Generate App(runtime) License" button:

In the next window, use the dropdown to select a registered C1 license key or Eval and hit "Generate App(runtime) License" button.

Generate License

This generates an XML file with a unique GUID and adds it to the project.

Step 3: Add Data

Data models can be added to the project in various ways; you can create POCO classes or use Entity Framework. In this example, we'l be using the new Entity Framework Core 1.0, which directly interacts with an existing database. Entity Framework can quickly scaffold models out of database using the "Scaffold-DbContext" command via NuGet Package Manager Console.

Remove SupplierID and OrderDetail columns using the remove button.
Displaying IDs for CategoryID may not be helpful to user, so instead we should display CategoryName for CategoryID. This can be configured easily in this tab.

Go to the properties for CategoryID column

Expand DataMap property

Select "Categories" from Source dropdown

Select CategoryID from SelectedValuePath dropdown

Select CategoryName from DisplayValuePath dropdown

Set "Header" property of the column to "Category"

DataMap

Go to the Editing Tab:

Check Allow Edit.

Check Allow Delete.

Go to grouping Tab:

Check CategoryID under Group Descriptions.

Go to Filtering Tab:

Check Allow Filtering.

Go to Paging Tab:

Check Allow Paging.

Set Page Size to 20.

Go to ClientEvents Tab:

Check FormatItem

Got HtmlAttributes Tab.

Set height to 540

Click Add Button. This generates the ProductsController.cs and Index.cshtml(under Views/Products) file. The Product controller class will have the code for CRUD operations:

Note that the generated view code uses Tag Helpers, which look similar to XAML or Angular code. If you run the sample now, you get a fully functional grid with support for:

CRUD

Grouping

Filtering

Paging

Column ordering\resizing

Excel-like Editing

All of this functionality without having to write a single line of code!

Products

We've met all the requirements except one: we need to apply conditional formatting on "UnitsInStock" column so that products below certain threshold are shown in red.

We'll apply conditional formatting using script. We can use either JavaScript or TypeScript; IntelliSense is provided for both. Since TypeScript is strongly typed it suits MVC controls. On the index page remove the following JavaScript code:

Add a reference of the app.ts file to the Index.cshtml. Run the app and navigate to Products:

Conditional Formatting

We've displayed products data without writing any code, and we had to write a small script to customize the display.

Reporting

FlexGrid supports exporting to Excel both on client and server side (on server side it makes use of Web APIs). You could also design reports using the standalone FlexReport Designer app and display them using MVC FlexViewer and FlexReport Web API. The built-in item template configures the FlexViewer, and Web API removes the necessity to write lot of code so you can concentrate on business requirements.