AngularJS with MVC4 CRUD

CRUD using MVC Web API and AngularJS

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:

a) AngularJS.Core

b) AngularJS.Route

c) Bootstrap

d) EntityFramework

3) Create a Model named Employee in Models folder and replace the code with the following:

public class Employee

{

public int EmployeeId { get; set; }

[Required]

[StringLength(20)]

public string FirstName { get; set; }

[Required]

[StringLength(20)]

public string LastName { get; set; }

[Required]

[StringLength(100)]

public string Description { get; set; }

public float Salary { get; set; }

[Required]

[StringLength(50)]

public string Country { get; set; }

[Required]

[StringLength(50)]

public string State { get; set; }

public DateTime DateofBirth { get; set; }

public bool IsActive { get; set; }

}

public class EmployeeDbContext : DbContext

{

public EmployeeDbContext()

: base()

{

Database.SetInitializer<EmployeeDbContext>(new EmployeeDbContextInitializer());

}

public DbSet<Employee>Employees { get; set; }

}

public class EmployeeDbContextInitializer : DropCreateDatabaseIfModelChanges<EmployeeDbContext>

{

protected override void Seed(EmployeeDbContext context)

{

var list = new List<Employee>

{

new Employee { FirstName = "Rohit", LastName = "Kesharwani", Description = "Rohit Kesharwani", DateofBirth = DateTime.Now.AddYears(-23), Country = "IN", State="UP", Salary = 99999, IsActive = true },

new Employee { FirstName = "Rahul", LastName = "Singh", Description = "Rahul Singh", DateofBirth =DateTime.Now.AddYears(-25), Country = "IN", State="MP", Salary = 49999.28f, IsActive = true }

};

list.ForEach(m =>

{

context.Employees.Add(m);

});

context.SaveChanges();

base.Seed(context);

}

4) Add a connection string with same name of EmployeeDbContext in web.config:

<addname="EmployeeDbContext"connectionString="Data Source=(local);Initial Catalog=EmpDb;Integrated Security=true;"providerName="System.Data.SqlClient"/>

</connectionStrings>

5) Now create a Employee API controller to perform crud in database:

public class EmployeeController : ApiController

{

EmployeeDbContext db = new EmployeeDbContext();

// GET api/employee

[ActionName("get"), HttpGet]

public IEnumerable<Employee>Emps()

{

return db.Employees.ToList();

}

// GET api/employee/5

public Employee Get(int id)

{

return db.Employees.Find(id);

}

// POST api/employee

public HttpResponseMessage Post(Employee model)

{

if (ModelState.IsValid)

{

db.Employees.Add(model);

db.SaveChanges();

HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, model);

return response;

}

else

{

return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

}

// PUT api/employee/5

public HttpResponseMessage Put(Employee model)

{

if (ModelState.IsValid)

{

db.Entry(model).State = System.Data.Entity.EntityState.Modified;

db.SaveChanges();

HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, model);

return response;

}

else

{

return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);

}

// DELETE api/employee/5

public HttpResponseMessage Delete(int id)

{

Employee emp = db.Employees.Find(id);

if (emp == null)

{

return Request.CreateResponse(HttpStatusCode.NotFound);

}

db.Employees.Remove(emp);

db.SaveChanges();

return Request.CreateResponse(HttpStatusCode.OK, emp);

}

6) Also create a Country controller to retrieve country and its states from server side in order to implement cascading dropdown list:

public class CountryController : ApiController

{

// GET api/country

public IEnumerable<System.Web.Mvc.SelectListItem> Get()

{

List<System.Web.Mvc.SelectListItem> countries = new List<System.Web.Mvc.SelectListItem>

{

new System.Web.Mvc.SelectListItem { Text = "India", Value="IN" },

new System.Web.Mvc.SelectListItem { Text = "United States", Value="US" },

new System.Web.Mvc.SelectListItem { Text = "United Kingdom", Value="UK" },

new System.Web.Mvc.SelectListItem { Text = "Australlia", Value="CA" }

};

return countries;

}

// GET api/country/5

public IEnumerable<System.Web.Mvc.SelectListItem> Get(string id)

{

List<System.Web.Mvc.SelectListItem> states = new List<System.Web.Mvc.SelectListItem>();

switch (id)

{

case "IN":

states.Add(new System.Web.Mvc.SelectListItem { Text = "Uttar Pradesh", Value = "UP" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Madhya Pradesh", Value = "MP" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Delhi", Value = "DL" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Kanpur", Value = "KN" });

break;

case "US":

states.Add(new System.Web.Mvc.SelectListItem { Text = "California", Value = "CA" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Newyork", Value = "NY" });

break;

case "UK":

states.Add(new System.Web.Mvc.SelectListItem { Text = "London", Value = "LN" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Paris", Value = "PR" });

break;

case "CA":

states.Add(new System.Web.Mvc.SelectListItem { Text = "Sydney", Value = "SD" });

states.Add(new System.Web.Mvc.SelectListItem { Text = "Melbourne", Value = "MB" });

break;

}

return states;

}

7) Now create a Home controller and add an Index view and reference some css and JavaScript files of angularjs and bootstrap to create a view and partial views:

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

8) Index view with js and css references:

Layout = null;

}

<!DOCTYPE html>

<head>

<title>Index</title>

</head>

<body>

</div>

</body>

</html>

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:

var EmpApp = angular.module('EmpApp', [

'ngRoute',

'EmpControllers'

]);

EmpApp.config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/list', {

templateUrl: 'Employee/list.html',

controller: 'ListController'

}).

when('/create', {

templateUrl: 'Employee/edit.html',

controller: 'EditController'

}).

when('/edit/:id', {

templateUrl: 'Employee/edit.html',

controller: 'EditController'

}).

when('/delete/:id', {

templateUrl: 'Employee/delete.html',

controller: 'DeleteController'

}).

otherwise({

redirectTo: '/list'

});

}]);

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.

