Areas in ASP.NET Core

17 Feb 20226 minutes to read

This article provides a step-by-step introduction to add areas and configure the EJ2 Syncfusion component in the ASP.NET Core platform.

Areas

ASP.NET Areas is a feature that allows you to create a separate module in the application with its own set of Razor Pages, controllers, views, and models.

MVC Areas

  1. Create ASP.NET Core web application with MVC(views and controllers). Refer to this documentation to get started with ASP.NET Core application.

  2. To add the MVC Area, right-click the application in the solution explorer and choose ADD -> New Scaffolded Item.

    Add MVC Area template

    Select MVC Area from the pop-up and click Add to create an Area.

    Add MVC Area in scaffolded item

    MVC Area name

  3. Now, created MVC Area is added to the root of the application with its Controllers, Data, Models, Views folders like the below structure.

    MVC Area structure

  4. Add the controller HomeController.cs in the Areas/Products/Controllers/ folder location and then add the area attribute [Area("area name")] like below.

    Add Area attribute

  5. Add the View page in the ~/Areas/Products/Views/ folder location.

    Add view page in Area

  6. Move the Razor View Imports _ViewImports.cshtml and Razor View Start _ViewStart.cshtml files from ~/Views/ to the application root folder to share the common layout and view imports to all views.

    Common layout for all view pages

    You can also add the _ViewImports.cshtml and _ViewStart.cshtml files to the appropriate Views folder under areas if want to maintain it separately.

  7. Open the _ViewImports.cshtml file and import the Syncfusion.EJ2 package.

     @addTagHelper *, Syncfusion.EJ2

    If _ViewImports.cshtml file is added in the appropriate Views folder under the areas, import the Syncfusion.EJ2 package into each _ViewImports.cshtml file.

  8. Add the Area routing configuration before the default routing in the Startup.cs page.

         app.UseEndpoints(endpoints =>
         {
           endpoints.MapControllerRoute(
             name : "MyAreas",
             pattern : "{area:exists}/{controller=Home}/{action=Index}/{id?}"
           );
    
           ---
         });
  9. Add the client-side resources through CDN or local npm package in the <head> element of ~/Views/Shared/_Layout.cshtml layout page.

     <head>
         ....
         ....
    
         <!-- Syncfusion Essential JS 2 Styles -->
         <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2//material.css" />
    
         <!-- Syncfusion Essential JS 2 Scripts -->
         <script src="https://cdn.syncfusion.com/ej2//dist/ej2.min.js"></script>
     </head>
  10. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Views/Shared/_Layout.cshtml layout page.

    <body>
        ....
        ....
        <!-- Syncfusion Essential JS 2 ScriptManager -->
        <ejs-scripts></ejs-scripts>
    </body>

    If _ViewStart.cshtml file is added in the appropriate Views folder under the areas, add the Essential JS 2 Script Manager in that referred layout page.

  11. Now, you can add the Syncfusion Essential JS 2 components in Index.cshtml View file in the ~/Areas/Products/Views/ folder.

    <div>
        <ejs-calendar id="calendar"></ejs-calendar>
    </div>
  12. Run the application. The Essential JS 2 calendar component will render in the web browser on the Products(localhost:[port]/products/home/index) page.

ASP.NET Core calendar component output

Areas with Razor Pages

  1. Create an ASP.NET Core web application with Razor pages. Refer to this documentation to get started with ASP.NET Core application.

  2. Create the folders Areas/<area name>/Pages to the application root like the below structure.

    Add Area template

  3. Add the Razor Page in the ~/Areas/Products/Pages/ folder location.

    Add razor pages in Area

  4. Move the Razor View Imports _ViewImports.cshtml and Razor View Start _ViewStart.cshtml files from ~/Pages/ to the application root folder to share the common layout and view imports to all Razor Pages.

    Common layout for all razor pages

    You can also add the _ViewImports.cshtml and _ViewStart.cshtml files to the appropriate Pages folder under areas if want to maintain it separately.

  5. Open the _ViewImports.cshtml file and import the Syncfusion.EJ2 package.

     @addTagHelper *, Syncfusion.EJ2

    If _ViewImports.cshtml file is added in the appropriate Pages folder under the areas, import the Syncfusion.EJ2 package into each _ViewImports.cshtml file.

  6. Add the client-side resources through CDN or local npm package in the <head> element of ~/Pages/Shared/_Layout.cshtml layout page.

     <head>
         ....
         ....
    
         <!-- Syncfusion Essential JS 2 Styles -->
         <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2//material.css" />
    
         <!-- Syncfusion Essential JS 2 Scripts -->
         <script src="https://cdn.syncfusion.com/ej2//dist/ej2.min.js"></script>
     </head>
  7. Add the Essential JS 2 Script Manager at the end of <body> element in the ~/Pages/Shared/_Layout.cshtml layout page.

     <body>
         ....
         ....
         <!-- Syncfusion Essential JS 2 ScriptManager -->
         <ejs-scripts></ejs-scripts>
     </body>

    If _ViewStart.cshtml file is added in the appropriate Pages folder under the areas, add the Essential JS 2 Script Manager in that referred layout page.

  8. Now, you can add the Syncfusion Essential JS 2 components in Index.cshtml Razor Page file in the ~/Areas/Products/Pages/ folder.

     <div>
         <ejs-calendar id="calendar"></ejs-calendar>
     </div>
  9. Run the application. The Essential JS 2 calendar component will render in the web browser on the Products(localhost:[port]/products/home/index) page.

    ASP.NET Core calendar component output