CRUD Operations Easy with New Scaffolding Feature of MVC 5 using VS2013

Introduction

I just started exploring ASP.NET MVC 5 on Visual Studio 2013 and the first thing which appears to me is the new cool “scaffolding” enhancements, rather new way of using scaffolding feature which has been provided. In this article, I would to explain this feature. By using this new feature, it is really handy for the developers for having faster development of the views, controllers, etc. Rapid Application Development (RAD) is achieved by using this scaffolding feature.

For this demo article, I am using VS Ultimate 2013 IDE (Integrated Development Environment), SQL Server 2012 with Entity Framework (EF).

The Code with Diagrams

My article goes with database first approach for EF. For different approach on EF, you can follow this blog.

1. When you click on New Project in the VS 2013 IDE, you have an option under Web to choose either VS 2012 templates or go with 2013 ASP.NET Web Application. Select the 2013 ASP.NET Web Application with the appropriate name. Say “DemoAppOnMVC5” and choose appropriate path to save it.
2. After you have selected, you would be viewing the below screen:

   

3. Once you have clicked on OK, and then select the template from the list (as per the below screen shot). Select MVC template. Additionally, you have few other options like adding Web Forms and Web API references to the project. You can add the unit tests project; Adding of unit tests project was already part of VS 2012, so nothing great in VS2013. Apart from this option, there is another option which is related to authentication. I will cover these options in the next series.

   

   Note: The list of the templates under the Web projects category is the new feature at VS 2013 which each web developer needs to know.

4. I am not going to show how to add database and models using Entity Framework, instead you can look into the web for more information at this link.

   Now once you have added the database entities to the project, you would see below classes which have been generated by the Entity Framework class generator:

   

5. Now we will add a controller by using the scaffolding feature. Right-click on the Controllers folder, choose Add->New Scaffolded Item. You choose MVC 5 Controller with views, using Entity Framework

   

   And click on Add button.

6. Give Controller a name; and at the Model class, choose the Employee class which was generated using the Entity Framework. At the Data context class, choose the AdventuresWork2012Entities which was got generated using the Entity Framework.

   

   Ensure that you have selected:

   • Generate views: If you unselect this, then only the controller class would be scaffolded. Later point either you can scaffold the views or add your own views.
   • Reference script libraries: Unselecting will result in non-reference of the script files.
   • Use a layout page: If you want to have different layout page apart from the default one, then unselect this.
   • Blank for the razor viewstart file: If you want to have different view, start file then have the name/reference to it.
7. Once you are done with the above step, you would have all the necessary classes and views for Employee model just like the below screen:

   

   The Employee controller class has all the necessary methods (actions) for CRUD operations. And the corresponding views at the Views->Employee.

8. Last thing which we need to do is to have a link at the _Layout.cshtml which will navigate to Employee controller for having list of employees:

   

9. You would find the Employees link at the menu like in the below picture. Click on it and enjoy…

   

   You would find the port-number at the URL to be different as per your configurations in your machine. Click on the Employees menu and you would find the list of Employees from the database.

10. You would find the Create New, Edit Details and Delete options in the employees list screen. You can click accordingly and perform the actions. You would notice that each operation has its corresponding view. For example, when “Create New” is clicked then user would navigate to http://localhost:12163/Employee/Create. This is the Create.cshtml at the Views->Employee.

    

    

From the above, you have noticed how it is easy for a developer to create basic CRUD views thru controllers within few clicks of mouse which is a great enhancement by Microsoft on scaffolding feature. The scaffolding feature is not limited only to MVC 5 but now with VS 2013 we can even scaffold Web forms by having MVC dependencies. And also, in the earlier version of VS, the scaffolding feature has only options to create controller or view at a time. But VS 2013 has options to create view along with controllers which is a real bonus from the development perspective.

I hope that through this article, I have provided basic information on the scaffolding feature at MVC 5 application. For more information on MVC 5 and Web API 2, you can search the internet or read my future articles.