Introduction

This article shows the development of an ASP.NET Web application in an 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, and 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.

New project

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

MVCProject

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

Solution Explorer

Step 4. Select ADO.NET Entity Data Model.

Ado.Net

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

DataConnection

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

DatabaseObjects

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

Model

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

SolutionExplorer

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

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

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

AddScaffold

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

AddController

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

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

Step 4. Now, add a controller for your remaining classes, like Cricker_Details, Cricketer_ODI_Statistics, and Cricketer_Test_Statistics by performing the same steps as above. You can see all controllers 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 to the database) in the browser. To work with them use the following procedure.

Create and Read Operations

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

CricketerView

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

CreateCricketer

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

NewCricketer

Cricketer

Let's add some Cricketer with the following procedure:

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

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

NewDetails

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

Step 2. Edit the information.

EditInformation

Delete

To delete the information use the following procedure.

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

DeleteCricketer

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

Delete

Summary

This article will help you learn to create a new ASP.NET Web Application 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 make some changes in the database and create the corresponding details in the application.