تقييم الموضوع :
  • 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 (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> 



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

تحياتي للجميع 

Abu Ehab : Microsoft Partner  & Systems Developer
الرد }}}}
تم الشكر بواسطة: abulayth


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


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