Code .Net: Exemple AngularJS Asp.net WebForms

Dans cet article je vous présente un exemple de AngularJS en asp.net avec l'utilisation de WebService.

CRUD Application Sample Using AngularJS and Asp.net

Exemple Angular JS en Asp.net

Employe.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MajEmploye.aspx.cs" Inherits="GestEmployes.MajEmploye" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="script.js"></script>
    <style>
        body
        {
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <div ng-app="myApp">
      <div ng-controller="EmpCtrl">
        <div style="font-family: Verdana; font-size: 12px; margin-left: auto;margin-right:auto; width:700px; text-align:center">
            <table>
                <tr>
                    <td>
                          <table style="margin-left: auto;margin-right:auto;">
                            <tr>
                                <td style="text-align: right;">Id :
                                </td>
                                <td>
                                    <input type="text" id="txtEmpID" ng-model="EmpID" />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Nom :
                                </td>
                                <td>
                                    <input type="text" id="txtEmpNom" ng-model="EmpNom" />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">Prénom :
                                </td>
                                <td>
                                    <input type="text" id="txtEmpPrenom" ng-model="EmpPrenom" />
                                </td>
                            </tr>
                             <tr>
                                <td style="text-align: center;">
                       
                                </td>
                                 <td> <input type="submit" id="btnSubmit" value="Enregistrer" ng-click="save()" /></td>
                            </tr>
                        </table>
                    </td>

                    <td>
                          <input type="button" id="btnListeEmployes" value="Liste des employés" ng-click="getEmployee()" />
                            Filtre : <input type="text" ng-model="search" />
                            <table border="1" style="font-family: Verdana; font-size: 12px; margin-left: auto;margin-right:auto; width:400px; margin-top:5px">
                                <tr style="background-color:olive;color:white">
                                    <td>ID
                                    </td>
                                    <td>Nom
                                    </td>
                                    <td>Prénom
                                    </td>
                               </tr>
                               <tr ng-repeat="e in items | filter:search"">
                                    <td>{{e.ID}}
                                    </td>
                                    <td>{{e.Nom}}
                                    </td>
                                    <td>{{e.Prenom}}
                                    </td>
                              </tr>
                            </table>
                    </td>
                </tr>

            </table>
       
    </div>
     </div>  

  </div>

</body>
</html>

EmpService.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;
using System.Collections;
using System.Web.Script.Serialization;


namespace GestEmployes
{

    /// <summary>
    /// Summary description for EmpService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]

    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]

    public class EmpService : System.Web.Services.WebService
    {
        string connection = @"Data Source=ServerName;Initial Catalog=Employe;Integrated Security=SSPI;";

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string InsertEmploye(string empID, string nom, string prenom)
        {

            SqlConnection con = new SqlConnection(connection);
            SqlCommand cmd;
            try
            {
                con.Open();
                cmd = con.CreateCommand();
                cmd.CommandText = "INSERT INTO Employe(ID,Nom,Prenom) VALUES(@ID,@nom,@prenom)";
                cmd.Parameters.AddWithValue("@ID", empID);
                cmd.Parameters.AddWithValue("@nom", nom);
                cmd.Parameters.AddWithValue("@prenom", prenom);
                cmd.ExecuteNonQuery();
                return "Employé ajouté avec succés";
            }
            catch (Exception)
            {

                throw;
            }
            finally
            {
                if (con.State == ConnectionState.Open)
                {
                    con.Close();
                }

            }
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<Employe> ListeEmployes()
        {
            SqlConnection con = new SqlConnection(connection);
            SqlCommand cmd;
            try
            {
                con.Open();
                cmd = con.CreateCommand();
                cmd.CommandText = "Select * from employe";
                SqlDataReader sdr=cmd.ExecuteReader();
                List<Employe> ListEmployes = new List<Employe>();
                Employe emp;
                while (sdr.Read())
                {
                    emp = new Employe();
                    emp.ID = Convert.ToInt32(sdr[0]);
                    emp.Nom = sdr[1].ToString();
                    emp.Prenom = sdr[2].ToString();
                    ListEmployes.Add(emp);
                }
                sdr.Close();
                return ListEmployes;
            }
            catch (Exception)
            {

                throw;
            }
            finally
            {
                if (con.State == ConnectionState.Open)
                {
                    con.Close();
                }

            }
        }
    }
}

Employe.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace GestEmployes
{
    public class Employe
    {
        public int ID;
        public string Nom;
        public string Prenom;
    }
}

script.js

var app = angular.module('myApp', []);
function EmpCtrl($scope,$http) {

    $scope.getEmployee = function () {
        var httpRequest = $http({
            method: 'POST',
            url: 'EmpService.asmx/ListeEmployes',
            data: "{}",

        }).success(function (data, status) {
            $scope.items = data.d;
        });
    };

    $scope.save = function () {
        $.ajax({
            type: "POST",
            url: "EmpService.asmx/InsertEmploye",
            data: "{'empID':'" + $scope.EmpID + "','nom':'" + $scope.EmpNom + "','prenom':'" + $scope.EmpPrenom + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert(msg.d);
                console.log(msg.d);
            },
            error: function (msg) {
                alert(msg.d);
                console.log(msg.d);
            }
        });

    };

}

Download :VS2012Demo

Code .Net

mardi 10 mars 2015

Exemple AngularJS Asp.net WebForms

Employe.aspx

EmpService.asmx

Employe.cs

script.js

1 commentaire: