In This post we will learn Basic CRUD operation using ASP.Net MVC, JSON, ADO.Net, and Stored Procedure with a sample MVC Application.

Our first step is to create and design a SQL Database, below step’s we have the demonstration of creating a database table and very basic CRUD Stored Procedure.

Let’s Create a Sample Database:
Let’s Create a Sample database named ‘SampleDB’ with SQL Management Studio.Using the ‘SampleDB’ we will create a Table name ‘tblCustomer’.

Create Table Script:

Stored Procedure:
Now the step we will go through to perform CRUD operations with stored procedure:

  1. First we will create a stored procedure (SP) to RETRIVE record from Customer table
  2. Now we will create a stored procedure( SP) to INSERT record into Customer table
  3. Now we will create another procedure (SP) to UPDATE existing data in our Customer table.
  4. The last step we will create a stored procedure to DELETE existing record from customer table.

Stored Procedure to RETRIVE Record:

Stored Procedure to INSERT Record:

Stored Procedure to UPDATE Record:

Stored Procedure to DELETE Record:

Stored Procedure to VIEW Single Record Details:

 

Let’s Start:

Open Visual Studio 2015, Click File> New > Project. In this window give a name the project and solution.

1

Click ok and another window will appear with project template, choose MVC:

2

Click ok and the visual studio will create and load a new ASP.NET application template. In this case we are using ASP.NET MVC 5. The new window will look like:

3

Our next step is to create a new model. Now right click on model folder and add new item choose data from left side menu, select ADO.NET Entity Data Model. Follow the process click next.

4

Next step is to connect to data base to generate .edmx file:

5

 

Let’s Start with View(UI):

Here are the .cshtml file of Customer CRUD operations, in the index view we have used a partial view to render the Customer list with Infinite scroll.

Index.cshtml

Partial view to view Customers:

Create.cshtml

In this view we have send a JSON object to MVC Action Method and have your Action Method return you a JSON result.

Edit.cshtml

In this view we have send a JSON object to MVC Action Method and have your Action Method return you a JSON result.

 

Let’s Start with Coding:

In this app we are going to apply CRUD operation on a single table named Customer. To do first we need to create a Controller for the operations. To add a new Controller file we need to click right mouse an option menu will appear Click Add > Controller.

6

Let’s name it CustomerController. In the controller we will create action methods to perform CRUD operations:

Below code sample is for Customer CRUD operations:

As we know earlier that we will use ADO.NET, Stored Procedure so to connect data base we need to modify our config file to add Connection String for database connection:

Now we need to create another class to use connection string and open our database connection, let’s name it dbConnector.

To perform CRUD operations we will create a separate class called CrudDataService. In this class we have five methods that will interact with database to perform CRUD operations.

Note: This is a very basic app to demonstrate the process of CRUD using MVC, who are still confused how to start, my goal was to make it simple.

Hope this will help someone 🙂 Thanks.

Download The Sample Application

One Comment

  • Sir,
    Tutorial given by you is fine. Please help me to solve my problem.
    I have implemented few things of AngularJs tutorials in my website: http://www.opsoftwaresolutions.com . I am new to MVC and angularJS. I am searching for a job. My application is working fine on localhost . In localhot it saves data in App_data folder (abc.mdf file). On remote server I have installed database on another server(ip address). But it fails to submit data on remote server. Please check “Request for a qoute” and “Career” web page on it. Here data in dropdownlist is coming from database. But fails to submit(insert). I am unable to save data on remote server database using this file upload. Please give solution to submit(insert) data

Leave a Reply

Your email address will not be published. Required fields are marked *