CRUD Operations in MVC4 Using AngularJS and wcf rest Services, crudmvc4

CRUD Operations in MVC4 Using AngularJS and wcf rest Services, crudmvc4

Now in this article I will show how to do Create, Retrieve, Update and Delete (CRUD) operations in MVC4 usingAngularJSAndWcf rest Services.

The following are the highlights of this article:

 

Angular

AngularJS is a structural framework for dynamic web apps. it lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. angularJS is a JavaScript framework. its goal is to augment browser-based applications with Model-View-Controller (MVC) capability, in an effort to make both development and testing easier.

 

REST

Stands Representational State Transfer. This is a protocol for exchanging data over a distributed environment. the main idea behind REST is that we shoshould treat our distributed services as a resource and we shoshould be able to use simple HTTP protocols to perform varous operations on that resource.

When we talk about the database as a resource, we usually talk in terms of Create, Retrieve, Update and Delete (CRUD) operations. now the philosophy of REST is that for a remote resource all these operations shoshould be possible and they shoshould be possible using simple HTTP protocols.

Now the basic CRUD operations are mapped to the HTTP protocols in the following manner:

• GET:Retrieve the required data (representation of data) from the remote resource.
• POST:Update the current representation of the data on the remote server.
• PUT:Insert new data.
• DELETE:Delete the specified data from the remote server.

Now we will go step-by-step.

The following is my data table.

Image 1

The following is the script of my data table:

So first we need to create the wcf rest Service. So use the following procedure.

Open Visual Studio and select "File"-> "New"-> "Project..." then select WCF in the left Side then select WCF Service Application then click OK.

Image 2

Now delete the IService. cs and Service. cs files.

Image 3

Now right-click on the project in the Solution Explorer then select Add New Item then select WCF Service then name it as EmployeeService.

Image 4

Now I will create a Data ContractStudentDataContract.

Right-click on the project in the Solution Explorer then select Add New Item then add a. cs file and use the following code:

Image 5

Now it is time to add your database to your application. so create a new folder name as the Model in your project. now right-click on the Model folder and select Add-> New Item.

Image 6

Select the ADO. NET Entity Data Model.

Image 7

Image 8

Here click on New Connection then enter your SQL Server Details then select your database.

Image 9

Image 10

Image 11

Image 12

Now open the IStudentService. cs file to define an interface:

Now make the following changes in your WCF application web. config file:

Now our wcf rest Service is ready; run the wcf rest service.

Image 13

It is now time to create a new MVC application. So right-click on your solution and add a new project as below:

Image 14

Image 15

Image 16

Now, add your WCF Service URL to your MVC application. You can host your WCF service in IIS or you can run it and discover the URL locally like the following.

Right-click on your MVC project then select Add Service Reference.

Image 17

Image 18

Now it is time to add the AngularJs reference. So right-click on your MVC project name in the Solution Explorer then select Add NuGet Packages.

Image 19

Image 20

Now create a new folder (MyScripts) under the Scripts Folder. Here add the following 3 JavaScript files:

1. Module. JS

2. Controller. JS

 

3. Services. JS

Here change the WCF Service URL according to your WCF Service.

Now add a new controller as in the following:

Right-click on the Controller folder then select Add New.

Image 21

Image 22

Now add a View.

Right-click on Index then select "Add View ...".

Image 23

Image 24

Now Index. cshtm will be:

It is now time to run the application. To run your view make the following changes in Route. config:

Image 25

Now run application as in the following:

Image 26

Image 27

Image 28