تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
AngularJs in asp.net MVC
#1
بسم الله ارحمن الرحيم
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 getset; }
 
       public string Name getset; }
 
       public Nullable<intPhone getset; }
 
       public Nullable<intSalary getset; }
 
       public string Department getset; }
 
       public string EmailId getset; }
 
   

تانيا  : أضافة كنترولر

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(empJsonRequestBehavior.AllowGet);
 
       }
 
       [HttpPost]
 
       public JsonResult InsertEmployee(Employee emp)
 
       {
 
           db.Employees.Add(emp);
 
           db.SaveChanges();
 
           string message "Success";
 
           return new JsonResult Data messageJsonRequestBehavior JsonRequestBehavior.AllowGet };
 
       }

 
       [HttpPost]
 
       public JsonResult UpdateEmployee(int idstring namestring departmentint phoneint salarystring emailId)
 
       {
 
           var emp db.Employees.Where(=> x.Id == id).FirstOrDefault();
 
           emp.Name name;
 
           emp.Phone phone;
 
           emp.Department department;
 
           emp.Salary salary;
 
           emp.EmailId emailId         
            db
.SaveChanges();
 
           return Json(empJsonRequestBehavior.AllowGet);
 
       }
 
       [HttpDelete]
 
       public JsonResult DeleteEmployee(int id)
 
       {
 
           Employee emp db.Employees.Find(id);
 
           db.Employees.Remove(emp);
 
           db.SaveChanges();
 
           return Json(empJsonRequestBehavior.AllowGet);
 
       }
 
       [HttpGet]
 
       public JsonResult getByid(int id)
 
       {
 
           Employee emp db.Employees.Find(id);
 
           return Json(empJsonRequestBehavior.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] {
 
       opacity0.65;
 
       cursornot-allowed;
 
   }
 
   table tr th {
 
       padding10px 30px;
 
   }
 
   table tr td {
 
       padding10px 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 (datastatusheadersconfig) {
 
               //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



يعطيكم  العــــــــــافية 

تحياتي للجميع 
Abu Ehab : Microsoft Partner  & Systems Developer
 Youtube   Facebook    Twitter   
الرد }}}
تم الشكر بواسطة: abulayth , Amir_Alzubidy
#2
شكرا جزيلا
الرد }}}
تم الشكر بواسطة:


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم