Single Page Application (SPA) Web API ,Using AngularJS, and MVC 5

For this you need Visual Studio 2013. You can download Visual Studio 2013 using the following link: Visual Studio Community 2013.

In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. In subsequent interactions with the page, for example the user navigates to a link or submits a form with data, a new request is sent to the server and the flow starts again. The server processes the request and sends a new page to the browser in response to the new action requested by the client.


Image 1.

In Single-Page Applications (SPAs) the entire page is loaded into the browser after the initial request, but subsequent interactions take place using Ajax requests. This means that the browser must update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.


Image 2.

Now we will learn this by creating a sample application. In this SPA example I will do CRUD operations on the Student table using the Web API and MVC.


Image 3.

The following is my Data Table in design mode:


Image 4.

The script of my Student Table is:

1. CREATE TABLE [dbo].[Student](  
2.     [StudentID] [int] IDENTITY(1,1) NOT NULL,  
3.     [Name] [varchar](50) NULL,  
4.     [Email] [varchar](500) NULL,  
5.     [Class] [varchar](50) NULL,  
6.     [EnrollYear] [varchar](50) NULL,  
7.     [City] [varchar](50) NULL,  
8.     [Country] [varchar](50) NULL,  
9.  CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED   
10. (  
11.     [StudentID] ASC  
12. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
13. ) ON [PRIMARY]  
14.   
15. GO  
16.   
17. SET ANSI_PADDING OFF  
18. GO  

Open Visual Studio 2013 then click New Project.


Image 5.

Select Web -> ASP.NET Web Application then provide I a name. Then click OK.


Image 6.

Select Single Page Application from the template option. Then click OK.

Now right-click on the Models Folder then select Add -> ADO.NET Entity Data Model.


Image 7.


Image 8.

Provide It a name.


Image 9.


Image 10.


Image 11.


Image 12.


Image 13.

Now we will add AngularJS references using NuGet. Right-click on Solution Explorer.


 Image 14.


Image 15.


Image 16.


Image 17.

Now we will add a Web API so right-click on the controller folder then select Add -> Controller.


Image 18.


Image 19.


Image 20.

ManageStudentsInfoAPIController.cs is: 

1. using System;  
2. using System.Collections.Generic;  
3. using System.Data;  
4. using System.Data.Entity;  
5. using System.Data.Entity.Infrastructure;  
6. using System.Linq;  
7. using System.Net;  
8. using System.Net.Http;  
9. using System.Web.Http;  
10. using System.Web.Http.Description;  
11. using SPA_MVC_StudentApp.Models;  
12.   
13. namespace SPA_MVC_StudentApp.Controllers  
14. {  
15.     public class ManageStudentsInfoAPIController : ApiController  
16.     {  
17.         private SchoolManagementEntities db = new SchoolManagementEntities();  
18.   
19.         // GET: api/ManageStudentsInfoAPI  
20.         public IQueryable<Student> GetStudent()  
21.         {  
22.             return db.Student;  
23.         }  
24.   
25.         // GET: api/ManageStudentsInfoAPI/5  
26.         [ResponseType(typeof(Student))]  
27.         public IHttpActionResult GetStudent(int id)  
28.         {  
29.             Student student = db.Student.Find(id);  
30.             if (student == null)  
31.             {  
32.                 return NotFound();  
33.             }  
34.   
35.             return Ok(student);  
36.         }  
37.   
38.         // PUT: api/ManageStudentsInfoAPI/5  
39.         [ResponseType(typeof(void))]  
40.         public IHttpActionResult PutStudent(int id, Student student)  
41.         {  
42.             if (!ModelState.IsValid)  
43.             {  
44.                 return BadRequest(ModelState);  
45.             }  
46.   
47.             if (id != student.StudentID)  
48.             {  
49.                 return BadRequest();  
50.             }  
51.   
52.             db.Entry(student).State = EntityState.Modified;  
53.   
54.             try  
55.             {  
56.                 db.SaveChanges();  
57.             }  
58.             catch (DbUpdateConcurrencyException)  
59.             {  
60.                 if (!StudentExists(id))  
61.                 {  
62.                     return NotFound();  
63.                 }  
64.                 else  
65.                 {  
66.                     throw;  
67.                 }  
68.             }  
69.   
70.             return StatusCode(HttpStatusCode.NoContent);  
71.         }  
72.   
73.         // POST: api/ManageStudentsInfoAPI  
74.         [ResponseType(typeof(Student))]  
75.         public IHttpActionResult PostStudent(Student student)  
76.         {  
77.             if (!ModelState.IsValid)  
78.             {  
79.                 return BadRequest(ModelState);  
80.             }  
81.   
82.             db.Student.Add(student);  
83.             db.SaveChanges();  
84.   
85.             return CreatedAtRoute("DefaultApi", new { id = student.StudentID }, student);  
86.         }  
87.   
88.         // DELETE: api/ManageStudentsInfoAPI/5  
89.         [ResponseType(typeof(Student))]  
90.         public IHttpActionResult DeleteStudent(int id)  
91.         {  
92.             Student student = db.Student.Find(id);  
93.             if (student == null)  
94.             {  
95.                 return NotFound();  
96.             }  
97.   
98.             db.Student.Remove(student);  
99.             db.SaveChanges();  
100.   
101.             return Ok(student);  
102.         }  
103.   
104.         protected override void Dispose(bool disposing)  
105.         {  
106.             if (disposing)  
107.             {  
108.                 db.Dispose();  
109.             }  
110.             base.Dispose(disposing);  
111.         }  
112.   
113.         private bool StudentExists(int id)  
114.         {  
115.             return db.Student.Count(e => e.StudentID == id) > 0;  
116.         }  
117.     }  
118. }  

Now again right-click on the Controller folder then select Add -> Controller.


Image 21.


Image 22.


Image 23.

After adding ManageStudentInfo Controller we need to add a view.


Image 24.

Index.cshtml

1. @{  
2.     ViewBag.Title = "SPA";  
3.     Layout = "~/Views/Shared/_Layout.cshtml";  
4. }  
5.   
6. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
7. <body data-ng-app="ApplicationModule">  
8.     <div>  
9.         <div>  
10.             <div>  
11.                 <table cellpadding="5" cellspacing="6" width="100%" style="background-color:whitesmoke; border:solid 4px green;">  
12.                     <tr>  
13.                         <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="showstudents"> Show All Students </a></td>  
14.                         <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="addstudent"> Add New Student </a></td>  
15.                         <td></td>  
16.                     </tr>  
17.                 </table>  
18.             </div>  
19.             <div>  
20.                 <div data-ng-view></div>  
21.             </div>  
22.         </div>  
23.     </div>  
24.   
25. </body>  
26.   
27. @section scripts{  
28.     <script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>  
29.     <script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>  
30.     <script type="text/javascript" src="@Url.Content("~/MyScripts/Module.js")"></script>  
31.     <script src="~/MyScripts/Services.js"></script>  
32.     <script type="text/javascript" src="@Url.Content("~/MyScripts/ShowStudentsController.js")"></script>  
33.     <script type="text/javascript" src="@Url.Content("~/MyScripts/AddStudentController.js")"></script>  
34.     <script type="text/javascript" src="@Url.Content("~/MyScripts/EditStudentController.js")"></script>  
35.     <script type="text/javascript" src="@Url.Content("~/MyScripts/DeleteStudentController.js")"></script>  
36. }  

Note: I will add all these scripts in the following.

Here in this example we will perform the following operations: 

• ShowAllStudent
• AddStudent
• EditStudent
• DeleteStudent

So we will add a partial view for all these. So right-click on Views then select the ManageStudentInfo folder. Like the following.


Image 25.

ShowAllStudent.cshtml

1. <table><tr><td height="10px"></td></tr></table>  
2. <table cellpadding="4" cellspacing="4" width="90%" align="center"   
3.        style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
4.     <thead>  
5.         <tr style="background-color:#F5F5F5;">  
6.             <th>Student ID</th>  
7.             <th>Name</th>  
8.             <th>Email</th>  
9.             <th>Class</th>  
10.             <th>Enroll Year</th>  
11.             <th>City</th>  
12.             <th>Country</th>  
13.             <th></th>  
14.             <th></th>  
15.         </tr>  
16.     </thead>  
17.     <tbody>  
18.         <tr data-ng-repeat="Stud in Students">  
19.             <td>{{Stud.studentID}}</td>  
20.             <td>{{Stud.name}}</td>  
21.             <td>{{Stud.email}}</td>  
22.             <td>{{Stud.class}}</td>  
23.             <td>{{Stud.enrollYear}}</td>  
24.             <td>{{Stud.city}}</td>  
25.             <td>{{Stud.country}}</td>  
26.             <td><a ng-click="editStudent(Stud.studentID)">Edit</a></td>  
27.             <td><a ng-click="deleteStudent(Stud.studentID)">Delete</a></td>  
28.         </tr>  
29.     </tbody>  
30. </table>  

Add the same for AddStudent, EditStudent, DeleteStudent partial view. And use the following code.

AddStudent.cshtml

1. @{  
2.     ViewBag.Title = "Add New Student";  
3. }  
4. <table><tr><td height="10px"></td></tr></table>  
5.   
6. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue;   
7. border:solid 2px red; padding-top:20px;">  
8.     <tr><td colspan="3" style="background-color:gray; font-size:18pt;   
9. font-weight:bold; height:30px; text-align:center;">Add New Student</td></tr>  
10.     <tr>  
11.         <td style="text-align:right;">Student ID</td>  
12.         <td><input type="text" ng-model="StudentID" />  </td>  
13.     </tr>  
14.     <tr>  
15.         <td style="text-align:right;">Name</td>  
16.         <td><input type="text" ng-model="Name" />  </td>  
17.     </tr>  
18.     <tr>  
19.         <td style="text-align:right;">Email</td>  
20.         <td><input type="text" ng-model="Email" />  </td>  
21.     </tr>  
22.     <tr>  
23.         <td style="text-align:right;">Class</td>  
24.         <td><input type="text" ng-model="Class" />  </td>  
25.     </tr>  
26.     <tr>  
27.         <td style="text-align:right;">Enroll Year</td>  
28.         <td><input type="text" ng-model="EnrollYear" />  </td>  
29.     </tr>  
30.     <tr>  
31.         <td style="text-align:right;">City</td>  
32.         <td><input type="text" ng-model="City" />  </td>  
33.     </tr>  
34.     <tr>  
35.         <td style="text-align:right;">Country</td>  
36.         <td><input type="text" ng-model="Country" />  </td>  
37.     </tr>  
38.     <tr>  
39.         <td></td>  
40.         <td>  
41.             <input type="button" value="Save" data-ng-click="save()" />  
42.         </td>  
43.     </tr>  
44.   
45. </table>  

DeleteStudent.cshtml

1. @{  
2.     ViewBag.Title = "Delete Student";  
3. }  
4.   
5. <table><tr><td height="10px"></td></tr></table>  
6.   
7. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
8.     <tr><td colspan="3" style="background-color:gray; font-size:18pt; font-weight:bold; height:30px; text-align:center;">Delete Student Information</td></tr>  
9.     <tr>  
10.   
11.         <td style="text-align:right;">Student ID</td>  
12.         <td>{{Student.studentID}}  </td>  
13.     </tr>  
14.     <tr>  
15.   
16.         <td style="text-align:right;">Name # </td>  
17.         <td> {{Student.name}}  </td>  
18.     </tr>  
19.     <tr>  
20.         <td style="text-align:right;">Email # </td>  
21.         <td>{{Student.email}}  </td>  
22.     </tr>  
23.     <tr>  
24.         <td style="text-align:right;">Class # </td>  
25.         <td>{{Student.class}}  </td>  
26.     </tr>  
27.     <tr>  
28.         <td style="text-align:right;">Enroll Year # </td>  
29.         <td>{{Student.enrollYear}}  </td>  
30.     </tr>  
31.     <tr>  
32.         <td style="text-align:right;">City # </td>  
33.         <td>{{Student.city}}  </td>  
34.     </tr>  
35.     <tr>  
36.         <td style="text-align:right;">Country # </td>  
37.         <td>{{Student.country}}  </td>  
38.     </tr>  
39.     <tr>  
40.         <td></td>  
41.         <td>  
42.             <input type="button" value="Delete" ng-click="delete()" />  
43.         </td>  
44.     </tr>  
45.   
46. </table>  

EditStudent.cshtml

1. @{  
2.     ViewBag.Title = "Edit Student";  
3. }  
4. <table><tr><td height="10px"></td></tr></table>  
5.   
6. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
7.     <tr><td colspan="3" style="background-color:gray; font-size:18pt; font-weight:bold; height:30px; text-align:center;">Edit Student Information</td></tr>  
8.     <tr>  
9.   
10.         <td style="text-align:right;">Student ID</td>  
11.         <td><input type="text" ng-model="Student.studentID" />  </td>  
12.     </tr>  
13.     <tr>  
14.   
15.         <td style="text-align:right;">Name</td>  
16.         <td><input type="text" ng-model="Student.name" />  </td>  
17.     </tr>  
18.     <tr>  
19.         <td style="text-align:right;">Email</td>  
20.         <td><input type="text" ng-model="Student.email" />  </td>  
21.     </tr>  
22.     <tr>  
23.         <td style="text-align:right;">Class</td>  
24.         <td><input type="text" ng-model="Student.class" />  </td>  
25.     </tr>  
26.     <tr>  
27.         <td style="text-align:right;">Enroll Year</td>  
28.         <td><input type="text" ng-model="Student.enrollYear" />  </td>  
29.     </tr>  
30.     <tr>  
31.         <td style="text-align:right;">City</td>  
32.         <td><input type="text" ng-model="Student.city" />  </td>  
33.     </tr>  
34.     <tr>  
35.         <td style="text-align:right;">Country</td>  
36.         <td><input type="text" ng-model="Student.country" />  </td>  
37.     </tr>  
38.     <tr>  
39.         <td></td>  
40.         <td>  
41.             <input type="button" value="Save" ng-click="save()" />  
42.             <br />  
43.             <div>{{error}}</div>  
44.         </td>  
45.     </tr>  
46.   
47. </table>  

Now, open ManageStudentInfoController.cs and provide the following code:

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Web;  
5. using System.Web.Mvc;  
6.   
7. namespace SPA_MVC_StudentApp.Controllers  
8. {  
9.     public class ManageStudentInfoController : Controller  
10.     {  
11.         // GET: ManageStudentInfo  
12.         public ActionResult Index()  
13.         {  
14.             return View();  
15.         }  
16.         public ActionResult AddNewStudent()  
17.         {  
18.             return PartialView("AddStudent");  
19.         }  
20.   
21.         public ActionResult ShowStudents()  
22.         {  
23.             return PartialView("ShowAllStudent");  
24.         }  
25.   
26.         public ActionResult EditStudent()  
27.         {  
28.             return PartialView("EditStudent");  
29.         }  
30.   
31.         public ActionResult DeleteStudent()  
32.         {  
33.             return PartialView("DeleteStudent");  
34.         }  
35.     }  
36. }  

Now add a new folder, MyScripts, to your solution.

And add the following JavaScript files. 

• Module.js
• Services.js
• ShowStudentsController.js
• AddStudentController.js
• EditStudentController.js
• DeleteStudentController.js

Now provide the following code in every JavaScript file.

Module.js

1. var app = angular.module("ApplicationModule", ["ngRoute"]);  
2.   
3. app.factory("ShareData", function () {  
4.     return { value: 0 }  
5. });  
6.   
7. //Showing Routing  
8. app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {  
9.     debugger;  
10.     $routeProvider.when('/showstudents',  
11.                         {  
12.                             templateUrl: 'ManageStudentInfo/ShowStudents',  
13.                             controller: 'ShowStudentsController'  
14.                         });  
15.     $routeProvider.when('/addstudent',  
16.                         {  
17.                             templateUrl: 'ManageStudentInfo/AddNewStudent',  
18.                             controller: 'AddStudentController'  
19.                         });  
20.     $routeProvider.when("/editStudent",  
21.                         {  
22.                             templateUrl: 'ManageStudentInfo/EditStudent',  
23.                             controller: 'EditStudentController'  
24.                         });  
25.     $routeProvider.when('/deleteStudent',  
26.                         {  
27.                             templateUrl: 'ManageStudentInfo/DeleteStudent',  
28.                             controller: 'DeleteStudentController'  
29.                         });  
30.     $routeProvider.otherwise(  
31.                         {  
32.                             redirectTo: '/'  
33.                         });  
34.       
35.     $locationProvider.html5Mode(true).hashPrefix('!')  
36. }]);  

