mercredi 20 mai 2015

Session asp.net c# exemple

L'état de session ASP.NET vous permet de stocker et de récupérer des valeurs pour un utilisateur à mesure que ce dernier navigue dans les différentes pages ASP.NET qui composent une application Web.


L'état de session ASP.NET est activé par défaut pour toutes les applications ASP.NET. Les variables d'état de session ASP.NET sont définies et récupérées facilement à l'aide de la propriété Session qui stocke les valeurs de variables de session comme une collection indexée par nom. Par exemple, l'exemple de code suivant crée les variables de session Nom .





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

public partial class index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnCreeSession_Click(object sender, EventArgs e)
    {
        Session["Nom"] = txtNom.Text.Trim();
    }

    protected void btnRecupererSession_Click(object sender, EventArgs e)
    {
        string valeursession=Convert.ToString(Session["Nom"]);
    }

    protected void btnSupprimerSession_Click(object sender, EventArgs e)
    {
        Session.Remove("Nom");

        AfficherValeurSession();
    }

    protected void btnSupprimerTout_Click(object sender, EventArgs e)
    {
        Session.RemoveAll();

    }

} 

mercredi 8 avril 2015

Menu Dynamic ASP.NET MVC5 Razor

Menu Dynamic ASP.NET MVC5 Razor

Model Menu:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;

namespace Models
{
    public class Menu
    {
        public int ID { get; set; }

        public string Nom { get; set; }

        public string Description { get; set; }

        public string Lien { get; set; }

        public int Ordre { get; set; }

        public int OidMenuParent { get; set; }
    }
}

Controller

    public class HomeController : Controller
    {
        public MenuRepository menurepository = new MenuRepository();
        public ActionResult Index()
        {
            var viewmodel=new HomeViewModel
            {
              Menus=this.menurepository.All,
            };
            return View(viewmodel);
        }
    }

View Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Models;
namespace ViewModels
{
    public class HomeViewModel
    {
        public IEnumerable<Menu> Menus { get; set; }
    }
}

View

  <ul class="nav navbar-nav navbar-left">
                            @{var menus=Model.Menus;}
                            @{var menusparent = (from mp in menus where mp.OidMenuPatent==0 select mp).ToList();}
                            @foreach (var item in menusparent)
                            {

                                var query = (from mc in menus where mc.OidMenuPatent == item.ID select mc).ToList();
                            
                                if (query.Count() > 0) {
                                    <li class="dropdown active">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">@item.Description <span class="caret"></span></a>
                                        <ul class="dropdown-menu" role="menu">
                                            @foreach (var childmenu in query)
                                            {
                                        
                                                <li>@Html.ActionLink(@childmenu.Description, @childmenu.Lien, "Home")</li>
                                            }
                                        </ul>
                                    </li>
                                }
                                else { 
                                <li>@Html.ActionLink(@item.Description, @item.Lien, "Home")</li>
                                }
                            }

                            
</ul>

lundi 30 mars 2015

Gestion de Sessions ASP.NET - ASP.NET Session Management

Gestion de Sessions ASP.NET 

ASP.NET Session Management


Dans cet article nous allons essayer de voir quelles sont les différentes façons dont nous pouvons gérer les sessions dans une application ASP.NET. Quand devrions-nous utiliser qui techniques et quels sont les avantages et les inconvénients de l'utilisation de chaque technique.

Dans cet article nous allons discuter spécifiquement les Sessions.Session est la méthode côté serveur de gestion de l'état d'une application ASP.NET.L'état de session des différentes applications Web sera stocké sur le côté serveur si nous utilisons cette technique. L'avantage d'avoir cette technique est que, puisque nous gardons toutes les informations liées à l'état sur le serveur, la demande et la réponse devient léger. En outre, les chances de quelqu'un d'intercepter ou de modifier ces données sont également réduits donc la sécurité c'est parmi les avantages fort de cette technique.

Asp.net session management
Asp.net session management

Les avantages d'utiliser de l’état de Session sont:
  • Une meilleure sécurité
  • bande passante réduite

Les inconvénients de l'utilisation état de session sont:
  • Plus de consommation des ressources du serveur.
  • Code supplémentaire
L'état de session ASP.NET prend en charge plusieurs mode pour le  stockage des données de session. Chaque option est identifiée par une valeur dans l'énumération SessionStateMode. La liste suivante décrit les modes d'état de session disponibles:


  • InProc, qui stocke l'état de session dans la mémoire sur le serveur Web. Ce est la valeur par défaut.
  • StateServer, qui stocke l'état de session dans un processus distinct appelé le service d'état ASP.NET. Cela garantit que l'état de session est préservée si l'application Web est redémarré et rend également la session à la disposition de plusieurs serveurs Web.
  • SQLServer stocke l'état de session dans une base de données SQL Server. Cela garantit que l'état de session est préservée si l'application Web est redémarré et fait également état de session à la disposition de plusieurs serveurs Web.
  • Custom, qui vous permet de spécifier un fournisseur de stockage personnalisé.