a) List.html

<div>

<a href="#/create" class="btn">Create</a>

</div>

<tr>

<th>Employee Id</th>

<th>First Name</th>

<th>Description</th>

<th>Salary</th>

<th>Country</th>

<th>State</th>

<th>Date of Birth</th>

<th>Is Active</th>

</tr>

<td>{{ item.EmployeeId }}</td>

<td>{{ item.FirstName }}</td>

<td>{{ item.LastName }}</td>

<td>{{ item.Description }}</td>

<td>{{ item.Salary | number: 2 }}</td>

<td>{{ item.Country }}</td>

<td>{{ item.State }}</td>

<td>{{ item.DateofBirth | date }}</td>

<td>

{{ item.IsActive ? 'Active' : 'In Active' }}</span>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

b) Edit.html

<h3>

{{ title }}</h3>

<hr />

<strong class="error">{{ error }}</strong>

First Name</label>

</div>

Last Name:</label>

</div>

Country:</label>

<option value="">-- Select Country --</option>

</select>

</div>

State:</label>

<option value="">-- Select State --</option>

</select>

</div>

Current Salary:</label>

</div>

Date of Birth:</label>

</div>

Description:</label>

</div>

<label>

<input type="checkbox" ng-model="active" />Active</label>

</div>

Submit</button>

</form>

c) Delete.html

<h3>

Are you want to sure to delete this record?</h3>

<hr />

First Name :</label>

{{ firstname }}</p>

</div>

Last Name :</label>

{{ lastname }}</p>

</div>

Country :</label>

{{ country }}</p>

</div>

State :</label>

{{ state }}</p>

</div>

Salary :</label>

{{ salary }}</p>

</div>

Date of Birth :</label>

{{ dob | date }}</p>

</div>

Description :</label>

{{ description }}</p>

</div>

{{ active ? 'Active' : 'In Active' }}</span>

</div>

Delete</button>

</div>

</form>

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:

var EmpControllers = angular.module("EmpControllers", []);

// this controller call the api method and display the list of employees

// in list.html

EmpControllers.controller("ListController", ['$scope', '$http',

function ($scope, $http) {

$http.get('/api/employee').success(function (data) {

$scope.employees = data;

});

} ]

);

// this controller call the api method and display the record of selected employee

// in delete.html and provide an option for delete

EmpControllers.controller("DeleteController", ['$scope', '$http', '$routeParams', '$location',

function ($scope, $http, $routeParams, $location) {

$scope.id = $routeParams.id;

$http.get('/api/employee/' + $routeParams.id).success(function (data) {

$scope.firstname = data.FirstName;

$scope.lastname = data.LastName;

$scope.country = data.Country;

$scope.state = data.State;

$scope.salary = data.Salary;

$scope.active = data.IsActive;

$scope.dob = data.DateofBirth;

$scope.description = data.Description;

});

$scope.delete = function () {

$http.delete('/api/Employee/' + $scope.id).success(function (data) {

$location.path('/list');

}).error(function (data) {

$scope.error = "An error has occured while deleting employee! " + data;

});

};

}

]);

// this controller call the api method and display the record of selected employee

// in edit.html and provide an option for create and modify the employee and save the employee record

