Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 28 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Ähnlich wie ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University (20)

Aktuellste (20)

Anzeige

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University

  1. 1. Azerbaijan Technical University ASP.NET MVC, ANGULARJS CRUD USING WEB API, EF WITH STORED PROCEDURE Date : 2017/12/01 By : SYED SHANU Email: syedshanumcain@gmail.com
  2. 2.  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
  3. 3.  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
  4. 4. Database Controller Model View User
  5. 5. Data Binding Providers Validators Directives Controllers Modules Expressions Services Dependency Injection Filters Scope Factories
  6. 6. <!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> <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>
  7. 7. <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> <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>
  8. 8. http://www.c-sharpcorner.com/UploadFile/asmabegam/basic-sql-queries-for-beginners/ DBMS SoftwareDatabase
  9. 9. Work with Multiple Browsers like Chrome, IE, Firefox, Safari and Opera Database API
  10. 10. Entity Framework EDM Application ADO.NET Database
  11. 11. Using Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  12. 12.  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 website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  13. 13.  Create MVC Web Application in Visual Studio 2015 Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  14. 14. Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/  Create Entity framework in our MVC Application
  15. 15.  Create Web API Controller Note: Refer this website to get SQL Script and study in depth to create this website http://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"; } }
  16. 16.  Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  17. 17.  Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/  Add Module first Module as a container for the different parts of your app – controllers, services, filters, directives, etc Most 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']); })();
  18. 18.  Creating AngularJs Controller Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/  Add Controller AngularJS 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, $ro otScope, $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 = "";
  19. 19.  Student Search Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  20. 20.  Angular CRUD Method Note: Refer this website to get SQL Script and study in depth to create this website http://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!"; }); } }
  21. 21.  Add New Student Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  22. 22.  Edit New Student Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  23. 23.  Angular CRUD Method Note: Refer this website to get SQL Script and study in depth to create this website http://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."; } }
  24. 24.  Delete Student Details Note: Refer this website to get SQL Script and study in depth to create this website http://www.c- sharpcorner.com/UploadFile/asmabegam/mvc- angularjs-crud-using-web-api-2-with-stored- procedure/
  25. 25. 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
  26. 26. @syedshanu3 syedshanumcain@gmail.com https://www.facebook.com/syed.shanu.9 http://www.c-sharpcorner.com/members/syed-shanu

×