Utilisation des Sessions


Utilisation de l'état de session


ASP.NET nous permet de stocker des valeurs en utilisant l'état de session. Ce est un mécanisme de stockage global qui est accessible à partir de toutes les pages de l'application Web. L'état de session est stocké dans le dictionnaire clé/ valeur. Cette information sera-à-dire spécifiques à l'utilisateur pour chaque dictionnaire utilisateur séparé sera créé et personne ne peut accéder à d'autres informations de session. ci-dessous est l'utilisation de l'exemple de session

//global.asax
void Session_Start(object sender, EventArgs e)
{
    // Code à excuter lorsque une nouvelle session démarre
    Session["Utilisateur"] = "";
}

// Web forms
Session["Utilisateur"] = "Hicham';

LblUtilisateur.Text = Session["Utilisateur"].ToString();

Configuration mode de Session

Mode In-Proc :

Pour configurer la gestion de session in-process nous devons spécifier l'élément sessionState dans le fichier web.config. voyons comment configurer le mode In-Proc


<sessionState mode="InProc" 
                cookieless="false" 
                timeout="100"/>

Mode SQL Server



<sessionState mode="SQLServer" 
                stateConnectionString="tcpip=127.0.0.1:42424" 
                sqlConnectionString="Data Source=.\SQLEXPRESS;Trusted_Connection=Yes;" 
                cookieless="false" 
                timeout="100"/>

Mode State Server

En utilisant ce mode assure que l'état de session est préservée si l'application Web est redémarré et rend l'état de session à la disposition de plusieurs serveurs Web.
Pour utiliser le mode StateServer, vous devez d'abord être sûr que le service d'état ASP.NET se exécute sur le serveur utilisé pour le stockage de session. Le service d'état ASP.NET est installé comme un service lorsque ASP.NET et le .NET Framework sont installés. Le service d'état ASP.Net est installé à l'emplacement suivant:
systemroot \ Microsoft.NET \ Framework \ versionNumber \ aspnet_state.exe
Pour configurer une application ASP.NET pour utiliser le mode StateServer, dans le fichier web.config de l'application, procédez comme suit:




 <sessionState mode="StateServer"
      stateConnectionString="tcpip=ServerName:42424"
      cookieless="false"
      timeout="20"/>

Mode Custom


Mode Custom spécifie que vous souhaitez stocker des données d'état de session en utilisant un fournisseur de stockage de l'état de session personnalisé. Lorsque vous configurez votre application ASP.NET avec un mode Custom , vous devez spécifier le type de fournisseur de stockage de l'état de session en utilisant Providers  qui est un sous-élément de l'élément sessionState .

L'exemple suivant montre des éléments d'un fichier Web.config qui précisent que l'état de session ASP.NET utilise un mode Custom pour le stockage de l'état de session:


<sessionState 
      mode="Custom"
      customProvider="OdbcSessionProvider">
      <providers>
        <add name="OdbcSessionProvider"
          type="Samples.AspNet.Session.OdbcSessionStateStore"
          connectionStringName="OdbcSessionServices" 
          writeExceptionsToEventLog="false" />
      </providers>
    </sessionState>

lundi 16 mars 2015

ASP.NET MVC 5 CRUD Web Application

Exemple ASP.NET MVC 5 - CRUD Application Web


CRUD Opérations avec ASP.NET MVC5

Mise à jour document avec ASP.NET MVC5


Structure de l'exemple 


Structure de l'exemple


Démo video




Download : DemoCode


vendredi 13 mars 2015

Backbone.js Application

Backbone.js est un framework JavaScript libre et open-source basé sur la librairie Underscore.js. Créé par Jeremy Ashkenas, il est particulièrement adapté aux Single-page application (applications web monopages).

Backbone.js propose une structure pour les applications web en fournissant des Modèles(Models) avec une liaison clé-valeur et des événements personnalisés, Collections avec une riche API de fonctions énumérables, Views avec événement déclarative, et se connecte tout à votre API existante sur une interface RESTful JSON.

Le projet Backbone.js est hébergé sur GitHub,Il est disponible pour une utilisation avec Licence  MIT software license.

Backbone.js est uniquement une couche client, il n’a aucune vocation à gérer la persistence de vos données sur un serveur,mais rassurez vous on a JSON capable de faire cette fonctions en collaboration avec les modèle de Backbone.js

Backbone.js application sample
Liste articles avec Backbone.js


Exemple Backbone.js App


