DEV Community

Cover image for Creating ASP.NET Core Application using MVC Template
Ulloa Silva
Ulloa Silva

Posted on

Creating ASP.NET Core Application using MVC Template

In this article, I will delve into the process of crafting an ASP.NET Core Web Application utilizing the MVC (Model-View-Controller) Project Template.

Creating an ASP.NET Core MVC Application:

The ASP.NET Core Framework offers a pre-built project template named ASP.NET Core Web App (Model-View-Controller), designed to streamline the creation of an ASP.NET Core MVC Application by automatically configuring the essential MVC components. Throughout this ASP.NET Core MVC course, we will exclusively employ the ASP.NET Core Web App (Model-View-Controller) Project Template to develop our applications. In the upcoming sections, we will explore a detailed, step-by-step guide on how to initiate this process.

Creating an ASP.NET Core Application using the MVC Project Template: To initiate the creation of an ASP.NET Core Web Application using the MVC Project template, start by launching Visual Studio 2022. Next, navigate to the "Create a new project" tab, as illustrated in the image below.

Open

Upon selecting the "Create a new Project" tab, the ensuing window is the "Create a new Project" window. In this window, opt for C# as the programming language, All Platforms as the target platform, and Web as the project type from their respective dropdown menus, as emphasized below. Highlight and choose "ASP.NET Core Web App (Model-View-Controller)," as indicated below, and proceed by clicking the "Next" button, as illustrated in the image below.

Open second

After clicking the "Next" button, the subsequent window is the "Configure Your New Project" window. In this step, furnish the essential details to initialize a new ASP.NET Core project. Begin by assigning a fitting name to your project (e.g., SampleMVCWeb), specify the desired location for project creation, and set the solution name for the ASP.NET Core Web application. Conclude the process by clicking the "Create" button, as depicted in the image below.

Open third

Upon clicking the "Create" button, the ensuing window is the "Additional Information" window. In this stage, you must make specific selections to configure your ASP.NET Core project. Choose the Framework as .NET 6.0 (Long-term support) and set the Authentication type to None. Additionally, ensure to check the boxes for Configure for HTTPS and Do not use top-level statements. Conclude this step by clicking the "Create" button, as illustrated in the image below.

Open Fourth

That concludes the process. Upon clicking the "Create" button, the project will be generated with the Web Application (Model-View-Controller) - MVC template, resulting in the following folder and file structure.

Open five

Let us understand the project structure in detail.

  1. Dependencies: This folder includes the required dependencies, i.e., the required packages to run ASP.NET Core Application. If we add new packages as per our requirement, those packages will be added inside this Dependencies folder (Packages folder, which is a sub-folder of Dependencies).

  2. Properties: This folder contains the launchsettings.json file and will only be used in the development environment. This will not be available when we publish the project and hence not available in any other environment.

  3. wwwroot: It is the project’s web root directory. The wwwroot folder going to contains all the static files such as .css, .js, and bootstrap files, etc.

  4. Controllers: All the controller classes are in the Controllers folder.

  5. Models: All the model classes go into the Models folder.

  6. Views: Contains Razor views (.cshtml) files for rendering HTML content. Razor is a view engine used in ASP.NET to create dynamic HTML.

  7. Shared: Shared folder under the Views folder contains _Layout.cshtml. It is the default layout for the ASP.NET core app. It includes app header, footer, and navigation.

  8. appsettings.json: This file will contain the settings which we want throughout the application, such as connection string, application scope global variables, etc.

  9. Program.cs: The Program class contains the Main method, the entry point to our ASP.NET Core Web Application. The Main method is responsible for setting the web host, configuring the services (Both Built-in and User-Defined), configuring the Middleware Components (Both Built-in and User-Defined), and starting the application so that the application can listen to the HTTP Incoming Requests.

MVC Setup:
The ASP.NET Core Web App (Model-View-Controller) Project template inherently incorporates the essential configuration for MVC. To verify this, open the Program.cs class file, where you will observe that the necessary MVC Services and the MVC Request processing pipeline have been automatically integrated by the framework, as depicted 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();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Running the MVC Application: The ASP.NET Core Web App (Model-View-Controller) Project template generates the Home Controller along with associated views. Let's execute the application to observe the output, as illustrated below.

Last one

I hope it will be of great use to the community

Top comments (0)