Scaffolding In MVC 5

In this article we are going to learn ASP.NET MVC feature that is ‘Scaffolding’.

Introduction

It is nothing but automatic code generation framework of ASP.NET web application. It generates code for CRUD operations using the Entity Framework models. This is a simple way to create an ASP.NET MVC application with all the operations. Using this feature you can define any new learner to understand the MVC CRUD operations in a short time. We are using Visual Studio 2013 MVC 5 and Web API with Entity Framework.

The following are the steps for creating an application with ASP.NET scaffolding feature of MVC 5:

  1. Open Visual Studio 2013.

  2. Select Menu File, then New Project.

  3. Select Web, ASP.NET Web Application and Name it ‘ScaffoldingInMVC5’ - Click OK. See the following image for same:

    Web Application

  4. Next it will open for the selected template like the following:

    template

  5. Now our MVC 5 application is created, Next adding Entity Data Model for accessing data from the database using Entity Framework. For reference read my article Database First Approach in Entity Framework and how to add entity data model.

    add Entity Data Model

  6. Add Entity Data Model like the following sequence:

    For the old visual studio version, you cannot find the NuGet integrated with Visual Studio. So, you can download it and install it. You can download NuGet Package manager for Visual Studio 2013 or lower version of visual studio from this link NuGet Package Manager for Visual Studio 2013 for downloading the package.

    It will open next window like the following for adding new item, means for Entity Data Model we are adding for accessing data from the database.

    Entity Data Model

    After clicking add it will open database connection wizard. I will be skipping this step, if you want to see how to connect read my article Database First Approach in Entity Framework. The database is already present with data.

    employee model

    The above image you saw after adding the Entity Data Model, under the Models folder with name ‘EmployeeModel’. Rebuild the application.

  7. Now finally our data is ready, now time to auto generate the CRUD operation code.

  8. For opening Solution Explorer - Right Click on Controller Folder, Add, then Add New Scaffolded Item.

    New Scaffolded Item

  9. It will prompt another window with Add Scaffold option like MVC -

      1. Area
      2. Controller
      3. View.

    Here we are selecting MVC 5 Controller with Views, using Entity Framework option.

    Add New Scaffolded

  10. After clicking on Add it will ask you the name of controller like for the following image I entered ‘EmployeeController’.

    Controller with Views

    Next, Select model class means table name for generating the CRUD code. Here we are selecting ‘Employee’ class.

    EmployeeController

    Next, we are selecting the data context from the previously added Entity Data Model context.

    selecting the data context

    After selecting all these three you can see the following image: 

    add controller

  11. After clicking on add you will see the following image means adding scaffolding to the application.

    adding scaffolding

  12. Now, open the solution explorer and you can see the following image in that auto generated views with controller and CRUD operation.

    controller

  13. Next, build the application.

  14. To check the application open _Layout.cshtml file and add the link for newly created controller ‘Employee’ like the following :

    Employee

  15. Rebuild the application and click on Run or Press F5.

  16. It will show running application like the following:

    running application

  17. Now, next click on Employee link it will show you the output of Employee Index.cshtml page like the following:

    Index

    In the above image you can see the auto generated view of listing Employees. You can see various links like Create New, Edit, Details and Delete.

  18. If you click on Create link you can see the following output:

    click on Create link

    The above is the employee creation page.

  19. Next, Click on Edit link it will show you the output for editing the employee:

    editing the employee

  20. Next, Click on Details link and it will show you the output like the following employee details page:

    output

  21. Next, click on Delete link it will show you the output like following image with delete button:

    click on Delete

Congratulation! We successfully implemented the ASP.NET Scaffolding feature of MVC  5.

Summary

I hope that beginners as well as students understood ASP.NET Scaffolding feature of MVC 5 with example. If you have any suggestions regarding this article, then please contact me.

Learn It, Share It!