How to create a modular web application in C# MVC
When a web application has multiple modules (or sub-applications/ features) it tends to get larger. So, the more modules you plug in your application, the more complex it becomes to partition and maintain the code.
What is the trick to solving this?
A solution for the above problem is to develop application modules independently, without any direct dependencies among them and also on the main application code. Developers should always opt for a modular solution, in which larger modules are easily maintained over time, separately. Once each module is ready for integration, they could be then plugged into the main application with little to no adjustment of the same.
So in short, the structure of a complex asp.net MVC application can be very easily maintained using areas. The concept of this is to allow us to breakdown a large complex application into a several small sections called areas.
These areas can have their own set of:
In this article we are going to develop an ASP.NET MVC application that contains loosely coupled modules (independent to main application), which we will further plug in the main application.
Benefits of this approach
This approach is extremely useful for product development. Utilizing this approach, each module may be developed and deployed for the product separately. This helps in building different versions of the product, like basic, professional, premium, and enterprise versions. It also enables product developers to create the isolation required to
ü Build separate installers with the required features for each different version
ü A master setup which can only install defined features as per license key used during installation, or
ü Some other configuration that requires the modular separation technique.
Demo for a Modular App
Here we will create a web application that contains the following modules:
Open Visual Studio 2015 and create an ASP.NET MVC project as follows. Give it a meaningful name (in my case I have used MVCPluggableDemo).
Once it is created, your solution should look like this:
Right-click on the ‘Controllers’ folder and select “Add -> Controller”. Name it HomeController, and select “Empty MVC Controller” for the template:
Right-click on the Index method of the controller and select “Add View”. Using defaults, create the Index view for HomeController to form the landing page for the application:
Now edit the highlighted section in _Layout.cshtml (under the Views\Shared folder) in order to create menu items pointing to the desired modules:
Run the application and you will get the output as follows:
Now we will focus on creating separate modules for our application and then plug them into the main one.
Right-click on the main application project title (as in our case MVCPluggableDemo) in the Solution Explorer and select “Add->Area” from the context menu. This will create a basic folder structure for the Area framework. Specify “Sale” as Area name and click “Add”.
Then we have a folder solution structure that looks like:
Take a backup of the SaleAreaRegistration.cs file. This file will be needed later on when we add the Sale module to the solution as a separate project.
Now remove the Sale subfolder from the Areas folder, keeping the Areas folder in place.
Next add the new pluggable module for “Sale”, right-click on the solution and choose “Add-> New Project”.
· Select Empty ASP.NET MVC Application
· Name to project ‘Sale’
· Set Location as “…\MVCPluggableDemo\MVCPluggableDemo\Areas\”
· A new project should be created in the Areas folder (previously created).
After this step, your solution should look like the one below:
As we saved new project Sale under the Areas folder, it appears as hidden folder under the MVCPluggableDemo/Areas folder in the Solution Explorer:
Adjust the MVCPluggableDemo’s RouteConfig.cs file to properly add the correct namespace overload to the routes.MapRoute() method:
We will also use the other overloaded version of routes.MapRoute() method which takes the namespace of the Controller.
Set the output directory of Sale project to ..\..\bin\ so that it’s compiled DLLs are placed in the bin directory of the MVCPluggableDemo application:
Setting related to connection strings, authentication, membership, role manager, profile, and session state are going to be placed in the web.config of your root directory. So remove all these section from the sale’s web.config.
· Create the Sale controller in the Sale project.
· Create an Index view and place the content “Welcome to Sales Module” in its header.
Now add SaleAreaRegistration.cs file (Backup file from step 6) to the root directory of the Sale project and change its namespace to MVCPluggableDemo; use the overloaded version of context.MapRoute() method which accepts the namespace of the controller to use as follows:
Now build the solution and check the MVCPluggableDemo\bin folder and you will have the compiled DLLs for the Sale module there:
Now run the application! If you have followed all the steps correctly, it will be working as expected.
You can follow the same steps and create other larger modules separately and plug them in to your application. Isn’t it simple yet such a powerful feature when it comes to product development?
Post your comments, doubts and queries below. The demo application is also available for download here. Happy coding!