ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University

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

 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

 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

Database
Controller
Model
View
User

Data Binding
Providers
Validators
Directives
Controllers
Modules
Expressions
Services
Dependency
Injection
Filters
Scope
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>
<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>

<head runat="server">
<title></title>
<script>
$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>
<head runat="server"> <title></title>
<script>
$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>

http://www.c-sharpcorner.com/UploadFile/asmabegam/basic-sql-queries-for-beginners/
DBMS
SoftwareDatabase

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

Entity Framework
EDM
Application
ADO.NET
Database

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/

 Create Database and Table
 Create SQL Stored Procedure for performing CRUD operations
procedure/

 Create MVC Web Application in Visual Studio 2015
procedure/

procedure/
 Create Entity framework in our MVC Application

 Create Web API Controller
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
procedure/

Controller
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']);
})();

Controller
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 = "";

 Student Search
procedure/

 Angular CRUD Method
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.addEditStudents = false;
$scope.StudentsList = 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.addEditStudents = 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.addEditStudents = 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
procedure/

 Edit New Student
procedure/

 Angular CRUD Method
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();
})
.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();
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
} }
else { $scope.Message = "All the fields are required.";
} }

 Delete Student Details
procedure/

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

@syedshanu3
syedshanumcain@gmail.com
https://www.facebook.com/syed.shanu.9
http://www.c-sharpcorner.com/members/syed-shanu

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University (20)

Recently uploaded (20)

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University