View
118
Download
1
Category
Preview:
Citation preview
Azerbaijan Technical University
ASP.NET MVC, ANGULARJS CRUD US-ING WEB
API, EF WITH STORED PROCEDURE
Date : 2017/12/01
By : SYED SHANUEmail: syedshanumcain@gmail.com
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/
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
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/
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
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/
Creating AngularJs Controller
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/
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']);})();
Creating AngularJs Controller
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/
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
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/
Angular CRUD Method
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/
//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
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/
Edit New Student
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/
Angular CRUD Method
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/
//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
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/
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
Questions ?
Contact Me
@syedshanu3
syedshanumcain@gmail.com
https://www.facebook.com/syed.shanu.9
http://www.c-sharpcorner.com/members/syed-shanu
Recommended