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.
Step 2. Select the 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 to the database.
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
- 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 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.
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.
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.
Step 2. Click on Create New. Enter some new cricketers.
Step 3. You can see your Cricketer as shown below.
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.
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 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.