Master MVC .NET Core tutorial Build Web Apps Fast

The Model-View-Controller (MVC) architectural pattern is a widely-used framework that separates an application into different components, making it more modular, efficient, and easier to manage. ASP.NET Core, the cross-platform version of ASP.NET, fully supports this pattern. In this tutorial, we'll explore how to build an MVC application in .NET Core step by step.

Before diving into the MVC pattern, let's first ensure you have the necessary tools and environment set up. You'll need to have .NET Core SDK installed on your machine, which you can download from the official Microsoft website. Once installed, you're ready to start creating your first application.

Setting Up Your Project

The first thing you'll do is create a new project using the ASP.NET Core MVC template in Visual Studio or via the command line. This template comes with the basic structure for an MVC application, including the necessary controllers, views, and models.

When creating the project, make sure to select ".NET Core" as the framework and "MVC" as the project template. This will ensure you have the correct project structure and dependencies for an MVC application.

Project Structure

Once your project is created, you'll see a specific structure in your Solution Explorer. The root of your project contains the following folders and files:

• wwwroot: contains static files such as CSS, JavaScript, and image files.
• Properties: contains user-specific properties and configuration files, such as launchSettings.json.
• App_Data: folder that's used to store application-specific data and isn't included in the final published site.
• Controllers: stores the Controllers for your application, responsible for handling user interactions and business logic.
• Models: contains the C# classes that represent the data structures and business logic of your application.
• Views: stores the Razor views, which define how your data is presented to the user.
• Startup.cs: the entry point for your application, where you configure services and middleware.
• Program.cs: the main entry point for the .NET Core application.

Running Your Application

To run your application, simply press F5 in Visual Studio, or use the "dotnet run" command in the terminal. Your browser should launch, displaying your application's default route. This route is set in the Startup.cs file within the Configure method:

app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); } );

Building Your MVC Application

Now that you have a solid foundation for your application, let's dive into building out your MVC components.

The first component we'll create is a simple model. In the Models folder, create a new class called Product.cs. This class will represent a simple product with properties for Id, Name, and Price.

Creating Controllers

Next, we'll create a controller to handle requests related to our product. Right-click on the Controllers folder and select "Add" > "Controller...". Choose "MVC Controller with views, using Entity Framework" and name it "ProductController".

Within your controller, create actions for creating, reading, updating, and deleting products (CRUD operations). Here's an example of an Index action that retrieves a list of products:

Creating Views

With your controller actions in place, it's time to create the corresponding views. Right-click on the Controllers folder, select "Add" > "View", and choose the "Create" template. This will create both the view and the corresponding Razor-generated view model.

Now, let's create a simple view to display the list of products. Open the generated Index.cshtml view and replace its content with the following:

```html @model List

Products

@foreach (var product in Model) {
• @product.Name - $@product.Price
}

```

This view uses the @foreach loop to iterate over the list of products and display their names and prices.

Linking Routes

Finally, let's ensure that your default route links to your new product controller. Open the Startup.cs file and update the default route pattern to match your controller and action:

```csharp endpoints.MapControllerRoute( name: "default", pattern: "{controller=Product}/{action=Index}/{id?}"); ```

With this change, your application will now display the list of products at the default route. Refreshing your browser should now show the products generated by your new controller and view.

...