In this article I am going to demonstrate about how can we create basic crud (create, read, update and delete) using MVC Web API, SQL Server and Angular JS.
In this demo application our main concern will be on Angular JS data-binding and routing. I also used a Entity Framework Code First approach for database operation.
Functionalities present in this application:
a) Data Binding using Angularjs
b) Client side routing using Angular Routing
c) Cascading Dropdown using AngularJS
d) Conditional formatting using Angularjs
e) Select, Insert, Update and Delete record in sql server database.
Let’s start step by step so that we can achieve our objective at the end of this article. After completing this demo our application should look like this:
1) Employee List page:
2) Employee Page for Create and Edit a record.
3) Employee Delete Confirmation page with details:
To achieve the above, follow the steps given below:
1) Create a new asp.net mvc empty web application.
2) Add the following package in your application:
3) Create a Model named Employee in Models folder and replace the code with the following:
4) Add a connection string with same name of EmployeeDbContext in web.config:
5) Now create a Employee API controller to perform crud in database:
6) Also create a Country controller to retrieve country and its states from server side in order to implement cascading dropdown list:
8) Index view with js and css references:
I have highlighted ng-app and ng-view attribute. This is for initializing module under app and rendering of partial views inside ng-view.
9) Now create an app.js file for configuration of route and controllers. The code of app.js is given below:
10) Now add a folder named Employee under root directory of an application and following three views (html files) list.html, edit.html and delete.html.
We had setup three views for list, create, edit and delete. Now we will implement the functionalities for these three views.
11) Create a controller.js file and add the following code given below:
In this controller.js we have multiple controller for different views. Like ListController for list view (display the list of employees), Edit controller for edit view (create and modify the record), DeleteController for delete view (delete confirmation and delete the record).
Now all we have implement and successfully completed all the steps.
To test the process you can build and run an application. I hope it works fine.
Thanks for reading this article. If you have any queries and suggestion please feel free to ask me and also your valuable comments are important for me which motivates me for writing articles.