The Mef for MVC and Azure DocumentDb Demonstration 


As I’d already shared the Mef libraries for WPF, WinForms and Console Application. So In this post, I would like to share one more Mef library for .Net MVC.

As you may know, The MVC is supporting Areas that allow developing a set of Views, Controllers, and Resources (Images, CSS and Javascript) inside Areas folder. However, the areas are still a part of MVC application, and the resources need to be imported into the _Layout view manually and deploy along with the application. Beside of that, if any changes in the areas may impact to the whole application and need to be tested carefully before going live.

I. HBD.Mef.Mvc Introduction

PM> Install-Package HBD.Mef.Mvc

The Definition.

  • Workspace: this is an MVC website (a Shell) considering as Module container that allows deploying and run multi modules separately.
  • Module: this is a loosely couple MVC area that is implementing independently with Workspace and able to deploy into the Workspace lately.

So, get used of Area in MVC, I would like to introduce my HBD.Mef.Mvc library, it had been implemented based on the Mef technology allows you to build and manage the MVC areas as a module not only in a separate folder but also in different projects.

Before going to details of the library implementation, I would like to discuss a few questions below.

Why do we need the Modularization application?

  1. Let’s imagine, if you have many development teams and try to make the teams are working independently and separately as much as possible. However, if three or four teams are working a the significant changes of a complex application and that application does not support modularization. So when any team needs to deploy the changed to the Stagings or Production environments, they need to inform all the other teams to ensure there is no conflict between the teams. After deployed,  the other teams need to merge the changes into their source code branches. Managing this situation is a nightmare for the project manager.
  2. The other scenario, if the application doesn’t support modularization, so any change even the small one you need to conduct the System Integration Test (SIT) and User Acceptant Test (UAT) for the whole system because of the impact and the efforts will charge back to the business. You know, The business users may surprise why the simple change is costly?
  3. Micro-Services adoption: as you know, Micro-service is new technology that structures an application as a collection of loosely coupled services, which implement business capabilities. The microservice architecture enables the continuous delivery/deployment of large, complex applications. It also enables an organization to evolve its technology stack.
Micro Service Architecture

So the advantage of the Modularization application:

  • Allow the teams are working on the modules independently, parallelly.
  • Speed up and enable continuous development, delivery process: In term of the Agile development process. Normally, the sprint time is two weeks, and the recommendation to the development team is releasing a small workable feature of the application and demo to the Business users on the Sprint demonstration meeting.
  • Help to scale down the impact of the changes and increase the scalability, flexibility, and stability of the application.
  • Developing and maintain the automation tests or UI tests for a module is much easier for the whole complex application.

What is Mvc Module?

As you know, develop a Module is not just a Views and Controllers but also the settings, configuration, resources, Business and Data logics also. On the next sections, I will show you how to build a Workspace and create a module for that Workspace separately by using HBD.Mef.Mvc.

II HBD.Mef.Mvc Features

1. Navigations

Along with a Module is a set of navigation that We need to add into the top menu of the Workspace to allow users to navigate and using your modules functions. Let’s see, if developing a module and the navigation are adding directly to the _Layout view of the Workspace, and overwriting the  _Layout file of the Workspace in every deployment. In this case, the dependence happens again if there are more than one development teams are working the same Workspace and on each team, they also maintain a different version of _Layout view on their modules.

  • INavigationService

So in this library is provided an INavigationService allows registering the navigations into the Main Menu of Workspace dynamically.

Currently, the Main menu is supported two level only. You can add a navigation link directly in the main menu, or add a menu and navigation links are children of that menu.

  • IFooterNavigationService

Similarly, the IFooterNavigationService allows registering the links into Footer portion of the Workspace dynamically.

  • Navigation and Authorization

In the MVC some controller actions are required a particular Roles for the execution. So if the current user doesn’t have the necessary Roles, she is not able to execute that actions. In this case, the Workspace will hide all the navigation related to that actions automatically. If there are no visible children of a menu, the Workspace will hide the parent menu as well. It will help to save the main menu space for the other modules.

2. Resource Bundle Handling.

Working with MVC, you will know that the framework provides a feature called Bundle to allows to import the CSS and javascript files into the views.

Similar to navigation. Including all resources into the _Layout view of the Workspace is not recommended and it may conflict with the resources of the other Areas.

