You are on page 1of 18

AngularJS Operaciones CRUD Usando ASP.

NET
MVC
En este artículo, crearemos ASP.NET MVC utilizando Angular.js y realizaremos las operaciones
de creación, lectura, actualización y eliminación de CRUD utilizando Entity Framework.
Primero, creamos un proyecto MVC. Ir a Archivo-> Nuevo-> Proyecto y seleccione "Aplicación
web ASP.NET".

Ahora, seleccione la plantilla MVC para el proyecto.

En la ventana del Explorador de soluciones, podemos ver la estructura de nuestro proyecto.


Ahora, agregamos las clases modelo en nuestro proyecto. Tenemos una tabla de empleados que
utilizaremos en nuestro proyecto e implementaremos la operación CRUD.

CREATE TABLE [dbo].[Employee](

1. [Emp_Id] [int] IDENTITY(1,1) NOT NULL,


2. [Emp_Name] [varchar](max) NULL,
3. [Emp_City] [varchar](max) NULL,
4. [Emp_Age] [int] NULL,
5. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
6. (
7. [Emp_Id] ASC
8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LO
CKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
9. ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
10.
11. GO
Para la operación CRUD de la base de datos, utilizaremos el enfoque Entity Framework Data
First. Para ello, haga clic derecho en la carpeta "Modelo" y haga clic en la opción "Nuevo
elemento".

Ahora, seleccione " ADO.NET Entity Data Model " y asígnele el nombre de "EmployeeModel".
Establecer una conexión con el motor de "Base de datos de SQL Server".

Seleccione el Asistente de modelo de datos de entidad de la tabla de empleados y haga clic en


el botón Finalizar.

Ahora, vaya a la carpeta de modelo de su proyecto donde puede ver que se ha creado la clase
de modelo de empleado. Por lo tanto, ha creado con éxito una conexión con la base de datos.
Después de esto, descargamos e instalamos el paquete AngularJS. Haga clic derecho en Nombre
del proyecto y seleccione la opción "Administrar paquetes NuGet" y descargue los paquetes
AngularJS.

En la carpeta Scripts, puede encontrar que los archivos de AngularJS se han instalado
correctamente.

Ahora, creamos el Controlador de Empleados. Por lo tanto, haga clic derecho en la carpeta
Controlador y cree un Controlador vacío.
Ahora, copie y pegue el siguiente código en la sección Controlador del empleado.

1. using AngularCRUD.Models;
2. using System;
3. using System.Collections.Generic;
4. using System.Linq;
5. using System.Web;
6. using System.Web.Mvc;
7. namespace AngularCRUD.Controllers {
8. public class EmployeeController: Controller {
9. // GET: Employee
10. public ActionResult Index() {
11. return View();
12. }
13. /// <summary>
14. ///
15. /// Get All Employee
16. /// </summary>
17. /// <returns></returns>
18. public JsonResult Get_AllEmployee() {
19. using(DemoEntities Obj = new DemoEntities()) {
20. List < Employee > Emp = Obj.Employees.ToList();
21. return Json(Emp, JsonRequestBehavior.AllowGet);
22. }
23. }
24. /// <summary>
25. /// Get Employee With Id
26. /// </summary>
27. /// <param name="Id"></param>
28. /// <returns></returns>
29. public JsonResult Get_EmployeeById(string Id) {
30. using(DemoEntities Obj = new DemoEntities()) {
31. int EmpId = int.Parse(Id);
32. return Json(Obj.Employees.Find(EmpId), JsonRequestBehavior.AllowGet);
33. }
34. }
35. /// <summary>
36. /// Insert New Employee
37. /// </summary>
38. /// <param name="Employe"></param>
39. /// <returns></returns>
40. public string Insert_Employee(Employee Employe) {
41. if (Employe != null) {
42. using(DemoEntities Obj = new DemoEntities()) {
43. Obj.Employees.Add(Employe);
44. Obj.SaveChanges();
45. return "Employee Added Successfully";
46. }
47. } else {
48. return "Employee Not Inserted! Try Again";
49. }
50. }
51. /// <summary>
52. /// Delete Employee Information
53. /// </summary>
54. /// <param name="Emp"></param>
55. /// <returns></returns>
56. public string Delete_Employee(Employee Emp) {
57. if (Emp != null) {
58. using(DemoEntities Obj = new DemoEntities()) {
59. var Emp_ = Obj.Entry(Emp);
60. if (Emp_.State == System.Data.Entity.EntityState.Detached) {
61. Obj.Employees.Attach(Emp);
62. Obj.Employees.Remove(Emp);
63. }
64. Obj.SaveChanges();
65. return "Employee Deleted Successfully";
66. }
67. } else {
68. return "Employee Not Deleted! Try Again";
69. }
70. }
71. /// <summary>
72. /// Update Employee Information
73. /// </summary>
74. /// <param name="Emp"></param>
75. /// <returns></returns>
76. public string Update_Employee(Employee Emp) {
77. if (Emp != null) {
78. using(DemoEntities Obj = new DemoEntities()) {
79. var Emp_ = Obj.Entry(Emp);
80. Employee EmpObj = Obj.Employees.Where(x => x.Emp_Id == Emp.Emp_Id).FirstOrDefault();
81. EmpObj.Emp_Age = Emp.Emp_Age;
82. EmpObj.Emp_City = Emp.Emp_City;
83. EmpObj.Emp_Name = Emp.Emp_Name;
84. Obj.SaveChanges();
85. return "Employee Updated Successfully";
86. }
87. } else {
88. return "Employee Not Updated! Try Again";
89. }
90. }
91. }
92. }

Después de crear el Controlador, ahora, creamos una Vista. Haga clic derecho en el método de
índice y cree una vista vacía.
Pegue el siguiente código en la vista de índice:

1. @{
2. ViewBag.Title = "Index";
3. }
4.
5. <style>
6. .btn-space {
7. margin-left: -5%;
8. background-color: cornflowerblue;
9. font-size: large;
10. }
11. </style>
12. <h2>Index</h2>
13. <div ng-app="myApp">
14. <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
15. <p class="divHead">List of Employee</p>
16. <table cellpadding="12" class="table table-bordered table-hover">
17. <tr>
18. <td>
19. <b>ID</b>
20. </td>
21. <td>
22. <b>Name</b>
23. </td>
24. <td>
25. <b>City</b>
26. </td>
27. <td>
28. <b>Age</b>
29. </td>
30. <td>
31. <b>Actions</b>
32. </td>
33. </tr>
34. <tr ng-repeat="Emp in employees">
35. <td>
36. {{Emp.Emp_Id}}
37. </td>
38. <td>
39. {{Emp.Emp_Name}}
40. </td>
41. <td>
42. {{Emp.Emp_City}}
43. </td>
44. <td>
45. {{Emp.Emp_Age}}
46. </td>
47. <td>
48. <input type="button" class="btn btn-warning" value="Update" ng-
click="UpdateEmp(Emp)" />
49. <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
50. </td>
51. </tr>
52. </table>
53. <div class="form-horizontal" role="form">
54. <div class="container">
55. <div class="row">
56. <h2>
57. <span id="spn">Add New Employee</span>
58. </h2>
59. </div>
60. <div class="row">
61. <div class="col-sm-6 col-lg-4">
62. <div class="form-group">
63. <label class="col-md-4 control-label">Name:</label>
64. <div class="col-md-8">
65. <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-
model="EmpName">
66. </div>
67. </div>
68. </div>
69. <div class="col-sm-6 col-lg-4">
70. <div class="form-group">
71. <label class="col-md-4 control-label">City:</label>
72. <div class="col-md-8">
73. <input type="text" class="form-control" id="inputPassword" placeholder="City" ng-
model="EmpCity">
74. </div>
75. </div>
76. </div>
77. <div class="col-sm-6 col-lg-4">
78. <div class="form-group">
79. <label class="col-md-4 control-label">Age:</label>
80. <div class="col-md-8">
81. <input type="text" class="form-control" id="inputLabel3" placeholder="Age" ng-
model="EmpAge">
82. </div>
83. </div>
84. </div>
85. </div>
86. <div class="row">
87. <div class="col-sm-6 col-lg-4">
88. <input type="button" id="btnSave" class="form-control btn-
space" value="Submit" ng-click="InsertData()" />
89. </div>
90. </div>
91. </div>
92. </div>
93. </div>
94. @Html.Hidden("EmpID_")
95.
96. </div>

Para las operaciones CRUD en AngularJS, creamos un archivo JavaScript, escribimos el código en
ese archivo e implementamos este archivo en nuestra Vista de índice.
Primero, cree un archivo JavaScript y copie el siguiente código.

JavaScript code

1. var app = angular.module("myApp", []);


2. app.controller("myCtrl", function($scope, $http) {
3. debugger;
4. $scope.InsertData = function() {
5. var Action = document.getElementById("btnSave").getAttribute("value");
6. if (Action == "Submit") {
7. $scope.Employe = {};
8. $scope.Employe.Emp_Name = $scope.EmpName;
9. $scope.Employe.Emp_City = $scope.EmpCity;
10. $scope.Employe.Emp_Age = $scope.EmpAge;
11. $http({
12. method: "post",
13. url: "http://localhost:39209/Employee/Insert_Employee",
14. datatype: "json",
15. data: JSON.stringify($scope.Employe)
16. }).then(function(response) {
17. alert(response.data);
18. $scope.GetAllData();
19. $scope.EmpName = "";
20. $scope.EmpCity = "";
21. $scope.EmpAge = "";
22. })
23. } else {
24. $scope.Employe = {};
25. $scope.Employe.Emp_Name = $scope.EmpName;
26. $scope.Employe.Emp_City = $scope.EmpCity;
27. $scope.Employe.Emp_Age = $scope.EmpAge;
28. $scope.Employe.Emp_Id = document.getElementById("EmpID_").value;
29. $http({
30. method: "post",
31. url: "http://localhost:39209/Employee/Update_Employee",
32. datatype: "json",
33. data: JSON.stringify($scope.Employe)
34. }).then(function(response) {
35. alert(response.data);
36. $scope.GetAllData();
37. $scope.EmpName = "";
38. $scope.EmpCity = "";
39. $scope.EmpAge = "";
40. document.getElementById("btnSave").setAttribute("value", "Submit");
41. document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";
42. document.getElementById("spn").innerHTML = "Add New Employee";
43. })
44. }
45. }
46. $scope.GetAllData = function() {
47. $http({
48. method: "get",
49. url: "http://localhost:39209/Employee/Get_AllEmployee"
50. }).then(function(response) {
51. $scope.employees = response.data;
52. }, function() {
53. alert("Error Occur");
54. })
55. };
56. $scope.DeleteEmp = function(Emp) {
57. $http({
58. method: "post",
59. url: "http://localhost:39209/Employee/Delete_Employee",
60. datatype: "json",
61. data: JSON.stringify(Emp)
62. }).then(function(response) {
63. alert(response.data);
64. $scope.GetAllData();
65. })
66. };
67. $scope.UpdateEmp = function(Emp) {
68. document.getElementById("EmpID_").value = Emp.Emp_Id;
69. $scope.EmpName = Emp.Emp_Name;
70. $scope.EmpCity = Emp.Emp_City;
71. $scope.EmpAge = Emp.Emp_Age;
72. document.getElementById("btnSave").setAttribute("value", "Update");
73. document.getElementById("btnSave").style.backgroundColor = "Yellow";
74. document.getElementById("spn").innerHTML = "Update Employee Information";
75. }
76. })

Ahora, proporcione las referencias del archivo AngularJS y AngularCode que creamos en la vista de índice.

Ahora, creo que nuestro proyecto está listo para trabajar. Por lo tanto, vamos a ejecutar la
aplicación. Presione F5 y podrá ver que la siguiente pantalla estará visible en su navegador.
Ahora, conoceremos todas las operaciones de CRUD (crear, leer, actualizar y eliminar) y
entenderemos cómo funcionan.

Obtener todos los registros de los empleados


Cuando ejecutamos la aplicación, al principio, todos los registros de los empleados se
recuperarán y se mostrarán en la cuadrícula. Puede ver que en la directiva "ng-init", llamamos
el registro "getAllData". Este método es responsable de la recuperación de todos los registros.

En el archivo “AngularCode” puedes encontrar este método.

En el método "GetAllData", usamos el servicio $ http de AngularJS y llamamos al método


"Get_AllEmployee" del controlador "Employee".
El código del método "Get_AllEmployee" es el siguiente.
En este método, obtenemos los registros de todos los empleados de la entidad "Empleado" y
los aprobamos como resultado JSON.

Agregar nuevo empleado

Cuando hacemos clic en el botón "Enviar", se llamará al método "Insertar Datos".

En este método, recuperamos los datos del campo Nombre, Ciudad y Edad y los insertamos en
el objeto "Empleado". Llamamos al método "Insert_Employee" de Employee Controller y
pasamos el objeto "Employe" como parámetro.
En la sección del controlador, agregamos el objeto "Empleado" a la entidad Empleado.

Y pasar el mensaje de confirmación como confirmación. Ahora, puede ver que el registro de
"Sandeep" se agregó correctamente.
Eliminar Registro del Empleado

Estamos usando la directiva ng-repeat e insertando el nombre del empleado, la edad, la


identificación y la información de la ciudad en la tabla. Puedes ver que estamos creando en una
columna extra ("Acción"). En esta columna, estamos agregando dos botones para el comando
"Eliminar" y "Actualizar" y en la directiva ng-click, estamos llamando al método "EliminarEmp"
para eliminar la operación y "ActualizarEmp" para la operación de actualización. En ambos
métodos, estamos pasando el Objeto de Empleado

En el método "DeleteEmp", estamos llamando a la "Delete_Employee" del controlador


utilizando "$ http",
En el método "Delete_Employee", estamos eliminando el registro de empleado de la tabla
"Employee".

Intentemos eliminar el registro del empleado "Pardeep".


Actualizar el registro del empleado

En el comando Actualizar, estamos llamando al método "UpdateEmp" en el que estamos


insertando la información del empleado en los cuadros de texto y cambiando las propiedades
de la sección de botones y tramas.

Vamos a hacer clic en el botón Actualizar para el empleado "Nitin".

Ahora, cambiamos el nombre y la ciudad de este empleado.

Cuando hacemos clic en el botón "Actualizar", luego en el método "Insertar Datos" del archivo
AngularCode se nos llamará y la sección "else" se ejecutará porque el valor del botón no es igual
a "Enviar".
En el código anterior, estamos llamando al método "Update_Employee" del controlador. En el
método "Update_Employee", actualizamos el registro para el empleado y enviamos el mensaje
de confirmación.

Puede verificar que la información del empleado “Nitin” haya sido actualizada.

Espero que os haya gustado el artículo. Gracias por leer el artículo. Si tiene alguna duda sobre
nuestra consulta, entonces déjelo en la sección de comentarios.