AngularJS CRUD Operation using ASP.NET MVC

I am a .NET Developer and I’m new in AngularJS. I started using AngularJS in about a week ago and I decided to create a full AngularJS CRUD Operation using ASP.NET MVC. This article will show you how I created a project with CRUD functionality using AngularJS.

For an overview of AngularJS, you can visit  AngularJS introduction from this site  https://docs.angularjs.org/guide/introduction.

AgularJS

To start, below are the summary of the steps I have done to fully implement AngularJS CRUD project.

AngularJS CRUD Operation using ASP.NET
  • Create SQL Database
  • Create CRUD Stored Procedure
  • Start a New ASP.NET MVC project
  • Create a separate Class for CRUD functions
  • Create CRUD Action Result in main controller( HomeController)
  • Design a View (Front End Design) with AngularJS App

To make this article much easier I copied all the code I have used in every associated class file in the steps above.

Let’s Start:

1. Create SQL Database:

To execute CRUD operation we need to have data storage. I assume you have already used SQL Database. Create a database and a table. In my case, I created a database named EmployeeDB and a table named EmployeeRecord. Image below.

AngularJS CRUD Operation using ASP.NET

2. Create CRUD Stored Procedure

If this is your first time using a SQL stored procedure you can refer to my previous article How to create a stored procedure.  Below are the Stored Procedures and the associated code I used.

AngularJS CRUD Operation using ASP.NET

 

Code:
DeleteEmployee Procedure

SQL Stored Procedure – InsertEmployee

SelectEmployee Procedure

UpdateEmployee Procedure

3. Start a New ASP.NET MVC project

Now, that we have already prepared our backend, which is the SQL Database and stored procedures. We can now start creating our project. Open your Visual Studio and create a new ASP.NET Web Application using MVC template. If you have no idea how to start a project you can visit my previous article on how to start in ASP.NET MVC.

4. Create a separate Class for CRUD functions

To organize our code I suggest we create a separate class containing all the connection we need to established connectivity to our SQL Stored Procedures.

But first, let’s create a folder inside our solution explorer by simply right-clicking on the project name and selecting Add > New Folder. See image below

AngularJS CRUD Operation using ASP.NET

Inside that folder create a Class. Add  Class by simply right-clicking your project name and select Add > Class. Below are the folder and class I created.

AngularJS CRUD Operation using ASP.NET

As you can see from the image above I named my folder as CRUD_function and my class as CRUD. Now, let’s start adding code. Open CRUD.cs and copy the code snippet below. This is where we put all our connection to the SQL Stored procedures.

Note:  To view your connection string you can refer to my previous article Manual viewing SQL Connection String.

CRUD.cs – Code:

5. Create CRUD Action Result in main controller( HomeController)

In this step, we will create an Action Result method in our main controller. If you are using the default MVC template, your default controller is HomeController. Located inside the folder Controller. Open HomeController. Copy the code snippet below.

HomeController.cs – Codes:

6. Design a View (Front End Design) with AngularJS App

After we have fully created all the necessary CRUD functions that we need, let’s start creating our front-end design with AngularJS framework. Navigate to your default view which is located inside the folder Views > Home > index.cshtml .Open index.cshtml and replace the code with the snippet below.

Project Preview:

AngularJS CRUD Operation using ASP.NET

Add of employee preview

AngularJS CRUD Operation using ASP.NET

Index.cshtml – Code: 

Note: with AngularJS Script

And we are done. Run your project and see if it works. You can comment below for technical questions about this article.

Thank you for reading!!

Happy Coding!!

Leave a Reply

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