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:
- CREATE TABLE [dbo].[Student](
- [StudentID] [int] IDENTITY(1,1) NOT NULL,
- [Name] [varchar](50) NULL,
- [Email] [varchar](500) NULL,
- [Class] [varchar](50) NULL,
- [EnrollYear] [varchar](50) NULL,
- [City] [varchar](50) NULL,
- [Country] [varchar](50) NULL,
- CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED
- (
- [StudentID] ASC
- )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
- ) ON [PRIMARY]
- GO
- SET ANSI_PADDING OFF
- GO
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:
- using System;
- using System.Collections.Generic;
- using System.Data;
- using System.Data.Entity;
- using System.Data.Entity.Infrastructure;
- using System.Linq;
- using System.Net;
- using System.Net.Http;
- using System.Web.Http;
- using System.Web.Http.Description;
- using SPA_MVC_StudentApp.Models;
- namespace SPA_MVC_StudentApp.Controllers
- {
- public class ManageStudentsInfoAPIController : ApiController
- {
- private SchoolManagementEntities db = new SchoolManagementEntities();
- // GET: api/ManageStudentsInfoAPI
- public IQueryable<Student> GetStudent()
- {
- return db.Student;
- }
- // GET: api/ManageStudentsInfoAPI/5
- [ResponseType(typeof(Student))]
- public IHttpActionResult GetStudent(int id)
- {
- Student student = db.Student.Find(id);
- if (student == null)
- {
- return NotFound();
- }
- return Ok(student);
- }
- // PUT: api/ManageStudentsInfoAPI/5
- [ResponseType(typeof(void))]
- public IHttpActionResult PutStudent(int id, Student student)
- {
- if (!ModelState.IsValid)
- {
- return BadRequest(ModelState);
- }
- if (id != student.StudentID)
- {
- return BadRequest();
- }
- db.Entry(student).State = EntityState.Modified;
- try
- {
- db.SaveChanges();
- }
- catch (DbUpdateConcurrencyException)
- {
- if (!StudentExists(id))
- {
- return NotFound();
- }
- else
- {
- throw;
- }
- }
- return StatusCode(HttpStatusCode.NoContent);
- }
- // POST: api/ManageStudentsInfoAPI
- [ResponseType(typeof(Student))]
- public IHttpActionResult PostStudent(Student student)
- {
- if (!ModelState.IsValid)
- {
- return BadRequest(ModelState);
- }
- db.Student.Add(student);
- db.SaveChanges();
- return CreatedAtRoute("DefaultApi", new { id = student.StudentID }, student);
- }
- // DELETE: api/ManageStudentsInfoAPI/5
- [ResponseType(typeof(Student))]
- public IHttpActionResult DeleteStudent(int id)
- {
- Student student = db.Student.Find(id);
- if (student == null)
- {
- return NotFound();
- }
- db.Student.Remove(student);
- db.SaveChanges();
- return Ok(student);
- }
- protected override void Dispose(bool disposing)
- {
- if (disposing)
- {
- db.Dispose();
- }
- base.Dispose(disposing);
- }
- private bool StudentExists(int id)
- {
- return db.Student.Count(e => e.StudentID == id) > 0;
- }
- }
- }
Image 21.
Image 22.
Image 23.
After adding ManageStudentInfo Controller we need to add a view.
Image 24.
Index.cshtml
- @{
- ViewBag.Title = "SPA";
- Layout = "~/Views/Shared/_Layout.cshtml";
- }
- <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
- <body data-ng-app="ApplicationModule">
- <div>
- <div>
- <div>
- <table cellpadding="5" cellspacing="6" width="100%" style="background-color:whitesmoke; border:solid 4px green;">
- <tr>
- <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="showstudents"> Show All Students </a></td>
- <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="addstudent"> Add New Student </a></td>
- <td></td>
- </tr>
- </table>
- </div>
- <div>
- <div data-ng-view></div>
- </div>
- </div>
- </div>
- </body>
- @section scripts{
- <script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
- <script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
- <script type="text/javascript" src="@Url.Content("~/MyScripts/Module.js")"></script>
- <script src="~/MyScripts/Services.js"></script>
- <script type="text/javascript" src="@Url.Content("~/MyScripts/ShowStudentsController.js")"></script>
- <script type="text/javascript" src="@Url.Content("~/MyScripts/AddStudentController.js")"></script>
- <script type="text/javascript" src="@Url.Content("~/MyScripts/EditStudentController.js")"></script>
- <script type="text/javascript" src="@Url.Content("~/MyScripts/DeleteStudentController.js")"></script>
- }
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
- <table><tr><td height="10px"></td></tr></table>
- <table cellpadding="4" cellspacing="4" width="90%" align="center"
- style="background-color: skyblue; border:solid 2px red; padding-top:20px;">
- <thead>
- <tr style="background-color:#F5F5F5;">
- <th>Student ID</th>
- <th>Name</th>
- <th>Email</th>
- <th>Class</th>
- <th>Enroll Year</th>
- <th>City</th>
- <th>Country</th>
- <th></th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr data-ng-repeat="Stud in Students">
- <td>{{Stud.studentID}}</td>
- <td>{{Stud.name}}</td>
- <td>{{Stud.email}}</td>
- <td>{{Stud.class}}</td>
- <td>{{Stud.enrollYear}}</td>
- <td>{{Stud.city}}</td>
- <td>{{Stud.country}}</td>
- <td><a ng-click="editStudent(Stud.studentID)">Edit</a></td>
- <td><a ng-click="deleteStudent(Stud.studentID)">Delete</a></td>
- </tr>
- </tbody>
- </table>
AddStudent.cshtml
- @{
- ViewBag.Title = "Add New Student";
- }
- <table><tr><td height="10px"></td></tr></table>
- <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue;
- border:solid 2px red; padding-top:20px;">
- <tr><td colspan="3" style="background-color:gray; font-size:18pt;
- font-weight:bold; height:30px; text-align:center;">Add New Student</td></tr>
- <tr>
- <td style="text-align:right;">Student ID</td>
- <td><input type="text" ng-model="StudentID" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">Name</td>
- <td><input type="text" ng-model="Name" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">Email</td>
- <td><input type="text" ng-model="Email" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">Class</td>
- <td><input type="text" ng-model="Class" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">Enroll Year</td>
- <td><input type="text" ng-model="EnrollYear" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">City</td>
- <td><input type="text" ng-model="City" /> </td>
- </tr>
- <tr>
- <td style="text-align:right;">Country</td>
- <td><input type="text" ng-model="Country" /> </td>
- </tr>
- <tr>
- <td></td>
- <td>
- <input type="button" value="Save" data-ng-click="save()" />
- </td>
- </tr>
- </table>
Shrinivas ReddyPosted Dec 5, 2018, 7:23 AM
Great work, but sorry to say your project has too many bugs. Good topic though.
Chandra MouliPosted Oct 30, 2018, 8:11 AM
Hi Rahul, it is easy to understand the single page application concept but if reload the page it will throwing 404 error like "Server Error in '/' Application.The resource cannot be found.Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly".
Bhawan BhanguPosted Jun 20, 2018, 1:34 PM
In Module.js, Just add $locationProvider.html5Mode({ enabled: true, requireBase: false });
nagamani ptPosted May 8, 2018, 5:51 AM
I like this article. It is easy to understand the MVC. Thanks for your code
Katakam PradeepPosted Mar 18, 2018, 8:03 PM
Hi Rahul, The article is very good. Can you provide the route configuration process of mvc controller and api controller ? How mvc controller talks to the web api controller?
ANTONIO HERNANDEZPosted Mar 10, 2018, 11:34 PM
Excellent article, I could build it and it worked, thanks.
ghasem dehPosted Oct 31, 2017, 3:33 AM
Hi dear rahul , i am try create first project with your tutorial but in add controller (image 19) send this error for me : http://s9.picofile.com/file/8277187968/Capture.PNG / please help me !
Vijayakumara NvPosted Oct 3, 2017, 3:17 AM
Good work, keep it up..
vaibhav parmarPosted Jul 4, 2017, 8:50 AM
How can we get the create form?I followed all the steps one by one but not getting create view here.Please correct the code as early as possible and add the code for the create Student how we call Create student http method?
Mohamed rafeequePosted May 6, 2017, 2:07 PM
Please also explain the project functionality.
Alo ChakmaPosted Feb 24, 2017, 10:43 AM
Hi Rahul, I am new to Angular. I have followed the project step by step. For some reason, the edit controller is not getting hit. Once I pass the hard-coded value for the student id, the editStudent.cshtml shows up. I wonder where the problem lies. Please let me know where I need to fix the problem.
Arvind SahuPosted Jan 5, 2017, 9:26 AM
Hi .... i am new to angular.. not too much familiar... there is some problem in tutorial.. i created step by step.. but not getting desired output.. i am not getting the Index view...with the tab- AddStudent and ShowAllStudent EditStudent and editStudent.
Alok DagarPosted Nov 29, 2016, 4:45 AM
$locationProvider.html5Mode({ enabled: true, requireBase: false });
Alok DagarPosted Nov 29, 2016, 4:45 AM
And add the following line code in module.js since the partial views were not getting rendered in the index view using the above code
Alok DagarPosted Nov 29, 2016, 4:43 AM
Geat article... working fine... for those having trouble running code.. just check.... the name of api controller should be similar to the one mentioned in services.js
Sivasankari SPosted Oct 28, 2016, 9:49 AM
Nice article
Pushpendra SinghPosted Oct 25, 2016, 1:59 AM
Hi Rahul.... M new to angular.. not too much familiar... there is some prblm in tutorial.. i created step by step.. but not getting desired output.. infact controller is not hitting... plz update the tutorial.. or send the code...Lots of refence are missing and all.... data is not fetching from database....plz help ..
greg dorianPosted Jul 29, 2016, 5:20 PM
Hi rahul, One question How do I Make a Master details like this; Person that has income and credit history using WebAPI, one master 2 details??
Pramod GehlotPosted Jul 19, 2016, 4:39 AM
Hello Rahul I am using same code according to you but i am showing all student /ManageStudentInfo/showstudents there my data does not bind, please can u send me code.
Sabina AkterPosted May 12, 2016, 7:02 AM
I am using VS2015 and do the same as you do but cant get any result and got ""Server Error in '/' Application" .cant debug and also able to see them exactly {{Stud.StudentID},{{Stud.name} in showAllStudent page......Please reply whats wrong with me?
vamsi BPosted Apr 18, 2016, 5:42 PM
I am added class model and data context .following is my error "Unable to retrieve metadata for 'Project.Models.LoginModel'. One or more validation errors were detected during model generation: System.Data.Entity.Edm.EdmEntityType: : EntityType 'LoginModel' has no key defined. Define the key for this EntityType. System.Data.Entity.Edm.EdmEntitySet: EntityType: EntitySet 'LoginModels' is based on type 'LoginModel' that has no keys defined"
vani yadavPosted Feb 24, 2016, 2:34 AM
hi iam getting HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Rupali ShindePosted Feb 8, 2016, 11:42 PM
Really good article for MVC with AngularJS, Thanks for sharing
Ankush BandPosted Nov 28, 2015, 5:45 AM
very helping tutorial sir..
Hassan FaghihiPosted Nov 8, 2015, 3:43 AM
I'm wonder if it's just new angular js, but ignoring the usage of prefix, cause 'refresh' to fail.
Bruno PétersonPosted Nov 2, 2015, 10:32 AM
Good one. Thanks!
Ganesh VermaPosted Nov 2, 2015, 4:57 AM
Can you please update the sample code this not working getting lot of reference error
Bharath PeggemPosted Oct 28, 2015, 4:54 AM
Good article Rahul Ji. am the new AngularJS, its helps to me
Sheshadri RPosted Oct 24, 2015, 1:37 PM
Nice article..How to create api for multiple table using ef..
Rahul Kumar SaxenaPosted Oct 18, 2015, 12:08 PM
Thanks Abolfazl RoshanZamir
Arweb AroshanzamirPosted Oct 18, 2015, 3:10 AM
Nice Article ..thx
Rahul Kumar SaxenaPosted Oct 5, 2015, 12:30 AM
Thank u Nilesh Jadav
Rahul Kumar SaxenaPosted Oct 5, 2015, 12:29 AM
Thank. u abhishek Singh
Nilesh JadavPosted Oct 3, 2015, 9:27 AM
Great Work sir!
Abhishek KumarPosted Sep 21, 2015, 6:53 AM
Nice article Rahul...
Rahul Kumar SaxenaPosted Aug 16, 2015, 5:54 AM
Thanks Priti Kumari
Priti KumariPosted Aug 10, 2015, 8:18 AM
Good article!!
Prashant KoliPosted Jul 27, 2015, 12:17 PM
Add <base href="/"> after <head> in _Layout.cshtml under shared folder in views.Error reason, if u go through angular js documnetation u can see for ver 1.41 this has to be added... Hope this will help you.
Prashant KoliPosted Jul 27, 2015, 12:17 PM
I had to follow below suggestion to make my code working:
Prashant KoliPosted Jul 27, 2015, 12:16 PM
Nice Article.
ajay sharmaPosted Jul 27, 2015, 6:35 AM
Hi Ahmed Amen, What have you changed for working with angularjs 1.41,i still have same issue with newer version....Plesae help
George VarghesePosted Jul 24, 2015, 5:37 PM
Add <base href="/"> after <head> in _Layout.cshtml under shared folder in views.Error reason, if u go through angular js documnetation u can see for ver 1.41 this has to be added... Hope this will help you.
Ahmed AmenPosted Jul 5, 2015, 6:54 AM
Nice Work - i edit it and it works on angularjs 1.41, but the only problem i had - when refresh page like "http://localhost:51798/showstudents" get Server Error in '/' Application - so please how i can make it works ?
PrashanthPosted Jun 13, 2015, 11:34 AM
So It this work only with Angular 1.2.18. We tried with 1.4. Can you please let us know which versions it will support.
PrashanthPosted Jun 13, 2015, 11:33 AM
Hi Rahul, It is too good post to learn AngularJS with MVC and WebAPI. Thank you so much for that.
Rahul Kumar SaxenaPosted May 21, 2015, 3:32 AM
Thanks Vinita Singh
Rahul Kumar SaxenaPosted May 21, 2015, 3:32 AM
Thanks Er Abhiyutya Shukla
Rahul Kumar SaxenaPosted May 21, 2015, 3:31 AM
Thanks Shilpa Pradeep
Rahul Kumar SaxenaPosted May 21, 2015, 3:31 AM
are you trying to access how All Studetns by writting in URL directly ???
AngeloPosted May 14, 2015, 3:06 AM
Sorry it got posted before I finished typing. If I download the attached code, the "Add Student" works but the "Show All Studetns" does not work. Thanks
AngeloPosted May 14, 2015, 3:05 AM
The resource cannot be found.Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly. Requested URL: /addstudent
AngeloPosted May 14, 2015, 3:04 AM
Thanks Rahul. I am now able to see the correct page., but when I click "Add New Student", I get the following error
Rahul Kumar SaxenaPosted May 12, 2015, 11:39 PM
Hi Angelo Check in your Route.config file inside App_Start folder .. Which Controller & Action Method you have as default...
AngeloPosted May 12, 2015, 10:14 PM
When I followed the instructions and ran the application, I get a logon page. Am I doing anything wrong?
Shilpa PradeepPosted Apr 29, 2015, 2:21 AM
Hi Rahul , Its a very good appa. however this appa works only with Angular JS 1.3.5 but not with Angular JS 1.3.15. Can you tell me where am i going wrong?
Amit KumarPosted Apr 28, 2015, 12:59 AM
How you will handle , if I have multiple MVC controller, as here your ng-view is inside Index view of ManageStudentInfo controller. in my case I have multiple controller.
Rahul Kumar SaxenaPosted Apr 24, 2015, 9:00 AM
Thanks Abolfazl RoshanZamir..
Arweb AroshanzamirPosted Apr 24, 2015, 8:39 AM
Thank you Rahul Saxena.. the bset article...very good
Rahul Kumar SaxenaPosted Apr 20, 2015, 2:04 PM
Thanks Anatoli Rostovtsev ...
Rahul Kumar SaxenaPosted Apr 20, 2015, 2:04 PM
Thanks Yazan Rawashdeh
Rahul Kumar SaxenaPosted Apr 20, 2015, 2:03 PM
Thanks Vinita Singh..
Rahul Kumar SaxenaPosted Apr 20, 2015, 2:03 PM
Agree Srinivasan K K... Here In This Application I used Partial Views...
Srinivasan K KPosted Apr 20, 2015, 2:20 AM
Rahul Saxena, Helpful article. If you don't mind I have a concern with this article. If I am anything wrong about it, clear my point. If we go for SPA then we should have views as partials for angular rather than having views in MVC. Here you've given views in MVC without use of partials. What's your point of view?
Rahul Kumar SaxenaPosted Apr 16, 2015, 7:58 AM
Thanks Krishna Mangore
krishna mangorePosted Apr 2, 2015, 5:16 AM
I am new to the angularjs with web Api, this one is gr8 article.........thank's Rahul :)
Rahul Kumar SaxenaPosted Mar 11, 2015, 2:04 PM
Thank u Gowtham Rajamanickam
Gowtham RajamanickamPosted Mar 11, 2015, 9:49 AM
good one....
Rahul Kumar SaxenaPosted Mar 10, 2015, 2:25 PM
Thanks Anatoli Rostovtsev...
Rahul Kumar SaxenaPosted Mar 10, 2015, 2:25 PM
Thanks Nishad Ebrahim...
Nishad EbrahimPosted Mar 10, 2015, 11:23 AM
well done. i was looking for some sample like this
Rahul Kumar SaxenaPosted Mar 4, 2015, 11:39 PM
thanks Harpreet Singh...
Rahul Kumar SaxenaPosted Mar 4, 2015, 11:39 PM
Thanks Vitha wadje...
Rahul Kumar SaxenaPosted Mar 4, 2015, 11:38 PM
Thanks Tom mohan..
Rahul Kumar SaxenaPosted Mar 4, 2015, 11:38 PM
Thanks Srinivasan KK..
Harpreet SinghPosted Mar 4, 2015, 2:00 PM
Very nice bro :)
Vithal WadjePosted Mar 4, 2015, 12:24 PM
nice keep it up
Tom MohanPosted Mar 4, 2015, 9:03 AM
Its awesome .
Gaurav GuptaPosted Mar 4, 2015, 8:07 AM
Can U plz explain... why $locationProvider.html5Mode(true).hashPrefix('!') used in module.js???
Srinivasan K KPosted Mar 4, 2015, 7:54 AM
well done.
Rahul Kumar SaxenaPosted Mar 4, 2015, 12:16 AM
Thanks Anatoli Rostovtsev
Rahul Kumar SaxenaPosted Mar 4, 2015, 12:15 AM
Thnanks Hemant Sudehely...
Rahul Kumar SaxenaPosted Mar 4, 2015, 12:15 AM
Thanks Mohamed Mousa
Hemant SudehelyPosted Mar 3, 2015, 1:44 PM
Good work
Mohamed MousaPosted Feb 28, 2015, 4:33 AM
Good job
Rahul Kumar SaxenaPosted Feb 26, 2015, 4:37 AM
Thanks Sumit...
Rahul Kumar SaxenaPosted Feb 26, 2015, 4:36 AM
Thanks Abhishek Maitrey...
Sumit ThakurPosted Feb 21, 2015, 3:26 PM
Great Article
Rick StonePosted Jan 27, 2015, 4:02 PM
If I bookmark a page (other than the initial starting page) then go to a bookmark (or even if I hit refresh) I will get a 404 error. How can this be avoided?
Arweb AroshanzamirPosted Jan 17, 2015, 6:10 AM
good job Rahul Saxena...very usefull...
Dinesh BeniwalPosted Jan 17, 2015, 1:54 AM
Congratulations Rahul Saxena article of the day on Asp.NET.
Michal HabalcikPosted Jan 9, 2015, 3:44 AM
One thing to add, SPAs are not really SEO friendly as google loves content-rich websites. So if a goal is to dominate in top Google's spots, SPA is not an option.
Abhishek MaitreyPosted Jan 9, 2015, 3:30 AM
nicely written article and could be a great help for a novice. well done Rahul. --@abhimaitrey
Humayun Kabir MamunPosted Dec 18, 2014, 5:18 AM
Very Helpful
Mahesh ChandPosted Dec 16, 2014, 1:23 AM
Good job Rahul.
Saineshwar BageriPosted Dec 15, 2014, 11:23 PM
nice article
Nimit JoshiPosted Dec 15, 2014, 10:50 PM
Very Nice and Informative Article....
Michal HabalcikPosted Dec 15, 2014, 3:23 PM
SPAs are now trendy and look and perform extremelly well when done properly. Great article overall, maybe some more explanation would be helpfull.
Abhishek KumarPosted Dec 15, 2014, 7:53 AM
very informative article Rahul..Thanks for this...
Manish Kumar ChoudharyPosted Dec 15, 2014, 4:42 AM
Nice one..