+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم برمجة وتطوير المواقع (http://vb4arb.com/vb/forumdisplay.php?fid=51)
+--- قسم : قسم ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=52)
+---- قسم : قسم مقالات ASP.NET (http://vb4arb.com/vb/forumdisplay.php?fid=54)
+---- الموضوع : AngularJs in asp.net MVC (/showthread.php?tid=17192)
AngularJs in asp.net MVC - Abu Ehab - 06-09-16
بسم الله ارحمن الرحيم
How to insert, update, delete and show the data
using AngularJs in asp.net MVC
أولا : أضاقة مودل
: Add Model
PHP كود :
public partial class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> Phone { get; set; }
public Nullable<int> Salary { get; set; }
public string Department { get; set; }
public string EmailId { get; set; }
}
تانيا : أضافة كنترولر
Add Controller
PHP كود :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
public class DemoController : Controller
{
//
// GET: /Demo/
DemoEntities1 db = new DemoEntities1();
public ActionResult Index()
{
return View();
}
public JsonResult GetEmployee()
{
var emp = db.Employees.ToList();
return Json(emp, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public JsonResult InsertEmployee(Employee emp)
{
db.Employees.Add(emp);
db.SaveChanges();
string message = "Success";
return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
[HttpPost]
public JsonResult UpdateEmployee(int id, string name, string department, int phone, int salary, string emailId)
{
var emp = db.Employees.Where(x => x.Id == id).FirstOrDefault();
emp.Name = name;
emp.Phone = phone;
emp.Department = department;
emp.Salary = salary;
emp.EmailId = emailId;
db.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
[HttpDelete]
public JsonResult DeleteEmployee(int id)
{
Employee emp = db.Employees.Find(id);
db.Employees.Remove(emp);
db.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public JsonResult getByid(int id)
{
Employee emp = db.Employees.Find(id);
return Json(emp, JsonRequestBehavior.AllowGet);
}
}
}
تالتا
أضافة فيــــــــــــــــــوو
Add View
PHP كود :
@{
ViewBag.Title = "AngularJs Tutorial";
}
<style>
</style>
<h2>AngularJs Tutorial : CRUD operation</h2>
<div ng-app="mvcapp" ng-controller="DemoController">
<form name="myform">
<table class="table">
<tr>
<td>Name :</td>
<td>
<input type="text" ng-model="empModel.Name" placeholder="Name" class='form-control' required />
</td>
</tr>
<tr>
<td>Phone :</td>
<td>
<input type="text" ng-model="empModel.Phone" placeholder="Phone" class='form-control' required />
</td>
</tr>
<tr>
<td>Salary :</td>
<td>
<input type="text" ng-model="empModel.Salary" placeholder="Salary" class='form-control' required />
</td>
</tr>
<tr>
<td>Department :</td>
<td>
<input type="text" ng-model="empModel.Department" placeholder="Department" class='form-control' required />
</td>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="email" ng-model="empModel.EmailId" class='form-control' placeholder="Email" required />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Save" id="btnsave" ng-disabled="isDisabledsave" ng-click="myform.$valid && saveCustomer()" />
<input type="button" value="Update" id="btnupdate" ng-disabled="isDisabledupdate" ng-click="myform.$valid && updateCustomer()" />
</td>
</tr>
</table>
</form>
<table>
<tr>
<th>S.No</th>
<th>
Name
</th>
<th>
Phone
</th>
<th>
Department
</th>
<th>
Salary
</th>
<th>
Email
</th>
</tr>
<tr ng-repeat="empModel in employees">
<td>{{empModel.Id}}</td>
<td>{{empModel.Name }}</td>
<td>{{empModel.Phone }}</td>
<td>{{empModel.Department}}</td>
<td>{{empModel.Salary }}</td>
<td>{{empModel.EmailId ||'Email not available'}}</td>
<td>
<a href="" ng-click="getCustomer(empModel)" title="Delete Record">Edit</a> |
<a href="" ng-click="deleteemp(empModel)" title="Delete Record">
Delete
</a>
</td>
</tr>
</table>
</div>
<style>
input[type=button][disabled=disabled] {
opacity: 0.65;
cursor: not-allowed;
}
table tr th {
padding: 10px 30px;
}
table tr td {
padding: 10px 30px;
}
</style>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('DemoController', function ($scope, $http) {
GetAllData();
$scope.isDisabledupdate = true;
//Get All Employee
function GetAllData() {
$http.get('/Demo/GetEmployee').success(function (data) {
$scope.employees = data;
});
};
//Insert Employee
$scope.saveCustomer = function () {
debugger
$http({
method: 'POST',
url: '/Demo/InsertEmployee',
data: $scope.empModel
}).success(function () {
GetAllData();
$scope.empModel =null;
alert("Employee Added Successfully!!!");
}).error(function () {
alert(data.errors);
});
GetAllData();
};
//Delete Employee
$scope.deleteemp = function (empModel) {
debugger
varIsConf = confirm('Want to delete ' + empModel.Name + '. Are you sure?');
if (varIsConf) {
$http.delete('/Demo/DeleteEmployee/' + empModel.Id).success(function () {
$scope.errors = [];
GetAllData();
alert(empModel.Name + " Deleted Successfully!!!");
}).error(function () {
alert(data.errors);
});
}
};
//Get Employee by id to edit
$scope.getCustomer = function (empModel) {
$http.get('/Demo/getByid/' + empModel.Id)
.success(function (data, status, headers, config) {
//debugger;
$scope.empModel = data;
GetAllData();
$scope.isDisabledsave = true;
$scope.isDisabledupdate = false;
})
.error(function () {
alert(data.errors);
});
};
//Update Employee
$scope.updateCustomer = function () {
debugger
$http({
method: 'POST',
url: '/Demo/UpdateEmployee',
data: $scope.empModel
}).success(function () {
GetAllData();
$scope.isDisabledsave = false;
$scope.isDisabledupdate = true;
$scope.empModel = null;
alert("Employee Updated Successfully!!!");
}).error(function () {
alert(data.errors);
});
};
});
</script>
يعطيكم العــــــــــافية
تحياتي للجميع