Setup MVC – Session 11

Setup MVC - Session 11

In this part we show you how you can setup MVC project and convert your ASP.NET Core Empty project to MVC Web App. In Session 10 we described MVC architecture design pattern and during this session we start our MVC Web APP implementation.

How you can convert your ASP.NET Core Empty Web APP to MVC Web APP?

  • Step 1: Add AddControllersWithViews or AddMvc service to ConfigureServices method of Startup Class.
  • Step 2: Add MVC Routing within UseEndpoints middleware
  • Step 3: Add wwwroot folder to your project’s root, to serve Static Files
  • Step 4: Add Models folder to your project’s root, to serve Models
  • Step 5: Add Views folder to your project’s root, to serve Views
  • Step 6: Add Controllers folder to your project’s root, to serve Controllers

We described different ASP.NET Core Web App templates in Session 3 of this ASP.NET Core Tutorial. Also we created an ASP.NET Core MVC Web APP during that session with available templates. But as we try to implement an ASP.NET Core MVC project from scratch, in this session we are going to convert the Empty Web App that we have been working so far in this tutorial to MVC Web app.

Add Required Service to Setup MVC

For converting ASP.NET Core Empty Web App to MVC Web APP, we need to add AddControllersWithViews or AddMvc service to ConfigureServices of Startup Class. We can implement this change through IServiceCollection class as you can see in below piece of code.

Add MVC Routing

Before ASP.NET Core Version 3.1, for serving MVC we should add UseMvcWithDefaultRoute or UseMvc middleware to our Web App. While, we implement our Web APP with ASP.NET 5.0 and using Endpoint Routing, it is recommended to add MVC Routing to UseEndpoints middleware. Below code is related to mentioned required change.

Add Required Folder Structure to Setup MVC

Moreover, We need to add Models-Views-Controllers folder as well as wwwroot folder to serve static files. As we showed you how you can add New Folder to your Web APP, you need to add mentioned folder to your Web APP by right clicking on your project root folder and select ADD->New Folder option.

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube and be in touch with us here.

You can download this Session Slides form HERE

0.00 avg. rating (0% score) - 0 votes

Tags

0 0 votes
Article Rating
guest

0 Comments
Inline Feedbacks
View all comments