Database First Approach in MVC 5: Part 2

Introduction

This article shows development of an ASP.NET Web application in a MVC 5 project template that connects with an existing database. I have a database with which we can create a model that supports interaction with the application and the performance of Create, Read, Update, Delete (CRUD) operations.

Web Application in MVC

Let's create an ASP.NET Web Application with the MVC 5 project template with the following procedure.

Step 1: Open Visual Studio 2013 and create a new project.

Step 2: Select MVC project template to create an application.

Step 3: In your Solution Explorer, right-click on your Models to add a New Item.

Step 4: Select ADO.NET Entity Data Model.

Step 5: In the next wizard, select the data connection that was created earlier. Provide also the Connection String name.

Step 6: The next wizard will help you to choose the tables.

Step 7: Visual Studio automatically creates the Model and generates a view for the model.

You can also see in your Solution Explorer that the CricketerModel has many new files related with the database.

So far we have created a model, now we move to add the Controllers and Views for our Model. So Let's proceed with the following section:

• Adding Controller & View
• Working with View

Adding Controller & View

MVC 5 can create a Controller with the corresponding views using Entity Framework 6. We need to just use Scaffolding. So let's start with the following procedure.

Step 1: In your Solution Explorer, Right-click on your Controller to Scaffold

Step 2: In the next wizard, select the controller with the views option as shown below:

Step 3: In the next wizard enter the controller name and choose the corresponding model and the DbContext class as shown below:

Click on Add. You might get an error, if you didn't build your project. So build your solution and again follow the step.

After adding the controller, Visual Studio automatically creates a Cricketer Controller and the corresponding Cricketer View. You can see that in the following image:

Step 4: Now, add a controller for your remaining classes, like Cricker_Details, Cricketer_ODI_Statistics, Cricketer_Test_Statistics by performing the same steps as above. You can see all controller and corresponding views in the following image:

Working with View

Now your controller and view are ready. You can create and view all your data (added in the database) in the browser. To work with them use the following procedure.

Create and Read Operations

• Cricketer
  
  Let's add some Cricketer with the following procedure:

Step 1: To work with the Cricketer, select the Index.cshtml in the Cricketer view and open it in the browser

Step 2: Click on Create New. Enter some new cricketers.

Step 3: You can see your Cricketer as shown below:


 

• Cricketer Details
  
  Add some Cricketer Details with the following procedure.
  
  Step 1: Open Index.cshtml of the CricketerDetails view.
  
  Step 2: Add the details for the new cricketers.
  
  
  
  Step 3: You can see the added details as shown below:
  
  

Note: Perform the same steps for the remaining views to create the cricketer details and information.

In the preceding steps you have performed Create and Read operations. Now let's do Edit and Delete operations.

Edit & Delete Operations

• Edit
  
  To edit or update the information use the following procedure.
  
  Step 1: Click on Edit on which you need to edit the information
  
  
  
  Step 2: Edit the information
  
  
   
• Delete
  
  To delete the information use the following procedure.
  
  Step 1: Click on Delete on which you need to delete the cricketer.
  
  
  
  Step 2: Choose Yes if you want to delete it permanently.
  
  

Summary

This article will help you to learn to create a new ASP.NET Web Application and add the database model with the application and perform the CRUD operations in the Database First Approach in MVC 5. In the next part we will do some changes in the database and create the corresponding details in the application.  

• Next article: DB First Approach: Part 3 >>
   
• Previous article: << DB First Approach: Part 1