How to Create a Modular Web Application in ASP.NET Core?

This article explains creating of modular web application in ASP.NET Core using Areas.

Modular programming

Modular programming splits the projects into several modules based on features and considers each module as separate project.

For example, consider a requirement to create a web application for a college. The application must provide information about available facilities and courses, admission process, faculty details, achievements (both academic and extracurricular activities) so far and contact details.

You can split the requirement into 6 modules as follows: Facilities, Courses, Admission, Faculty, Achievements, and Contact Us. Each module will be considered as separate project and handled by separate team. Finally, all these projects are integrated.

Benefits of modular programming

• Rapid development – Different teams or members can work in all modules simultaneously which will reduce project completion time.
• Easily manageable code base - Code can be managed easily in each module without any complexity.
• Easy troubleshooting – you can find the troubleshooting easily as each module is considered as a separate project and can be resolves easily without making it much complex as in a single project.
• Definite responsibility for teams/members - Each team or member of the each module will have predefined responsibility in the project.

Areas in ASP.NET Core

Areas in ASP.NET Core is used for creating a modular web application, where each module is created as area in an ASP.NET Core application.

Creating ASP.NET Core Application with Areas

The following steps provide detailed information to create an ASP.NET Core web application with areas:

Adding Area in ASP.NET Core web application

1. Open the Visual Studio instance and click on Create New Project.

2. Search for ASP.NET Core and find ASP.NET Core Web App (Model-View-Controller) template from the list and click on Next.

3. In configuration window, select the location to save the application and give the name to application and click on Next.

4. Now, select the framework version of the application and click on Create, the application will be created successfully.

5. Right-click the project in solution explorer and navigate to the Add menu. Then, click New Scaffolded item in the list. In the Scaffolded item list select MVC Area and click Add.

6. Give suitable name for your area in the Add MVC Area. Here, the area is named as Grid.

Routing with areas in ASP.NET Core MVC web application

The configuration for routing is included in the Program.cs file in the root of web application. Routing path template for areas is shown in the following code snippet.

//routing path template for controllers, action methods in areas
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
      name: "areas",
      pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"
    );
});
//routing path template for controllers, action methods in the application root
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
 

You can find the complete code of Program.cs file in GitHub.

Adding ViewImports

Add all the commonly used directives in multiple views in the _ViewImports.cshtml file of the application. You should create _ViewImports.cshtml for each area, if you want to add directives for each area separately.

1. Right-click the Area and select New Item to open the Add New Item window.

2. Select ASP.NET Core > Web in left tree view and Razor ViewImports from the list of templates.

You can find the complete code of _ViewImports.cshtml file in GitHub.

Adding ViewStart

Codes that should be run before the code in each view should be added in this file. Here, added the Layout property of the application in this file instead of setting Layout to each view separately. You should create _ViewStart.cshtml for each area if you want to add for each area, since it’s not included by default.

1. Right-click the Area and select New Item to open the Add New Item window.

2. Select ASP.NET Core > Web in left tree view and Razor ViewStart from the list of templates.

You can find the complete code of _ViewStart.cshtml file in GitHub.

Maintaining layout

You can use application layout or define individual layout for Area.

1. Common Layout
2. Individual Layout

Common layout

Area uses application layout instead of separate layout. In the below code example, the common layout of application used for the Calendar Area. To add common layout, add the below code in “~/Areas/Calendar/_ViewStart.cshtml” file.

 
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 

Separate layout for each area

Area uses separate layout for the area created other than the application layout. In the below code example, the separate layout is defined for the Grid Area. To add the separate layout, define the separate layout in “~/Areas/Grid/Views/Home/Shared/_Layout.cshtml” file. To apply this separate layout to the area, add the below code in “~/Areas/Grid/_ViewStart.cshtml” file.

@{
    Layout = "_Layout";
}
 

Installing Syncfusion NuGet

To add ASP.NET Core components in the application, open the NuGet package manager is Visual Studio (Tools -> NuGet Package Manager -> Manage NuGet package for solution), search for Syncfusion.EJ2.AspNet.core and then install it.

Including Syncfusion TagHelpers in Areas

Specify the Syncfusion EJ2 Taghelper directives in _ViewImports.cshtml for using them in view pages. Each area should have a separate _ViewImports.cshtml file along with the default file in the root directory of this application.

@addTagHelper *, Syncfusion.EJ2

You can find complete code of _ViewImports.cshtml file in GitHub.

Adding Styles and Scripts reference

Now add the required theme and scripts in <head> of the ~/Views/Shared/_Layout.cshtml page to apply for the controls as below

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.1.60/material.css" />
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/20.1.60/dist/ej2.min.js"></script>
</head>
 

You can find the complete code of _Layout.cshtml file in GitHub.

Register Syncfusion Script Manager

Now, register the Syncfusion scripts in the <body> of the ~/Views/Shared/_Layout.cshtml page as below

 
<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>
 

You can find the complete code of _Layout.cshtml file in GitHub.

Adding Syncfusion Controls

Now, add the required Syncfusion control in the View of Area i.e., in ~/Areas/Grid/Views/Home/Index.cshtml page as follows

<h2>Grid Area's View</h2>
<br />
<div class="row">
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true">
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
            <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" width="130"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
            <e-grid-column field="ShippedDate" headerText="Shipped Date" format="yMd" width="140"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
 
        </e-grid-columns>
    </ejs-grid>
</div>

You can find the complete code of Index.cshtml file in GitHub.

View Sample in GitHub