index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Exemple Backbone.js App </title>

       <style>
     h1{
          font-size:33px;
    color: darkblue;
     }
      #articles{
    list-style:none;
    margin:0 auto;
    width:600px;
    margin-left:auto;
    margin-right:auto;
   }

   #articles li{
    background-color: #fbfbfc;
    box-shadow:0 1px 1px #eee;
    font-size:15px;
    color: #85898b;
    padding:22px 30px;
    margin-bottom:15px;
    border-radius:4px;
    cursor:pointer;
   }

   #articles li span{
    float:right;
    opacity:0.6;
   }

   #articles li{
    border:1px solid #ccc;
    box-shadow:1px 1px 1px #ccc;
    margin-right:10px;
    width:150px;
    height:16px;
    display:inline-block;
    vertical-align: middle;
   }
  </style>
    </head>

    <body>

        <form id="main" method="post" >
           

            <ul id="articles">
                 <h1>Articles</h1>
            </ul>
        </form>

        <!-- JavaScript  -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>

        <script src="script.js"></script>

    </body>
</html>

Javascript

$(function(){

    var Article = Backbone.Model.extend({
        defaults:{
            title: 'Article'
        }
    });

    var ArticleList = Backbone.Collection.extend({
        model: Article
    });

    var articles = new ArticleList([
        new Article({ title: 'PC Portable'}),
        new Article({ title: 'Imprimante'}),
        new Article({ title: 'Téléphone'}),
        new Article({ title: 'IPAD'})
    ]);

    var ArticleView = Backbone.View.extend({
        tagName: 'li',
        initialize: function(){
            this.listenTo(this.model, 'change', this.render);
        },

        render: function(){
            this.$el.html('<div> ' + this.model.get('title') + '</div>');
            return this;
        }
    });

    var App = Backbone.View.extend({

        el: $('#main'),

        initialize: function(){

          
            this.list = $('#articles');
            this.listenTo(articles, 'change', this.render);
            articles.each(function(Article){

                var view = new ArticleView({ model: Article });
                this.list.append(view.render().el);

            }, this);
        }
    });

    new App();

});


Download Exemple_Backbone.js

mercredi 11 mars 2015

MutliCheck DropDownList ASP.NET

Résultat : ASP.NET MultiCheckList DropDown

ASP.NET MultiCheckList DropDown
ASP.NET MultiCheckList DropDown

Download : MultiCheckDropDownList

mardi 10 mars 2015

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

mercredi 4 mars 2015

Tree ASP.NET avec D3.JS et WebMethod

Cet article montre comment utiliser un contrôle Tree en utilisant une librairie javascript gratuit D3.js (Site officiel http://d3js.org/) et WebMethod C# pour remplir les éléments du Tree.


ASP.NET Tree Using D3.js And WebMethod C#
ASP.NET Tree avec D3.js et WebMethod C#


Default.aspx


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="tree_asp.net_json._Default" %>

<asp:Content runat="server" ID="ContentHead" ContentPlaceHolderID="HeadContent">

  
 </asp:Content>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Collapsible Tree ASP.NET.</h1>
                <h2></h2>
            </hgroup>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <ol class="round">
        <li class="one">

          <%--  Div utilisant pour l'affichage du Tree--%>
          <div id="test">

          </div>

          <%--  Fin Div utilisant pour l'affichage du Tree--%>
        </li>
       
    </ol>
      <style>

.node {
  cursor: pointer;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: orange;
  stroke-width: 1.8px;
}
</style>

<script src="Scripts/jquery.1.9.1.min.js"></script>

<%--Libraire D3.js--%>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

        $.ajax({
            type: "POST",
            url: "Services/Rapport.aspx/GetTree",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
    
               var result = data.d
               var margin = { top: 20, right: 120, bottom: 20, left: 120 },
               width = 960 - margin.right - margin.left,
               height = 500 - margin.top - margin.bottom;

               var i = 0,
                   duration = 750,
                   root;

               var tree = d3.layout.tree()
                   .size([height, width]);

               var diagonal = d3.svg.diagonal()
                   .projection(function (d) { return [d.y, d.x]; });
                var svg = d3.select("#test").append("svg")
                 .attr("width", width + margin.right + margin.left)
                 .attr("height", height + margin.top + margin.bottom)
                 .append("g")
                 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                        //Récupération des données du Tree avec JSON
                        root = result;
                        root.x0 = height / 2;
                        root.y0 = 0;
                        function collapse(d) {
                            if (d.children) {
                                d._children = d.children;
                                d._children.forEach(collapse);
                                d.children = null;
                            }
                        }
                        root.children.forEach(collapse);
                        update(root);

                        d3.select(self.frameElement).style("height", "500px");

                        function update(source) {


                            var nodes = tree.nodes(root).reverse(),
                                links = tree.links(nodes);


                            nodes.forEach(function (d) { d.y = d.depth * 180; });

                            var node = svg.selectAll("g.node")
                                .data(nodes, function (d) { return d.id || (d.id = ++i); });


                            var nodeEnter = node.enter().append("g")
                                .attr("class", "node")
                                .attr("transform", function (d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
                                .on("click", click);

                            nodeEnter.append("circle")
                                .attr("r", 1e-6)
                                .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });

                            nodeEnter.append("text")
                                .attr("x", function (d) { return d.children || d._children ? -15 : 15; })
                                .attr("dy", ".40em")
                                .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; })
                                .text(function (d) { return d.name; })
                                .style("fill-opacity", 1e-6);


                            var nodeUpdate = node.transition()
                                .duration(duration)
                                .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });

                            nodeUpdate.select("circle")
                                .attr("r", 10)
                                .style("fill", function (d) { return d._children ? "DarkBlue" : "#fff"; });

                            nodeUpdate.select("text")
                                .style("fill-opacity", 1);

                            var nodeExit = node.exit().transition()
                                .duration(duration)
                                .attr("transform", function (d) { return "translate(" + source.y + "," + source.x + ")"; })
                                .remove();

                            nodeExit.select("circle")
                                .attr("r", 1e-6);

                            nodeExit.select("text")
                                .style("fill-opacity", 1e-6);

                            var link = svg.selectAll("path.link")
                                .data(links, function (d) { return d.target.id; });
                            link.enter().insert("path", "g")
                                .attr("class", "link")
                                .attr("d", function (d) {
                                    var o = { x: source.x0, y: source.y0 };
                                    return diagonal({ source: o, target: o });
                                });
                            link.transition()
                                .duration(duration)
                                .attr("d", diagonal);
                            link.exit().transition()
                                .duration(duration)
                                .attr("d", function (d) {
                                    var o = { x: source.x, y: source.y };
                                    return diagonal({ source: o, target: o });
                                })
                                .remove();
                            nodes.forEach(function (d) {
                                d.x0 = d.x;
                                d.y0 = d.y;
                            });
                        }
                        function click(d) {
                            if (d.children) {
                                d._children = d.children;
                                d.children = null;
                            } else {
                                d.children = d._children;
                                d._children = null;
                            }
                            update(d);
                        }

                      
            }
        });

