Dmitry Sikorsky

ASP.NET Core Web Application with Modular UI Using the ExtCore Framework

We are going to show how simple it is to create a web application with modular (built from the parts from the different modules and extensions) user interface using the ExtCore framework:

ASP.NET Core Web Application with Modular UI Using the ExtCore Framework

If you are new to ExtCore framework I would suggest you to read “Create Simple ExtCore-Based Web Application” and “Create ExtCore-Based MVC Web Application” tutorials first to understand what it all is about. (Also, you could find interesting reading the docs.)

Solution Structure

Our solution (by the way, it is uploaded to GitHub), as any other ExtCore-based web application, is consist of the main web application project and the extension projects. We will have 4 extensions in this sample (3 extensions with user interface parts and one, named Barebone, containing the shared things):

Solution Structure

The main web application project is almost the same as one from the second (MVC) tutorial. I decided to put all the views and CSS files to the Barebone extension to show one more time how easily it can be done, but we could move them to the main web application project with no problems (the only thing we would need to do is adding Barebone as dependency to the project.json file, because that extension contains shared classed we are using to build the UI). Note that you can add the extensions to the ExtCore-based web application as DLL files or as direct dependencies to the NuGet packages in project.json file (we will use the first option because it is more interesting).

Barebone Extension

Barebone extension is the central one. It defines the default route of the web application (the standard /controller/action one). Also, it declares interfaces (IMenu, IToolbar) and classes (MenuItem, Button) of the shared UI elements. Let’s take a look at the IToolbar and Button pair.

The IToolbar interface represents a toolbar:

It defines the enumeration of the buttons and the position of the toolbar (it is used to sort the toolbars).

The Button class implements a toolbar button:

It defines name and position of the button (in this case position is used to sort the buttons inside a toolbar).

The default route of the web application is handled by the single controller action and is rendered using the single view. That view uses view model (of type IndexViewModel), which is created by controller using the IndexViewModelFactory factory. So the controller action contains only one row:

View model contains the enumeration of all the menu items and all the toolbars found among all the extensions:

IndexViewModelFactory uses ExtCore’s ExtensionManager to discover the extensions and search for the implementations of the IMenu and IToolbar interfaces. Also, this class creates instances of the found implementations:

Finally, the menu items and the toolbars are rendered inside the view using the partial views:

UI Extensions

All the extension projects are very similar. They can define menu items (inside the class (or classes) that implements IMenu interface) and toolbars.

Here is the sample of the menu items definition:

Definition of the toolbar looks almost the same:

Conclusions

It is very simple to solve tasks like this using the ExtCore framework. It takes care of all the tasks related to the assemblies discovery and load. I hope you enjoyed this sample.

As usual, I have created the demo project for this post. Feel free to ask if you have any questions!

March 01, 2017 by Dmitry Sikorsky