ASP.NET Core Application using MVC Template

Back to: ASP.NET Core Tutorials For Beginners and Professionals

Creating ASP.NET Core Application using MVC Template

In this article, I will discuss How to Create ASP.NET Core Web Applications using MVC (Model-View-Controller) Project Template and understand the Folder and File Structure. Please read our previous article before proceeding to this article, where we discussed ASP.NET Core Dependency Injection with Examples. 

Creating an ASP.NET Core MVC Application:

As of now, we have discussed everything using the ASP.NET Core Empty Project Template and understand the different components of an ASP.NET Core Application. We also discussed Setting up the MVC Request pipeline in the ASP.NET Core Web Application.

But the question is, do we need to manually set up everything to create an ASP.NET Core MVC Application? The answer is NO. The ASP.NET Core Framework provides one built-in Project Template called ASP.NET Core Web App (Model-View-Controller), which will create an ASP.NET Core MVC Application for us with the required MVC setup. From now on, in this ASP.NET Core MVC course, we will create the applications using the ASP.NET Core Web App (Model-View-Controller) Project template. 

Creating an ASP.NET Core Application using the MVC Project Template:

To create an ASP.NET Core Web Application with the MVC Project template. First, open Visual Studio 2022 and click the Create a new project tab, as shown in the image below.

Once you click on the Create a new Project tab, the following Create a new Project window will open. From this window, select C#, All Platforms, and Web from the respective dropdowns, as highlighted below. Select the ASP.NET Core Web App (Model-View-Controller) as the project template, and click the Next button, as shown in the image below.

Once you click on the Next button, it will open the Configure Your New Project window. Here, you need to provide the necessary information to create a new ASP.NET Core project. First, give an appropriate name for your project (SampleMVCWeb), set the location where you want to create this project, and the solution name for the ASP.NET Core Web application. And finally, click on the Create button, as shown in the image below.

Once you click the Create button, the following Additional Information window will open. Please select Framework .NET 8.0 (Long-term support) and Authentication type None. You must also check the Configure for HTTPS and do not use top-level statements check boxes. Finally, click the Create button, as shown in the image below.

Once you click the Create Button, the project will be created with the Web Application (Model-View-Controller) template, i.e., the MVC template, with the following folder and file structure.

Understanding the ASP.NET Core MVC Project File and Folder Structure:

Several key components work together in an ASP.NET Core MVC application to ensure the application runs smoothly. Let’s discuss the roles and responsibilities of each folder and file of the ASP.NET Core MVC application:

Connected Services

This section within the Solution Explorer in Visual Studio allows us to easily connect to external services such as Azure, Office 365, REST APIs, or third-party services. It helps integrate and configure APIs, SDKs, or services that your application depends on. It simplifies consuming external services by managing the necessary configurations and client code generation.

Dependencies Folder

The Dependencies folder contains the NuGet packages and other dependencies your project relies on. It includes:

• Packages: The NuGet packages that your project uses.
• SDKs: The .NET SDKs your project is targeting.
• Projects: Other projects within the same solution that your project references.

Properties Folder

This folder contains the launchSettings.json file, which is used to configure how the application is launched, including profiles for IIS Express and other environments. It includes settings for environment variables, application URL, and other settings related to how the application is run during development. You can specify different settings for different environments (like Development, Staging, and Production) in this file.

wwwroot Folder

The wwwroot folder is the root folder for all static content your application uses, such as CSS, JavaScript, and image files. Files in this folder are accessible via a URL without additional configuration, making it ideal for storing assets directly needed in client-side interactions.

Controllers Folder

The Controllers folder contains the controller classes. Controllers handle incoming HTTP requests, process them (often using services and models), and return the appropriate responses (usually views or JSON data) to the client. The methods inside controller classes are called actions and mapped to different routes defined in the application.

Models Folder

The Models folder contains classes that represent the data of the application and logic to manage the data, i.e., how the data is going to be handled. Models represent the shape of the data and its business logic. This includes validation rules, business logic, and data-access logic. These classes are also used to pass data between the controllers and views. They often correspond to database tables in applications that use Entity Framework Core. For example, a Product model might represent a Product table in a database.

Views Folder

The Views folder contains files to generate the HTML content returned to the client. It typically includes subfolders for each controller, containing the views associated with each action. These files are typically Razor view files (.cshtml), which mix HTML markup with C# code for dynamic content generation.

Shared Folder

The Shared folder contains views and partial views that are shared across multiple other views, such as layout templates (e.g., _Layout.cshtml), error pages, or partial views used across various pages of the application. The Shared folder is typically located under the Views directory.

_ViewStart.cshtml File

The _ViewStart.cshtml file is a special file in the Views folder that runs before every view in the application is executed. It is used to define common settings for all views, like specifying a common layout file (_Layout.cshtml) for the views. This makes it ideal for setting layout pages and other common settings.

_ViewImports.cshtml File

The _ViewImports.cshtml file allows us to add common namespaces and Razor directives that we want to be available in all our views, such as @using declarations for namespaces, @inject for dependency injection, and @model declarations, to be available to all views without having to add them in each view individually. It helps to avoid repeating the same imports across multiple views.

appsettings.json File

The appsettings.json file stores application configuration settings. It is a JSON file that includes settings such as connection strings, framework configuration settings, logging, and custom application settings. These settings can be loaded into the application at runtime and vary by environment.

Program.cs File

The Program.cs file is the application’s entry point. It sets up the web host that will host the app, configures services, logging, configuration sources, and the HTTP server, and configures the ASP.NET Core application pipeline and services.

ASP.NET Core MVC Setup:

The ASP.NET Core Web APP (Model-View-Controller) Project template includes the required MVC setup by default. To confirm this, open the Program.cs class file and the framework has added the required MVC Services and MVC Request processing pipeline, as shown in the image below.

namespace SampleMVCWeb
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add MVC Services to the container.
            builder.Services.AddControllersWithViews();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (!app.Environment.IsDevelopment())
            {
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            //MVC Request Processing Pipeline
            app.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");

            app.Run();
        }
    }
}

Running the MVC Application:

The ASP.NET Core Web APP (Model-View-Controller) Project template creates the Home Controller with some views. Let’s run the application and see the output, as shown below.

In the next article, I will discuss ViewData in ASP.NET Core MVC with Examples. In this article, I explain how to Create an ASP.NET Core application using the ASP.NET Core Web APP (Model-View-Controller) Project template. I hope you enjoy Creating an ASP.NET Core MVC Application using the Model-View-Controller Project Template article.