</script>
</asp:Content>

Tree.cs



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

namespace tree_asp.net_json.Classes
{
    public class Tree
    {
        public string name;
        public int size;
        public List<Tree> children=new List<Tree>();
    }
}


WebMethod



 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static Tree GetTree()
        {
            Tree tr = new Tree();
            tr.name = "General culture";
            tr.size = 6000;
            List<Tree> lis = new List<Tree>();
            Tree child = new Tree();
                child.name = "Sports";
                child.size = 5222;
                        Tree child_sport = new Tree();
                        child_sport.name = "Foot Ball";
                        child_sport.size = 5222;
                        child.children.Add(child_sport);
                        child_sport = new Tree();
                        child_sport.name = "Basket Ball";
                        child_sport.size = 5222;
                        child.children.Add(child_sport);
                        child_sport = new Tree();
                        child_sport.name = "Hand Ball";
                        child_sport.size = 5222;
                        child.children.Add(child_sport);
                        child_sport = new Tree();
                        child_sport.name = "Tenis";
                        child_sport.size = 5222;
                        child.children.Add(child_sport);
                        child_sport = new Tree();
                        child_sport.name = "Box";
                        child_sport.size = 5222;
                        child.children.Add(child_sport);
                lis.Add(child);
                child = new Tree();
                child.name = "Countries";
                child.size = 5222;
                            Tree child_countries= new Tree();
                            child_countries.name = "Morocco";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Egypt";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Algeria";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Tunisia";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Lybia";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Qatar";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                            child_countries = new Tree();
                            child_countries.name = "Syria";
                            child_countries.size = 5222;
                            child.children.Add(child_countries);
                lis.Add(child);
                child = new Tree();
                child.name = "Colors";
                child.size = 5222;
                    Tree child_d = new Tree();
                    child_d.name = "Red";
                    child_d.size = 5222;
                    child.children.Add(child_d);
                    child_d = new Tree();
                    child_d.name = "Green";
                    child_d.size = 5222;
                    child.children.Add(child_d);
                    child_d = new Tree();
                    child_d.name = "Blue";
                    child_d.size = 5222;
                    child.children.Add(child_d);
                    child_d = new Tree();
                    child_d.name = "Yellew";
                    child_d.size = 5222;
                    child.children.Add(child_d);
                    child_d = new Tree();
                    child_d.name = "Silver";
                    child_d.size = 5222;
                    child.children.Add(child_d);
                lis.Add(child);

            tr.children = lis;
            return tr;
        }



Démo : vs2010_demo