EmpControllers.controller("EditController", ['$scope', '$filter', '$http', '$routeParams', '$location',

function ($scope, $filter, $http, $routeParams, $location) {

$http.get('/api/country').success(function (data) {

$scope.countries = data;

});

$scope.id = 0;

$scope.getStates = function () {

var country = $scope.country;

if (country) {

$http.get('/api/country/'+country).success(function (data) {

$scope.states = data;

});

}

else {

$scope.states = null;

}

$scope.save = function () {

var obj = {

EmployeeId: $scope.id,

FirstName: $scope.firstname,

LastName: $scope.lastname,

Country: $scope.country,

State: $scope.state,

Salary:$scope.salary,

IsActive: $scope.active,

Description: $scope.description,

DateofBirth: $scope.dob

};

if ($scope.id == 0) {

$http.post('/api/Employee/', obj).success(function (data) {

$location.path('/list');

}).error(function (data) {

$scope.error = "An error has occured while adding employee! " + data.ExceptionMessage;

});

}

else {

$http.put('/api/Employee/', obj).success(function (data) {

$location.path('/list');

}).error(function (data) {

console.log(data);

$scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;

});

}

if ($routeParams.id) {

$scope.id = $routeParams.id;

$scope.title = "Edit Employee";

$http.get('/api/employee/' + $routeParams.id).success(function (data) {

$scope.firstname = data.FirstName;

$scope.lastname = data.LastName;

$scope.country = data.Country;

$scope.state = data.State;

$scope.salary = data.Salary;

$scope.active = data.IsActive;

$scope.description = data.Description;

$scope.dob = new Date(data.DateofBirth);

$scope.getStates();

});

}

else {

$scope.title = "Create New Employee";

}

]);

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.

AngularJS with MVC4 CRUD的更多相关文章

AngularJS入门 & 分页 & CRUD示例
一.AngularJS 简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. ...
AngularJs学习笔记1——总体介绍
这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题. 1.基本概念: AngularJS是为了克服HTML在 ...
初入AngularJS基础门
作为mvvm 框架过重不适用于性能比较高的移动端的web栈, ui组建性对复杂,不利于重用 AngularJS 构建一个CRUD ( create retrieve update delete )的 ...
AngularJS入门之如何快速上手
概述: AngularJS(ng)是一个纯JS框架,AngularJS易于构建CRUD应用(CRUD意思是增删改查) 适用于以数据操作为主的SPA(Single Page Application) ...
如何编写Angular指令
[20140917]Angular:如何编写一个指令 *:first-child { margin-top: 0 !important; } body>*:last-child { margin ...
Angular开发者指南（一）入门介绍
什么是Angular AngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件.AngularJS的数据绑定和依 ...
Angular（一）
Angular开发者指南(一)入门介绍什么是AngularAngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程 ...
CRUD Operations in MVC4 Using AngularJS and WCF REST Services
Now in this article I will show how to do Create, Retrieve, Update and Delete (CRUD) operations in M ...
Spring4 MVC+ AngularJS CRUD使用$http实例
这篇文章显示了使用Spring MVC4整合AngularJS.我们将创建一个使用后端和AngularJS作为前端的纯JSP封装Spring REST API一个CRUD应用程序, 使用 $http ...

随机推荐

asp.net 运行时, 报控件不存在
Asp.net 运行时,报控件不存在,但系统中确实加入了控件z, 但是生成网站的时候,报控件不存在,输入代码的时候,this.edtxx.Text 确实可以输入原因: 系统修改的时候,作了一个备份, ...
PL/SQL数据导入导出浅谈（1）
近来需要通过PL/SQL向Oracle中导数据,特此总结一下试例表:test 字段:id;name;org; 1.直接复制粘贴(当数据量不是特别大的时候) 1)使用select * from tes ...
^M的前世今生
^M 是ascii中的'\r', 回车符,是16进制的0x0D,8进制的015,十进制的13. 回想计算机发展,旧的打字机使用两个字符来开始一个新行.首先是一个字符命令使打印头移回开始位置(回车),然 ...
利用PHPRPC以及SOAP分别实现PHP的Webserver功能
服务端:phprpc服务端 <?php /* phprpc 服务端演示 * time:2014-06-23 */ require_once 'phprpc_server.php';//引入服务端 ...
jquery easyui无法绑定下拉框内容
最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...
jquery bind()方法与live()方法的区别
jquery bind() 方法和 live() 方法都可以绑定元素事件. <!DOCTYPE html> <html> <head> <meta chars ...
select count(*)和select count(1)的区别（转）
A 一般情况下,Select Count (*)和Select Count(1)两着返回结果是一样的假如表沒有主键(Primary key), 那么count(1)比count(*)快, 如果有主键 ...
SQL的集合运算符介绍
最近学习了SQL SERVER方面的知识,毕竟做Web应用,少不了跟数据库打交道.学习的来源主要是<程序员的SQL金典>这本书. 今天介绍数据库里面的集合运算符,它是指匹配集合的每一个结果 ...
PAT-乙级-1031. 查验身份证(15)
1031. 查验身份证(15) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 一个合法的身份证号码由17位地区. ...
ajax返回正个页面

AngularJS with MVC4 CRUD

CRUD using MVC Web API and AngularJS

AngularJS with MVC4 CRUD的更多相关文章

随机推荐

热门专题