To resolve this issue. I have implemented a helper class in the library allows to register the module resources into the bundles and manage to render that bundles when accessing the module viewsIt means the Workspace will present the resources of the accessing module into the _Layout page at runtime. This feature will ensure that no CSS or java scripts conflicts between the Modules.

3. Controllers scanning.

You may be aware that, if we want to export a class into Mef container, we need to mark the class with Export attribute. What happens if you forgot to mark this attribute to the controllers? No worry this case had been covered in this library. It will scan all controllers in your binaries and export into Mef container automatically.

4. Configuration management.

As you know, running a .Net website the AppSettings and ConnectionStrings will be loaded into ConfigurationManager class of System.Configuration.

Definitely, on each Module, it will have a separate set of App Settings and Connection strings. Instead of adding the configuration into Workspace config file. You can keep it in a Wed.config and place it in the top level of your Module. The library will load and merge into the ConfigurationManager automatically.

Currently. Only AppSettings and ConnectionString sections are supporting. As the configuration will merge into Workspace configuration, so I would recommend using the Module Name as the prefix of the configuration keys.

The sample code to show you how to use all features above will be provided on the Module development below.

III. Develop a new Workspace.

The idea to implement an MVC Workspace as a core foundation application, that allows to add-in the modules and services independently.

I have developed a Workspace named HBD.Mvc.Shell using HBD.Mef.Mvc and published to Github, if you want to develop a new Workspace by yourself you can reference my source code in here.


However, I would like to highlight a few things as below.

1. Bootstrapper class in the App_Start folder.

After installed HBD.Mef.Mvc from Nuget, a new Bootstrapper class, will be added to App_Start folder automatically.

Only one thing you need to do is overwrite the RegisterMainNavigation method and add the navigation of Workspace in. Because the Menu bar, Footer bar will be rendering from INavigationService and IFooterNavigationService instead of maintaining the menus manually.

The rest of configuration, modules loading, resources management will be done automatically by Bootstrapper itself. However, all methods of Bootstrapper are in virtually so in case you want to customize the logic you can overwrite them easily.

Please note that the DisplayAt and AlignAtRight only supported int the root menu level for both The main menu and Footer navigation.

The FontAwesome and Glyphicon icons also supported on both levels of menu. If you want to display an image on the menus instead, you can replace the Glyphicon with a virtual path of the image location. When rendering the Workspace will scan the image from both Area and global Workspace folders and display the image properly.

2. Main menu and Footer partial views.

In HBD.Mvc.Shell Workspace, I had moved the main menu and footer of _Layout view to the partial views. So, in future if any changes on the menu rendering we just need to re-deploy the small part view files instead of a whole _Layout file. This will help to minimize the impact of the changes to the Workspace.


Navigation Partial Views

3. Navigation Authorization.

As mentioned above. The navigations are supporting the Authorization, and I would like to move to a separate section to show you how the navigation can pick up the Roles from a controller, or you can specify the Roles manually.

  • Auto Pickup the Roles from Authorize attribute.

The sample code to add a navigation for a controller action

With above code, we will add a navigation titled Import Account From File for the ImportFromFile action of ImportController and below is controller code.

The For extension method will check the Authorize attribute of ImportFromFile action to whether any Authorize with Roles had been specified and pick up the Roles for the navigation automatically. If there is no Authorize attribute had been found it will check at the Controller level for the same.

Note that this automation only happens when there is no Roles had been provided. It means if you already provided the Roles for navigation the auto role pick up won’t be executed.

  • Specify the Roles manually.

Below code is a sample for the manual Role specification:

The WithAuthorize is an extension method that allows you to determine the Roles for navigation. If calling WithAuthorize without any parameter provided, it means the navigation just require the current user is authorized.

IV. Quick start Module development.

To prove my library is working. I have implemented a simple module named Azure Notes. This module is a personal notebook and using Azure DocumentDb to store the note items.

Before starting with the Module implementation, we need to create the Azure DocumentDb first. There is two option for the developers.

1. Setup DocumentDb on Azure Portal

If you already had the Azure Subscription, you can log in to the portal and create a DocumentDb account and then create a collection with the following information.

  • Database name: AzureNotes
  • Collection Id: AzureNotes
  • Partition Key: AzureNotes
  • Storage Capacity: 10GB.
  • Throughput Capacity: 400 RU/s

If you don’t have Azure Subscription, you can install Azure DocumentDb Emulator here, and the create a similar collection as above.

2. Module Implementation

  • Create new Module

