Home » ASP.Net MVC Scaffolding

ASP.Net MVC Scaffolding

by Online Tutorials Library

ASP.NET MVC Scaffolding

It is a feature of ASP.NET that allows us to generate functional code rapidly. It is also known as code generator framework. It is pre-installed in Visual Studio 2013 and higher version.

To create basic CRUD application, scaffolding is best choice. It reduces time amount and generate clean code. Here, we are using scaffolding to develop CRUD application.

ASP.NET CRUD Example

This example consist couple of steps that are given below.

  1. Create New Project
  2. Select File menu from menu bar and select New->Project. We can also use shortcut Ctrl+Shift+N to create a new project.

    ASP Scaffolding 1

    This will pop up a window of that contains projects. We are selecting ASP.NET Web Application.

    ASP Scaffolding 2

    After clicking ok, it pops up a new window of templates. Here, we are selecting MVC template which is used to create MVC web application.

    ASP Scaffolding 3

    Hit ok then it will create a project and shows a progress bar as shown below.

    ASP Scaffolding 4

    CRUD Project Structure

    ASP Scaffolding 5

    We can run this application by pressing Ctrl+F5. It will produce a default index page to the browser that looks like the below.

    ASP Scaffolding 6

    To create complete crud, we need to add Models, Views and Controller in our project. Here, we are creating a Model that deals with data.

  3. Create a New Model
  4. We are creating a Student Model inside Models folder of our project. Right click on the Models folder and select add->class that will pop up a dialog box. Create class by providing name.

    ASP Scaffolding 7

    This model class has some source code, modify its code as we did below.

    // Student.cs

  5. Create a Context Class
  6. We are creating another class inside the Models folder, it is used to communicate with Entity Framework and perform database operations. This class inherits DbContext class.

    // StudentRecord.cs

  7. Add Scaffold to the Project
  8. Right click on the Controllers folder and add scaffold as we did in the screen shoot.

    ASP Scaffolding 8

    It will pop up the following dialog box. Select controller with Entity Framework.

    ASP Scaffolding 9

    And click Add button. It asks for Model and context name. Fill the entries and click ok.

    ASP Scaffolding 10

    After clicking add button, it creates a StudentsController controller and a Students folder. The Students folder contains web pages for the each CRUD operation.

    // StudentsController.cs

    The Students folder inside the View contains the following files.

    ASP Scaffolding 11

    The Index.cshtml file contains the following code.

    // Index.cshtml

    Output:

    Right click on the Index.cshtml file and select “view in browser”, this will execute file and produce the following output.

    // Index file

    This index file is used to show student record. Currently table is empty, so it does not show any data.

    ASP Scaffolding 12

    Add new Student

    We can add new student by clicking on the Create New button. This will redirect to a student form.

    ASP Scaffolding 13

    After adding it, we added two more entries then redirect back to the index file. Now, it contains three student record.

    ASP Scaffolding 14

    Update Record

    We can update record by clicking on the Edit button. This will redirect to the update form. The following screenshot shows the edit page.

    ASP Scaffolding 15

    After updating record index page looks like this:

    ASP Scaffolding 16

    Delete Record

    We can delete any record simply by clicking on the provided Delete link. Let’s delete Roman Johnfrom the table. A confirmation message is display to the user for surety.

    ASP Scaffolding 17

    After clicking on the Delete button, it redirects to the index page that contains the remaining records.

    ASP Scaffolding 18

    We can see that there are only two records are present.

You may also like