Services.js

1. app.service("SPACRUDService", function ($http) {  
2.   
3.     //Read all Students  
4.     this.getStudents = function () {  
5.         
6.         return $http.get("/api/ManageStudentInfoAPI");  
7.     };  
8.   
9.     //Fundction to Read Student by Student ID  
10.     this.getStudent = function (id) {  
11.         return $http.get("/api/ManageStudentInfoAPI/" + id);  
12.     };  
13.   
14.     //Function to create new Student  
15.     this.post = function (Student) {  
16.         var request = $http({  
17.             method: "post",  
18.             url: "/api/ManageStudentInfoAPI",  
19.             data: Student  
20.         });  
21.         return request;  
22.     };  
23.   
24.     //Edit Student By ID   
25.     this.put = function (id, Student) {  
26.         var request = $http({  
27.             method: "put",  
28.             url: "/api/ManageStudentInfoAPI/" + id,  
29.             data: Student  
30.         });  
31.         return request;  
32.     };  
33.   
34.     //Delete Student By Student ID  
35.     this.delete = function (id) {  
36.         var request = $http({  
37.             method: "delete",  
38.             url: "/api/ManageStudentInfoAPI/" + id  
39.         });  
40.         return request;  
41.     };  
42. });  

ShowStudentsController.js

1. app.controller('ShowStudentsController', function ($scope, $location, SPACRUDService, ShareData) {  
2.     loadAllStudentsRecords();  
3.   
4.     function loadAllStudentsRecords()  
5.     {  
6.         var promiseGetStudent = SPACRUDService.getStudents();  
7.           
8.         promiseGetStudent.then(function (pl) { $scope.Students = pl.data },  
9.               function (errorPl) {  
10.                   $scope.error =  errorPl;  
11.               });  
12.     }  
13.   
14.     //To Edit Student Information  
15.     $scope.editStudent = function (StudentID) {  
16.         ShareData.value = StudentID;  
17.         $location.path("/editStudent");  
18.     }  
19.   
20.     //To Delete a Student  
21.     $scope.deleteStudent = function (StudentID) {  
22.         ShareData.value = StudentID;  
23.         $location.path("/deleteStudent");  
24.     }  
25. });  