Create new Mvc Web application and install the latest version of HBD.Mef.Mvc from nuget. After installed you can delete all the redundant files and just keep the below folders and files.

  • Content folder
  • Controllers folder
  • Views folder
  • Scripts folder
  • all configuration files.

And then add a new class named <YourModuleName>AreaRegistration and then inherited from MefAreaRegistration in HBD.Mef.Mvc this class will help to register your module as an Area in the Workspace application.

Your module should look similar as below.

  • Register Module Routing

  • Register Main Menu Navigation

  • Register Footer Navigation

  • Register Module Bundles

  • Update the App Settings of Web.config file
    • Using Azure DocumentDb Emulator

    • Using Azure DocumentDb

The DocumentDB Account URL and Key can be found in the DocumentDb Account Keys

  • Controller and Views Implementation

You shall continue to implement your controllers and views logics as usually. However, remember to add the Export attribute to your Controllers.

3. Module Deployment

To deploy your module into Workspace. All the folder below need to be copied into Areas\<YourModuleName>\ folder. All binaries of your module will be copied to the bin folder of Workspace.

  • Debug Mode

Running your module on the localhost, you can use set below command line into the post-build event of your module. It helps to copy the necessary files and folders into the Workspace on every build.

  • Deploy to Production

Package your module as the structure below for the production deployment. So that, IT guys can help to copy the folder and files quickly or use the auto deployment tool to deploy the zip file into Workspace application.

    • Areas
      • AzureNote
        • Content: all CSS files of your module.
        • Scripts: all javascript files of your module.
        • Views: all *.cshtml files and folders of your modules.
        • Web.config
    • bin
      • AzureInterfaces.dll
      • AzureNote.dll
      • AzureNoteEntities.dll
      • AzureStorage.dll
      • DocumentDB.Spatial.Sql.dll
      • Microsoft.Azure.Documents.Client.dll
      • Microsoft.Azure.Documents.ServiceInterop.dll

After deployed, just recycle the application pool to re-initialize the Workspace to load new module and displayed on the screen.

4. Live Demo

I have hosted the HBD.Mvc.Shell and Azure Notes module onto my Azure, you may want to take a look at the link below. I just have 25$ on my subscription. So hopefully It is not going to down soon.

V. Source Code

  1. HBD.Mef.Mvc
  2. HBD.Mvc.Shell
  3. AzureNotes

The Workspace for WPF Application Introduction


Nuget Package:

PM> Install-Package HBD.WPF.Shell

I. HBD.WPF.Shell Introduction

Similar with HBD.WinForms.Shell and HBD.App.Shell. In this post, I would like to introduce one more Shell Foundation for WPF Application. This open source project had been developed based on Prism and WPF technologies, that allow to add-in the Modules at run-time. So that you can use this project as a Foundation of your application and then develop and maintain your modules separately and independence.

The Main window

II. The Available Regions

When working with Prism, the region is one of the good features allow to organize display area and navigation of the controls in the application. As the screenshot above there are 7 regions are available in this Shell.

1. The Menu Region

This region will be used to display the main menu of the Shell. The main menu view will be loaded into the menu region when the application started and it can’t be replaced or deactivated and the menu view must be inherited the  HBD.Mef.Shell.Views.IShellMainView interface. So that the Shell will extract the view from Mef container based on this interface type.

The sample code of the main menu view.

The Main Menu View

2. The Right Region

This region will be used to display the notification center of the Shell. Similar to the main menu view. The notification center view will be loaded into the right region when clicked the bell icon on the menu view. However, it can be replaced or deactivated. This view also requires being inherited the  HBD.Mef.Shell.Views.IShellNotificationCenterView interface.

The Notification View

3. The Status Region

This region will be used to display the status view of the Shell. This view will be loaded at app start and can’t be replaced or deactivated. This view required to be inherited the HBD.Mef.Shell.Views.IShellStatusView interface.

4. The Main Region

This region will be used to display the Tab Control View that allows adding the custom views from the Modules. The same with Status View, This view will be loaded at app start and not allow to replace or deactivate. It also required being inherited the  HBD.Mef.Shell.Views.IShellMainView interface.

5. The Left Region

This region is available and will be shared for all modules. The look and feel are similar to the left region.

6. The Tab Region

This region must be defined in the Tab Control View to tell the Shell that all custom views from the modules will be displayed in the Tab Control.

The Tab Control View

7. The Title Region

