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
http://www.c-
procedure/

 Create MVC Web Application in Visual Studio 2015
http://www.c-
procedure/

http://www.c-
procedure/
 Create Entity framework in our MVC Application

 Create Web API Controller
http://www.c-
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
http://www.c-
procedure/

Controller
http://www.c-
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
http://www.c-
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
http://www.c-
procedure/

 Angular CRUD Method
http://www.c-
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
http://www.c-
procedure/

 Edit New Student
http://www.c-
procedure/

 Angular CRUD Method
http://www.c-
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
http://www.c-
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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University

Similaire à ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University (20)

Dernier

Dernier (20)

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University