Getting Started With CRUD Operations and LocalDB in MVC 5

Introduction

Microsoft released MVC 5 with Visual Studio 2013 Preview. As you know, CRUD Operations are done with MVC 4 in previous versions of Visual Studio. Now, in this article, I'll introduce you to how to create CRUD Operations by MVC 5. There are some changes in Visual Studio 2013 Preview for CRUD Operations by MVC 5.

In that context, I am developing an app in which you will learn how to access your Model's data from a Controller. For this, you need to read my previous article in which I introduced how to work with the Model Class and connection strings. For accessing your Model's Data from a Controller, you need to follow the steps given below:

  • Scaffold
  • Create
  • Read
  • Update
  • Delete
  • Connect with SQL Server LocalDB

Scaffold

Step 1: Before proceeding to the next step please build you solution. If you do not build your application then you might get an error when you add the Controller.

HomePage-in-MVC5.jpg

Step 2: Select your application in Solution Explorer.

SolutionExplorer-in-MVC5.jpg

Step 3: Right-click on your Controllers folder to add a Controller.

AddController-in-MVC5.jpg

Step 4: After selecting scaffold, select MVC 5 Controller with read/write.

AddScaffold-in-MVC5.jpg

Step 5: Enter your Controller name as CricketersController, select your Model Class and Data context class.

AddController2-in-MVC5.jpg

Click the "Add" button to add a Controller named CricketersController. (If you get an error then maybe you did not build your solution before adding the Controller.) When you click on "Add", Visual Studio automatically creates and adds many files and folders to your application. You can view files and folders in your Solution Explorer.

SolutionExplorer2-in-MVC5.jpg

You can also view you CRUD action methods like Create, Read, Update and Delete in your CricketersController.cs file. When you debug your application, open your application in the browser in URL format like "http://localhost:(your port number)/Cricketers". In that page you can Create, Read, Update and Delete your data as you want.

CricketersController-in-MVC5.jpg

Now, let's move to the CRUD Operations.

Create

Now it's time to create some data in the application. Please follow the steps given below.

Step 1: Click on "Create New link".

CricketerIndex-in-MVC5.jpg

Step 2: In the next window enter your data.

Create-in-MVC5.jpg

Step 3: Provide more data for edit and delete.

Read

It's time to read your data. To read the data, review the following steps.

Step 1: Click on "Create" after filling in the information.

Index-in-MVC5.jpg

Step 2: You can view your all data after entering.  

MvcCricketer-in-MVC5.jpg

Update

If you want to edit your data then use the following procedure.

Step 1: Choose your data and click on "Edit".

editindex-in-mvc5.jpg

Step 2: Update your information and click on "Save".

editindex2-in-mvc5.jpg

Step 3: You can view your data with the updated values.

Update-in-MVC5.jpg

Delete

Let us delete some data.

Step 1: Choose your data and click on "Delete".

Delete-in-MVC5.jpg

Step 2: In the next window click on "Delete" to delete the data permanently.

Delete2-in-MVC5.jpg

You can view your updated list.

Delete3-in-MVC5.jpg

Connect with SQL Server LocalDB

SQL Server LocalDB is the data source used by default by Visual Studio. When you work with the Entity Framework Code First approach, it automatically creates a database, if the database did not exist. You can view it from the "App_Data" folder in the Solution Explorer. Let's work with LocalDB using the following procedure.

Step 1: Click on the "Show All Files" button in the Solution Explorer and expand the "App_Data" Folder .

appdata-in-MVC5.jpg

Step 2: After clicking, you can view your mdf file in the "App_Data" Folder.

cricketers-in-MVC5.jpg

Step 3: Open the mdf file by double-clicking. It will be opened in the Server Explorer.

ServerExplorer-in-MVC5.jpg

Step 4: If you want to show your Table data then right-click on your table and select "Show Table Data".

showdata-in-MVC5.jpg

After clicking on "Show Data":

dbocricketer-in-MVC5.jpg

Step 5: You can view your table structure by right-clicking on the table and select "Table Definition".

TableDefinition-in-MVC5.jpg

After clicking on "Table Definition":

Definition-in-MVC5.jpg

Step 6: Click on "Close Connection" by right-clicking on your DbContext. You need to close the connection otherwise you might receive an error when you work with your project in the future.

CloseConnection-in-MVC5.jpg

Summary

So far in this article will help you to develop an MVC 5 application in which you can perform CRUD operations and you will also work with the database named LocalDB. So just go for it. I hope this article will help you to develop an application in MVC 5.

Thanks for reading my article and do comment.


Similar Articles