When creating a custom view of the Module. The view header and view title need to be specified. The view title will be displayed on the Tab header and view header will be displayed in the title region.  However, only view title will be displayed when loading to the Left orRight region as the screenshot below. As the other view, this title view needs to be HBD.Mef.Shell.Views.IShellTitleView inherited the interface.

Title region

Just hightlight that all Views of this Shell had been implemented in the separate library named HBD.WPF.Shell.UI and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.UI with the other library that content the full set of the above views.

Refer the source code of HBD.WPF.Shell.UI for more details.

III. The Built-inServices of the Shell.

Below built-in services had been developed along with this project. I will post a separate post for each service to discuss the usage and customization later. In this section just introduce the service functionality and how to use it.

Please note that all built-in service had been added into the HBD.WPF.Shell.ViewModels.ViewModelBase abstract class.  So recommend that all view model should be delivered from this class.

1. Dialog Service

The dialog service is providing the easy way to interact with the dialog as

  • Display a UserControl as dialog.
  • Open the file browser dialog
  • Open the Folder browser dialog.

The service is an instance of  HBD.WPF.Shell.Services.IDialogService interfaces and exported to the Mef container.

  • Sample code

  • Dialog screenshot

2. Message Box service

The message box service is providing the common dialog as Information, Alert, Confirm and Error message box and shared across the modules. So that message box will be displayed consistently.

This service is an instance of  HBD.WPF.Shell.Services.IMessageBoxService interfaces and exported to the Mef container.

  • Sample code
  • Information Box
  • Alert Box
  • Confirmation Box

3. Notification Service

The notification service allows to display a notification on the screen and added into Notification automatically.  This service is an instance of  HBD.WPF.Shell.Services.INotificationService interfaces and also exported to the Mef container.

  • Sample code
  • Notification Screenshot.

4. Status Service.

The status service allows displaying the message onto the Status bar of the Shell. This service is an instance of  HBD.WPF.Shell.Services.IShellStatusService interfaces and also exported to the Mef container.

  • Sample code
  • Screenshot

5. Other Services.

  • Navigation Executer: this service will help to execute the  INavigationParameter
  • Shell Option Service: this service will save the states of the application: current position, current theme, window state and more.
  • Shell Region Navigation Service: This service provides an easy way to navigation between the views and regions.

6. Upcoming Services.

The services below are under development and hope it will be release soon.

  • Authentication service: this service will be using the Open Authentication technology that allows the application interact with the OAuth services as Google, Facebook, Outlook, Linked-In, and Twitter.
  • Module management service: that allow downloading, import and manage the Modules in the Shell.

Just hightlight that all Services of this Shell had been implemented in the separate library named HBD.WPF.Shell.Services and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.Services with the other library that content the full set of the services above.

Refer the source code of HBD.WPF.Shell.Services for more details.

IV. Implement the new Module.

Please refer here for the quick star with Module development here.

V. Source code

You can download the full source code of this Shell here. All the controls of this Shell had been customized from the Microsoft standard controls. So that feel free to use this project for your business.

The Workspace for Console application


Nuget Package:

PM> Install-Package HBD.App.Shell


This post, I Will share the other Workspace source code for Console Shell application as well. This one will provides the core foundation for the console application. That allows building a loosely coupled, module-able and maintainable application.

How does it work?

This Shell application had been developed based on HBD.Mef library that will automatic load all modules in the defined folder at run time. This application is suitable for those who want to develop a batch job that will be triggered by the scheduler and execute the particular plugin based on the input parameters.

Quick Start

1. Add New Module

  • Open Visual Studio and create a new Class Library project example project name is Job.Module.
  • Install the latest version of HBD.App.Shell from Nuget.
  • Add a new class named Job1 and inherited from HBD.Mef.ConsoleApp.ConsoleModuleBase and then implement 2 abstract methods (Initialize and Run(params string[] args)) as below. Remember to add the ModuleExport attribute into your Job1 class.

The function of this job is writing a message to the console and log file.

2. Setup Publish Shell folder.

  • Copy folder [Solution Directory]\packages\HBD.App.Shell\tools\App.Shell to [Solution Directory]\Publish\App.Shell

3. Update project’s properties.

  • Right click on the project select Properties
  • Add below code into Post-build event
  • Set Start external program under Debug to Publish\App.Shell\HBD.App.Shell.exe
  • And set Working directory to Publish\App.Shell folder.
  • And then set the Command line arguments is -job1 param1 param2 param3.

