asp.net mvc, angularjs crud for azerbaijan technical university

Azerbaijan Technical University

ASP.NET MVC, ANGULARJS CRUD US-ING WEB

API, EF WITH STORED PROCEDURE

Date : 2017/12/01

By : SYED SHANUEmail: [email protected]

About Me

My Name is Syed Shanu From Madurai, Tamil Nadu, India Microsoft MVP Code Project MVP Csharp Corner MVP 10+ years of Experience as Software Engineer Working as a Senior Software Engineer at Zemax Solution ,Seoul ,Korea Blogger | Author | Speaker

Session Prerequisites

Visual Studio 2015

SQL Server 2014

Agenda

Introduction to MVC Introduction to AngularJs Introduction to SQL Server Introduction to WEB API Entity Framework Simple CRUD web application using MVC,AngularJs,Web API ,EF

and SQL Server

MVC (Model View Controller)

Database

Controller

Model

View

User

ANGULARJS

Data Binding

Providers

Validators

Directives

Controllers

Modules

Expressions

Services

Dependency Injection

Filters

Scope

ANGULARJS

Factories

<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><body><div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p></div></body></html>

ANGULARJS<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { }); </script> </head> <body ng-controller="myAngularController"> <table> <tbody ng-repeat="Numbers in [1, 2, 3, 4,5,6,7,8,9,10] "> <tr> <td> {{Numbers}} </td> </tr> </tbody> </table> <table> <tbody ng-repeat="Names in ['Shanu','Afraz','Raja','Afreen','Mak','Albert'] "> <tr> <td> {{Names}} </td> </tr> </tbody> </table> </body>

Data Bind

ng-repeat

