Crud Operation using angular JS and Web API

In this Article we will learn basic CRUD operation using angularJS and Web API with a sample Application.

I have uploaded full source code @github, you may clone/download.

In this article we are going to explore,

  • Use Database SQL Server
  • Use MVC Application
  • Use Entity Framework  (Database First Approach)
  • Use angularJS
  • Use Asp.Net Web API

Let’s get started with step by step:

Create Database:

Before we get started with IDE let’s create a new database named “StudentDB” and create a sample table named “tblStudent”. Below is the following Script.

We have done our database. Now let’s go for create a simple MVC application

Start virtual studio, Click New Project >>

newproject1
Bellow window will be appeared on screen
projectname2
After click, New ASP.NET Project window will be appeared on screen

newasp-netweb3

Solution creation is done with load all need files. Below is the following Picture of solution structure.

projectstructure4

 

 

 

 

 

 

 

 

 

 

Let’s go Explore Solution Structure

We know that The ASP.NET MVC is a web application framework developed by Microsoft, This structure work with Model, View, and Controller.

Model:
Classes that represent the data of the solution and it enforce business.

View:
Simple world view means UI (User Interface) which is dynamically generate HTML responses.

Controller:
A Controller is the link Between User and System. It is handle incoming browser requests and after process using model data or specific task return a response to the browser.

Now we will add AngularJS in our Solution

Right button click on solution, and click Manage NuGet Packages for add angular JS reference.

angularre5
After Click Install button, Loading angularJS files.Below is the following picture

loadingangualrjs6

Now we will Create ScriptsNg folder in solution, we will create 4 folder within ScriptsNg

  1. Controller
  2. Directive
  3. Module
  4. Service

Controller:
AngularJS Controller Control Data between model and view in application, keep all Controller Script files within Controller folder.
Directive:
Angular JS Directive Extend html with new attribute, keep all Directive files within Directive Folder.
Module:
Modules are used to separate logics say services, controllers, application etc. and keep the code clean, keep all module files in module folder.
Service:
service is function, keep all customize service files within Service Folder

Now we will Create  JS file named “app.js” within module folder. Below is the following code

We will Create Controller named “StudentCtrl” within Controller folder. Below is the following codes.

We will Create StudentController class within MVC Controller folder. Below is the following codes.

We have to create view. Below is following Picture How to create view

indexview7

View has created successfully. We will add some code within index view for checking what angularJS will work. Below is the following codes.

After Run  Angular JS Work done. Below is the following result

angualr-jsresult8

 

 

 

Entity Framework:
After click References we can see that Entity Framework already existing in our solution.

Create Entity Data Model:
Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the process, we can see the edmx file and other files in your model folder. It named StudentDBEntities. Below is the following Picture of edmx model.

edmxmodel9

 

 

 

 

 

 

 

 

Now our solution is ready for crud operation.
Now we have created a folder named api in our solution. Right button click, click add and click controller then show bellow window.
addcontroller11
Add controller name. Below is the following Picture.

apiname12

 

 

 

 

Our StudentController’s api has created done.

For Save:

We have completed save method of student. We have added some code with in studentCtrl. Below is the following codes

Above code we can see “CrudService” is service we have written some HTTP Verb for  insert,update,delete, and fetch data from database. Below is the following code

Now We have to design our UI(User Interface)for Crud Operation.

Above we have already created index view. Now we will use this view. Below is the following code

Let’s go code explain:

Above code we can see that there are some unfamiliar those are used for angular JS.

  • ng-app=”myapp” Here ng-app is root element of the angularJS and “myapp” is name of app.js.
  • ng-controller=”StudentCtrl” Here ng-controller directive adds a controller to your application and StudentCtrl is name of controller we can write Code and make function and variables.
  • ng-model Here directive binds the value of HTML controls

Note:

Keep in mind that Angular JS two are way data bind.

After run we have got Bellow UI

save10

 

 

 

 

 

 

 

For Fetch Data form Database:

Our Save is done. Now we will fetch data from database. We will add GetStudents method in StudentController’s API Controller.Below is the following codes

We have added some code within studentCtrl. Below is the following code

We have added some code Index view for show students list below is the following code

We have just added data within html table

bystudentid14

For Update:

We have to create two method into StudentController’s api for update firstly we will get student info by student id after change student’s properties we have to update.

First method GetStudentByID

We have to GetStudentByID method for get specific student data by student ID StudentCtrl. Below is the following codes

Now we will check what it will work. After clicking edit button we get bellow result

17
Secondly we will update our student data so we have to Create UpdateStudent method. Below is the following codes

We will modify our SaveUpdate method for update

Now we will check what it will work. Below is the following picture

aftermofi15

For Delete:

Now we have to add delete method within StudentController’s api .Bellow is the following codes

we will add Delete method within angularJs Controller named “StudentCtrl”. Below is the following codes

After delete a student info. Below is the following picture

afterdel

 

Hope this will be very helpful 🙂

Leave a Reply

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