Job Module Debug

  1. Add Module config and Debug your module.
  • Add a new Module_Job_Demo.json file with the following content.
  • Set Build action of this config file as below

Job Module Json

  • Run your module, the Shell application will display as below.

App Shell Job1

How to run multi jobs with parameters

As the Command line arguments above you will see the first parameter is the JobName and then follow by the parameters for that job. If you want to execute multi-job you can pass the Command-line arguments following this format: -JobName1 param1 param2 param3 -JobName2 param1 param2 param3

This is a screenshot when executing multi jobs. App Shell Job1 Job2

If the Environment is Debug the console window will keep open unstil you press a enter key.

Source code

You can download the Job.Module source code here in Github – Job.Module

And the source code of HBD.App.Shell in here Github – HBD.App.Shell

Hope, this Shell will help you to develop a plugin-able application faster and easier. Your feedback and ideas are much appreciated. Please feel free to drop me an email with your opinion.

The Workspace for WindowForms

Nuget Package:

PM> Install-Package HBD.WinForms.Shell


This post, I would like to share my Winforms Shell application, that provides the core foundation for the Winforms application. With this foundation, it can be load the external modules from the pre-defined folders when it started. So that you can add-in and maintenance the modules easily.

How does it work?

This Shell application had been developed based on HBD.Mef library to loading and executing external modules when it starts. For more information about HBD.Mef you can found in here.

Build-In Services

In this Shell there are a few services had been developed and exposed into Mef that helps you to interact with the Shell component. 1. The IMainMenuService will help to add Menu Item into the Menu-bar of Main window.

Menu Bar

  1. The IStatusBarService will help to set the status into the Status-Bar of Main window.

Status Bar

  1. The IMainViewService will help to interact with Tab Manager of the Main window. That allow to add/remove UserControl into TabManager.

Tab Manager

  1. The NavigationManager will provide the details in the below section. # Quick Start – Develop a new module for HBD.WinForms.Shell

1. Add New Module

  • Open Visual Studio and create a new Class Library project example project name is Demo.Module.
  • Install the latest version of HBD.WinForms.Shell from Nuget.
  • Add new class named StartupDemoModule and inherited from HBD.Mef.WinForms.Modularity.WinFormModuleBaseand  then implement 2 abstract methods (GetStartUpViewTypes and MenuConfiguration(IMainMenuService menuSet)) as below. Remember to add the ModuleExport attribute into your StartupDemoModule class.
  • Add 2 new User Controls Named View1 and View2 as below.

Demo Module Views

  • On each view overwrite the Text property and return the View Title and add the Export attribute as below.

2. Setup Publish Shell folder.

  • Copy folder [Solution Directory]\packages\HBD.WinForms.Shell\tools\WinForms.Shell to [Solution Directory]\Publish\WinForms.Shell 

3. Update project’s properties.

  • Right click on the project select Properties
  • Add below code into Post-build event
  • Set Start external program under Debug to Publish\WinForms.Shell\HBD.WinForms.Shell.exe
  • And set Working directory to Publish\WinForms.Shell folder.

Demo Module Debug

4. Add Module config and Debug your module.

  • Add a new Module_Demo.json file with the following content.
  • Set Build action of this config file as below

Demo Module Json

  • Run your module the Shell application will display as below.

Demo Shell

Navigation between the Views.

From version 1.0.1 a new interface had been added into HBD.Mef.WinForms.Common to provide the communication channel between the views. So that the view and navigate to the other view with the parameters.

1. Implementation.

If your view wants to be navigated from the other view you need to implement the INavigationAware interface and handle OnNavigatedTo(WinformNavigationContext navigationContext) method, This method will be called when navigating from the other view.

  • The interface
  • The view implementation

2. Using NavigationManager

The sample code below will handle the button event and navigate to the other view

Navigation Manager

When running the application and click the button. View2 will be open and display the message was passed from View1.

3. Recommendation

There are 2 base classes had been provided in HBD.Mef.WinForms for your Forms and Views. So that when you create a new Form or View, it can be inherited from this form instead.

  • The FormBase
  • The ViewBase
  • The Form implementation
  • The View implementation

Demo.Module source code

You can download the Demo.Module source code here in Github

Hope this Shell will help you to develop a plugin-able application faster and easier. Your feedback and ideas are much appreciated. Please feel free to drop me an email with your opinion.Nuget Dependences