AddStudentController.js

1. app.controller('AddStudentController', function ($scope, SPACRUDService) {  
2.     $scope.StudentID = 0;  
3.        
4.     $scope.save = function () {  
5.         var Student = {  
6.             StudentID: $scope.StudentID,  
7.             Name: $scope.Name,  
8.             Email: $scope.Email,  
9.             Class: $scope.Class,  
10.             EnrollYear: $scope.EnrollYear,  
11.             City: $scope.City,  
12.             Country: $scope.Country  
13.         };  
14.   
15.         var promisePost = SPACRUDService.post(Student);  
16.   
17.         promisePost.then(function (pl) {  
18.             alert("Student Saved Successfully.");  
19.         },  
20.               function (errorPl) {  
21.                   $scope.error = 'failure loading Student', errorPl;  
22.               });  
23.   
24.     };  
25.   
26. });  

EditStudentController.js

1. app.controller("EditStudentController", function ($scope, $location, ShareData, SPACRUDService) {  
2.     getStudent();  
3.   
4.     function getStudent() {          
5.         var promiseGetStudent = SPACRUDService.getStudent(ShareData.value);  
6.   
7.         promiseGetStudent.then(function (pl)  
8.         {  
9.             $scope.Student = pl.data;  
10.         },  
11.               function (errorPl) {  
12.                   $scope.error = 'failure loading Student', errorPl;  
13.               });  
14.     }  
15.   
16.     $scope.save = function () {  
17.         var Student = {  
18.             StudentID: $scope.Student.studentID,  
19.             Name: $scope.Student.name,  
20.             Email: $scope.Student.email,  
21.             Class: $scope.Student.class,  
22.             EnrollYear: $scope.Student.enrollYear,  
23.             City: $scope.Student.city,  
24.             Country: $scope.Student.country  
25.         };   
26.   
27.         var promisePutStudent = SPACRUDService.put($scope.Student.studentID, Student);  
28.         promisePutStudent.then(function (pl)  
29.         {  
30.             $location.path("/showstudents");  
31.         },  
32.               function (errorPl) {  
33.                   $scope.error = 'failure loading Student', errorPl;  
34.               });  
35.     };  
36.   
37. });  

DeleteStudentController.js

1. app.controller("DeleteStudentController", function ($scope, $location, ShareData, SPACRUDService) {  
2.   
3.     getStudent();  
4.     function getStudent() {  
5.   
6.         var promiseGetStudent = SPACRUDService.getStudent(ShareData.value);  
7.   
8.   
9.         promiseGetStudent.then(function (pl) {  
10.             $scope.Student = pl.data;  
11.         },  
12.               function (errorPl) {  
13.                   $scope.error = 'failure loading Student', errorPl;  
14.               });  
15.     }  
16.   
17.     $scope.delete = function () {  
18.         var promiseDeleteStudent = SPACRUDService.delete(ShareData.value);  
19.   
20.         promiseDeleteStudent.then(function (pl) {  
21.             $location.path("/showstudents");  
22.         },  
23.               function (errorPl) {  
24.                   $scope.error = 'failure loading Student', errorPl;  
25.               });  
26.     };  
27.   
28. });  

Now run the application:


Image 26.

Now click on Show All Students.


Image 27.

Now click on Add New Student.


Image 28.


Image 29.

Now click on Edit.


Image 30.


Image 31.