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.

AddNewApplication.jpg

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

MVCProjectTemplate.jpg

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

AddNewItem.jpg

Step 4: Select ADO.NET Entity Data Model.

Ado.NetEnittyModel.jpg

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

DataConnection.jpg

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

DatabaseObjects.jpg

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

CricketerModel.jpg

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

SolutionExplorer.jpg

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

Scaffolding.jpg

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

AddScaffold.jpg

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

AddController.jpg

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:

CricketerController&Views.jpg

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:

AllControllers&Views.jpg

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

    CricketerView.jpg

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

    CreateCricketer.jpg

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

    NewCricketer.jpg
     

  • 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.

    CreateDetails.jpg

    Step 3: You can see the added details as shown below:

    NewDetails.jpg

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

    EditCricketer.jpg

    Step 2:
    Edit the information

    EditInformation.jpg
     
  • Delete

    To delete the information use the following procedure.

    Step 1: Click on Delete on which you need to delete the cricketer.

    DeleteCricketer.jpg

    Step 2:
    Choose Yes if you want to delete it permanently.

    delete.jpg

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.  

    Up Next
      Ebook Download
      View all
      Learn
      View all