<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { $scope.todayDate = new Date(); $scope.Names=[{name:'Shanu'}, {name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'}, {name:'Mak'}, {name:'Raja'}]; }); </script> </head> <body ng-controller="myAngularController" > Date : {{todayDate}} <br/> Filter By Name : <input type="text" ng-model="myNameFilters"> <table border=1> <td ng-click="predicate = 'name'; reverse=!reverse"> <b>Toy Code</b> </td> </tr> <tbody ng-repeat="nme in Names | filter:myNameFilters | orderBy:predicate:reverse"> <tr> <td> {{nme.name}} </td> </tr> </tbody> </table> </body> </html>

ANGULARJS<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://code.angularjs.org/1.2.2/angular.js"></script> <script> angular.module('MyAngularModule', []) .controller('myAngularController', function ( $scope ) { }); </script> </head> <body ng-controller="myAngularController" ng-init="Names = [{name:'Shanu'}, {name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'}, {name:'Mak'}, {name:'Raja'}]"> Filter By NAme : <input type="text" ng-model="myNameFilters"> <table border=1> <tr> <td ng-click="predicate = 'name'; reverse=!reverse"> <b>Toy Code</b> </td> </tr> <tbody ng-repeat="nme in Names | filter:myNameFilters | orderBy:predicate:reverse"> <tr> <td> {{nme.name}} </td> </tr> </tbody> </table> </body> </html>

Filter Scope

SQL SERVERhttp://www.c-sharpcorner.com/UploadFile/asmabegam/basic-sql-queries-for-beginners/

DBMSSoftwareDatabase

Web API

Work with Multiple Browsers like Chrome, IE, Firefox, Safari and Opera

Database API

Entity Framework

Entity FrameworkEDM

Application

ADO.NET

Database

Simple CRUD web Application

① SQL Server 2014

② ASP.NET MVC③ Entity

Framework④ Web API⑤ AngularJS

Using

Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/

http://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/



Simple CRUD web Application

① SQL Server 2014 Create Database and Table

Create SQL Stored Procedure for performing CRUD operations

Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/




Create MVC Web Application in Visual Studio 2015

Simple CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/




CRUD web Application Note: Refer this website to get SQL Script and study in depth to create this websitehttp://www.c-sharpcorner.com/UploadFile/asmabegam/mvc-angularjs-crud-using-web-api-2-with-stored-procedure/

Create Entity framework in our MVC Application




Create Web API Controller


public class studentsController : ApiController { studentDBEntities objapi = new studentDBEntities(); // to Search Student Details and display the result [HttpGet] public IEnumerable<USP_Student_Select_Result> Get(string StudentName, string StudentEmail) { if (StudentName == null) StudentName = ""; if (StudentEmail == null) StudentEmail = ""; return objapi.USP_Student_Select(StudentName, StudentEmail).AsEnumerable(); } // To Insert new Student Details [HttpGet] public IEnumerable<string> insertStudent(string StudentName, string StudentEmail, string Phone, string Address) { return objapi.USP_Student_Insert(StudentName, StudentEmail, Phone, Address).AsEnumerable(); } //to Update Student Details [HttpGet] public IEnumerable<string> updateStudent(int stdID,string StudentName, string StudentEmail, string Phone, string Address) { return objapi.USP_Student_Update(stdID,StudentName, StudentEmail, Phone, Address).AsEnumerable(); } //to Update Student Details [HttpGet] public string deleteStudent(int stdID) { objapi.USP_Student_Delete(stdID); objapi.SaveChanges(); return "deleted"; } }




Creating AngularJs Controller







Add Module firstModule as a container for the different parts of your app – controllers, services, filters, directives, etcMost applications have a main method that instantiates and wires together the different parts of the application.Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped.

// <reference path="../angular.js" /> /// <reference path="../angular.min.js" /> /// <reference path="../angular-animate.js" /> /// <reference path="../angular-animate.min.js" /> var app;(function () { app = angular.module("RESTClientModule", ['ngAnimate']);})();






Add ControllerAngularJS applications are controlled by controllers.The ng-controller directive defines the application controller.A controller is a JavaScript Object, created by a standard JavaScript object constructor.

app.controller("AngularJs_studentsController", function ($scope, $timeout, $rootScope, $window, $http) { $scope.date = new Date(); $scope.MyName = "shanu"; $scope.stdName = ""; $scope.stdemail = ""; $scope.showStudentAdd = true; $scope.addEditStudents = false; $scope.StudentsList=true; $scope.showItem = true; //This variable will be used for Insert/Edit/Delete Students details. $scope.StdIDs = 0; $scope.stdNames = ""; $scope.stdEmails = ""; $scope.Phones = ""; $scope.Addresss = "";




Student Search





Angular CRUD Method


//to get all Student Details selectStudentDetails($scope.stdName, $scope.stdemail); function selectStudentDetails(StudentName, StudentEmail) { $http.get('/api/students/', { params: { StudentName: StudentName, StudentEmail: StudentEmail } }).success(function (data) { $scope.Students = data; $scope.showStudentAdd = true; $scope.addEditStudents = false; $scope.StudentsList = true; $scope.showItem = true; }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); }

//Search $scope.searchStudentDetails = function () { selectStudentDetails($scope.stdName, $scope.stdemail); }

// New Student Add Details $scope.showStudentDetails = function () { cleardetails(); $scope.showStudentAdd = true; $scope.addEditStudents = true; $scope.StudentsList = true; $scope.showItem = true; }

//Edit Student Details $scope.studentEdit = function studentEdit(StudentID, Name, Email, Phone, Address) { cleardetails(); $scope.StdIDs = StudentID; $scope.stdNames = Name $scope.stdEmails = Email; $scope.Phones = Phone; $scope.Addresss = Address; $scope.showStudentAdd = true; $scope.addEditStudents = true; $scope.StudentsList = true; $scope.showItem = true; }

//Delete Dtudent Detail $scope.studentDelete = function studentDelete(StudentID, Name) { cleardetails(); $scope.StdIDs = StudentID;var delConfirm = confirm("Are you sure you want to delete the Student " + Name + " ?"); if (delConfirm == true) { $http.get('/api/students/deleteStudent/', { params: { stdID: $scope.StdIDs } }).success(function (data) { alert("Student Deleted Successfully!!"); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } }




Add New Student





Edit New Student





Angular CRUD Method


//clear all the control values after insert and edit. function cleardetails() { $scope.StdIDs = 0; $scope.stdNames = ""; $scope.stdEmails = ""; $scope.Phones = ""; $scope.Addresss = ""; }

//Form Validation $scope.Message = ""; $scope.IsFormSubmitted = false; $scope.IsFormValid = false; $scope.$watch("f1.$valid", function (isValid) { $scope.IsFormValid = isValid; });

//Save Student $scope.saveDetails = function () { $scope.IsFormSubmitted = true; if ($scope.IsFormValid) { //if the Student ID=0 means its new Student insert here i will call the Web api insert method if ($scope.StdIDs == 0) { $http.get('/api/students/insertStudent/', { params: { StudentName: $scope.stdNames, StudentEmail: $scope.stdEmails, Phone: $scope.Phones, Address: $scope.Addresss } }).success(function (data) { $scope.StudentsInserted = data; alert($scope.StudentsInserted); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } else { // to update to the student details $http.get('/api/students/updateStudent/', { params: { stdID: $scope.StdIDs, StudentName: $scope.stdNames, StudentEmail: $scope.stdEmails, Phone: $scope.Phones, Address: $scope.Addresss } }).success(function (data) { $scope.StudentsUpdated = data; alert($scope.StudentsUpdated); cleardetails(); selectStudentDetails('', ''); }) .error(function () { $scope.error = "An Error has occured while loading posts!"; }); } } else { $scope.Message = "All the fields are required."; } }




Delete Student Details





More Resources

https://mvp.microsoft.com/en-us/PublicProfile/5001980?fullName=Syed%20%20Shanu

http://www.c-sharpcorner.com/members/syed-shanu

http://www.codeproject.com/Articles/syed-shanu

https://mvp.microsoft.com/en-us/PublicProfile/5001980?fullName=Syed%20%20Shanu


http://www.codeproject.com/Articles/syed-shanu

Questions ?

Contact Me

@syedshanu3

[email protected]

https://www.facebook.com/syed.shanu.9


https://www.facebook.com/syed.shanu.9


asp.net mvc, angularjs crud for azerbaijan technical university

Education