Blog de Nico-pyright(c) » Ajax

MVP Visual C# pour 2012

nico-pyright(c) — Tue, 03 Jan 2012 20:55:19 +0000

Après avoir été nominé MVP Visual C++ en 2007, puis MVP ASP.NET en 2010, me voilà désormais MVP Visual C# pour 2012.

Je reconnais que ce blog est de moins en moins mis à jour mais je vais essayer de me rattraper

Merci encore à Microsoft de me renouveler sa confiance. J’en profite au passage pour vous souhaitez à tous une bonne année, pleine de C# et de .NET.

Tutoriel : introduction au développement d’applications Windows Phone 7

nico-pyright(c) — Sun, 14 Nov 2010 23:00:00 +0000

Windows Phone 7 (WP7) est la nouvelle plateforme de développement de Microsoft destinée aux smartphones.

Dans ce premier tutoriel, vous découvrirez comment démarrer le développement d’applications avec Windows Phone 7.
Nous commencerons par installer les outils nécessaires au développement sur WP7 puis nous créerons un premier programme simpliste en utilisant Silverlight pour WP7.
Enfin, nous l’exécuterons sur l’émulateur et découvrirons son fonctionnement.

Bonne lecture : http://nico-pyright.developpez.com/tutoriel/vs2010/csharp/windows-phone-seven/introduction-developpement-windows-phone-seven-wp7-silverlight/

[ASP.NET][AJAX]PageMethods is not defined, comment le corriger ?

nico-pyright(c) — Tue, 08 Dec 2009 20:18:00 +0000

Si vous développez avec ASP.NET et que vous voulez faire de l’Ajax, vous vous êtres probablement intéressés aux PageMethods.

Pour rappel, on peut utiliser les PageMethods de cette façon.

Si vous avez utilisé les PageMethods, vous vous heurterez fatalement à l’erreur suivante :

PageMethods is not defined

Sisi, je vous assure

Voici ce que vous pouvez faire et vérifier pour que ce message qui révèle toute notre impuissance face au framework ASP.NET puisse enfin disparaitre :

Vérifier que la méthode que vous souhaitez appeler est marquée comme [WebMethod]
Vérifier que la méthode est statique
Vérifier que le script manager est présent sur la page
Vérifier qu’il a bien l’attribut EnablePageMethods à True

Pour vérifier que le proxy est bien généré, afficher le code source de la page et chercher le mot clé « PageMethods », s’il est absent, cela ne pourra pas marcher.

Vous pouvez ensuite :

Vérifier que la méthode fasse bien partie du code-behind de la page (cela ne fonctionne pas toujours sur le code-behind d’un usercontrol)
Nettoyer la solution (clean) et supprimer les fichiers dans C:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files

Après, il ne reste plus qu’à allumer un cierge ou utiliser une des autres méthodes décrites dans ce tutoriel.

Vous souhaitant la disparition de cette erreur.

[ASP.NET][C#] Mise à jour multiple de pages avec un UpdatePanel

nico-pyright(c) — Tue, 18 Aug 2009 20:32:07 +0000

On l’a souvent vu, l’utilisation de l’updatepanel est très pratique et améliore très facilement l’expérience utilisateur d’un site web.

Mal utilisé, celui-ci peut récupérer beaucoup plus d’informations que nécessaire.

Que faire par exemple dans le cas simple suivant, lorsque l’on doit mettre à jour plusieurs zones en même temps d’une page volumineuse ?

Quelque chose dans ce genre :

Début à rafraichir

Long milieu (images et textes statiques à foison)

Fin à rafraichir

Par exemple :

<%@ Page="" Language="C#" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="testUpdatePanel._Default" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">

      <title>title>

    head>

    <body>

      <form id="form1" runat="server">

        <div>

          <p>Premier bloc à rafraichirp>

          <asp:Label runat="server" ID="label1" />

        div>

        <div>

          <p>Long bloc à ne pas rafraichirp>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim fermentum est at porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dui lacus, ultricies ac vestibulum eu, interdum at nisl. Proin pharetra ipsum pharetra justo pharetra ornare. Integer sed enim sit amet erat suscipit sodales. Pellentesque mi dui, luctus vitae semper quis, scelerisque id orci. Praesent mattis nisi sed eros faucibus non adipiscing libero tincidunt. Aenean sollicitudin sapien ac nulla porta gravida. Phasellus ipsum arcu, aliquam semper ullamcorper quis, ultricies quis lacus. Sed porttitor, purus quis mollis interdum, dui orci feugiat nibh, non tincidunt risus lacus ut massa. Morbi eget sem id mi posuere congue. Aliquam erat volutpat. Vivamus elementum ligula augue. p>

          <p>Aenean pellentesque felis at nunc aliquet vitae porta est cursus. In hac habitasse platea dictumst. Donec arcu felis, suscipit vitae fermentum vitae, auctor ut justo. In egestas interdum erat, vel interdum nisi adipiscing sit amet. Aliquam vitae neque vel erat tempor mollis sed ac sapien. Nam sed velit ut lectus sagittis feugiat ac ut ante. Quisque non nunc lacus. Aliquam lobortis risus ac tortor cursus at tincidunt libero vulputate. Curabitur eu pellentesque diam. Vestibulum tristique tempus sollicitudin. Vestibulum pretium ipsum vitae diam bibendum placerat. Donec vel egestas augue. Suspendisse id placerat tortor. Maecenas pellentesque metus et nunc mollis id pretium tellus tincidunt. Nulla mollis cursus ligula, nec hendrerit tortor feugiat nec. In egestas, nulla ac gravida laoreet, tortor sem sollicitudin turpis, a mollis sem lectus in ipsum. Phasellus egestas fermentum lacus feugiat auctor. Aliquam augue risus, venenatis nec gravida quis, dignissim sagittis massa. Ut dapibus rhoncus sodales.p>

          <asp:Label runat="server" ID="label2" />

        div>

        <div>

          <p>Dernier bloc à rafraichirp>

          <asp:Label runat="server" ID="label3" />

        div>

        <asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />

      form>

    body>

html>

L’utilisateur non averti pourrait être tenté de mettre un UpdatePanel sur toute la page, ce qui fonctionnerait mais aurait pour effet de rafraîchir toute la page et par la même occasion la portion statique inutile.

Un autre utilisateur au courant de cet effet pourrait être tenté d’utiliser 2 UpdatePanel, mais comment les organiser ?

Si j’entoure mes deux blocs avec des UpdatePanel, c’est à dire :

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<p>Premier bloc à rafraichirp>

<asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">

    <ContentTemplate>

      <asp:Label runat="server" ID="label1" />

    ContentTemplate>

asp:UpdatePanel>

div>

<div>

<p>Long bloc ? ne pas rafraichirp>

[…]Code inutile enlevé […]

div>

<div>

<p>Dernier bloc à rafraichirp>

<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">

    <ContentTemplate>

      <asp:Label runat="server" ID="label3" />

    ContentTemplate>

asp:UpdatePanel>

div>

<asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />

Cela ne fonctionne pas, car l’événement du bouton n’est pas attrapé par l’UpdatePanel, le bouton n’étant pas dans le contrôle.

Si j’agrandis la zone du deuxième UpdatePanel pour entourer le bouton, cela ne rafraîchit que le deuxième UpdatePanel, normal …

La solution est bien d’utiliser 2 UpdatePanel, effectivement. Il faut toujours veiller à ne pas englober des zones inutiles et à réduire au maximum les zones à mettre à jour.

Il faudra par contre leurs indiquer de surveiller l’événement click du bouton. Pour ce faire, on utilisera les Triggers et plus particulièrement l’AsyncPostBackTrigger, comme ceci :

<%@ Page="" Language="C#" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="testUpdatePanel._Default" %>

<asp:ScriptManager runat="server" />

<div>

    <p>Premier bloc à rafraichirp>

    <asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">

      <ContentTemplate>

        <asp:Label runat="server" ID="label1" />

      ContentTemplate>

      <Triggers>

        <asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />

      Triggers>

    asp:UpdatePanel>

div>

<div>

    <p>Long bloc à ne pas rafraichirp>

    […]Code inutile enlevé […]

div>

<div>

    <p>Dernier bloc à rafraichirp>

    <asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">

      <ContentTemplate>

        <asp:Label runat="server" ID="label3" />

      ContentTemplate>

      <Triggers>

        <asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" />

      Triggers>

    asp:UpdatePanel>

div>

<asp:Button runat="server" Text="Go" OnClick="OnButtonClick" ID="button1" />

Et voilà, le minimum de code est rafraîchit et transite à travers le reseau.

Note : la mise à jour des labels se fait par exemple dans le OnLoad :

protected override void OnLoad(EventArgs e)

{

    label1.Text = DateTime.Now.ToLongTimeString();

    label2.Text = DateTime.Now.ToLongTimeString();

    label3.Text = DateTime.Now.ToLongTimeString();

    base.OnLoad(e);

}

[C#][Silverlight] Mise à jour du tutoriel sur l’upload de fichier en Silverlight 2 sur un serveur PHP

nico-pyright(c) — Sat, 18 Apr 2009 19:42:58 +0000

Après avoir utilisé l’upload de fichier de manière plus poussée, je me suis rendu compte que tout n’était pas encore parfait. J’ai donc procédé à quelques nouvelles améliorations.

– Vérification d’envoi à chaque envoi de données
– Catch plus complet des erreurs

Retrouvez l’article mis à jour à cette adresse et notamment ce paragraphe.

La classe WSUploader a été mise à jour avec ces améliorations.

[ASP.NET] [C#] Tutoriel : Permettre la navigation et le bookmarking avec une application ASP.NET Ajax

nico-pyright(c) — Tue, 14 Apr 2009 23:00:00 +0000

Je vous présente dans ce nouvel article une solution pour gérer l’historique dans un site ASP.NET utilisant de l’Ajax.
Nous verrons notamment l’utilisation du composant ScriptManager et comment mettre à profit sa propriété EnableHistory.

Lire l’article

[ASP.NET] Tutoriel : Créer un overlayer d’attente lors d’un postback pour ASP.NET/AJAX en C#

nico-pyright(c) — Wed, 23 Jul 2008 23:00:00 +0000

Je vous présente ici comment créer un contrôle qui affiche un overlayer d’attente pendant un postback partiel AJAX pour ASP.NET en C#. Vous y verrez comment encapsuler le contrôle UpdateProgress et vous aurez un aperçu du cycle de vie client d’un postback AJAX

Aller à l’article

Bonne lecture

[Asp.Net, Ajax] Utiliser l’UpdatePanel pour raffraichir une DropDownList dans un Repeater

nico-pyright(c) — Sat, 29 Mar 2008 20:00:00 +0000

Suite à mon précédent billet, cette fois-ci nous allons voir l’utilisation de l’updatePanel dans un repeater.

Soit le repeater suivant, qui contient une dropdown pour chaque item de la collection qui lui est bindée :

Le code behind est le suivant :

protected override void OnLoad(EventArgs e)
{
if (!IsPostBack)
LeRepeater.DataBind();

LeLabel.Text = DateTime.Now.ToString();
base.OnLoad(e);
}

protected void IndexChange(object sender, EventArgs e)
{
Result.Text = string.Format("Valeur choisie : {0}", ((DropDownList)sender).SelectedValue);
}

protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DropDownList LaList = (DropDownList)e.Item.FindControl("LaList");
for (int i = (int)e.Item.DataItem; i < (int)e.Item.DataItem + 5; i++)
{
LaList.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
}
}

Ce qui fait qu’on se retrouve avec trois dropDown. La première va de 1 à 5, la seconde de 6 à 10 et la troisième de 11 à 15. Et lorsqu’on sélectionne une valeur, elle s’affiche dans un label.

Si on essaie comme dans le billet précédent d’encadrer par un UpdatePanel :

Au démarrage, on obtient l’erreur suivante :

A control with ID ‘LaList’ could not be found for the trigger in UpdatePanel ‘UpdatePanel1′.

C’est l’utilisation de l’AsyncPostBackTrigger qui pose problème.
Pour corriger ce problème, nous allons le retirer de la page aspx et modifier le code behind pour en ajouter un dynamiquement, à chaque DataBound du repeater.
Ainsi, la méthode devient :

protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DropDownList LaList = (DropDownList)e.Item.FindControl("LaList");
for (int i = (int)e.Item.DataItem; i < (int)e.Item.DataItem + 5; i++)
{
LaList.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = LaList.UniqueID;
trigger.EventName = "SelectedIndexChanged";
UpdatePanel1.Triggers.Add(trigger);
}
}

Et voilà.

Télécharger le projet démo (13 ko)

[Asp.Net, Ajax] Utiliser l’UpdatePanel avec une DropDownList

nico-pyright(c) — Fri, 28 Mar 2008 20:00:00 +0000

J’aime beaucoup la fonctionnalité AutoPostBack d’une dropdownlist. Le seul inconvénient est qu’elle provoque un postback … et que forcément, ca provoque un rechargement complet de la page. Ce qui peut etre génant pour l’utilisateur si la page est plutot grosse.

Dans ce monde Web 2.0, vous me direz … AJAX.

Et je vous dirais … allons-y !

tout d’abord, il vous faut bien sur les web extensions ajax.
Si vous utilisez visual studio 2005, un petit tour de ce coté http://asp.net/ajax/downloads/ pour les installer.
N’oubliez pas non plus d’aller modifier votre web.config et d’ajouter

(dans la section )

sinon, vous aurez la fameuse erreur javascript

Sys is not defined

témoin que les scripts Ajax ne sont pas chargés.

Si vous etes sous visual studio 2008, il vous suffit de cibler le framework 3.5

Ensuite, en imaginant que vous ayez une page comme celle-ci :

Donc, une première DropDown qui contient des plages de nombres et une fois une de ces plages choisies, on affiche une deuxième dropdown avec le contenu de cette plage. Et lorsqu’une valeur de la deuxième liste est choisi, on affiche le résultat dans un label.

protected void DropDownChange(object sender, EventArgs e)
{
Thread.Sleep(2000);
Result.Visible = false;
Numbers.Visible = false;
int valSelected;
if (int.TryParse(((DropDownList)sender).SelectedValue, out valSelected))
{
Numbers.Items.Clear();
int start = 0;
int end = 0;
switch (valSelected)
{
case 1:
start = 1;
end = 5;
break;
case 2:
start = 6;
end = 10;
break;
case 3:
start = 11;
end = 15;
break;
}
for (int i = start; i <= end; i++ )
{
Numbers.Items.Add(new ListItem(i.ToString(), i.ToString()));
}
Numbers.Visible = true;
}
}

protected void Numbers_SelectedIndexChanged(object sender, EventArgs e)
{
Thread.Sleep(2000);
Result.Text = string.Format("Vous avez choisi : {0}", ((DropDownList)sender).SelectedValue);
Result.Visible = true;
}

Pour rajouter la fonctionnalité de mise à jour sans rechargement total de la page, c’est très simple.
Il faut rajouter un scriptManager à la page, et un UpdatePanel qui contiendra la deuxième dropdown et le label (on pourrait le faire contenir toute la page, mais la première liste n’étant jamais rechargée, nous n’en avons pas besoin).

Et ca donne ceci :

Mise à jour.....

Simple non ?

Tout ce qu’on a à faire c’est de mettre les balises à rechager dans le ContentTemplate de l’UpdatePanel et à spécifier quel événement doit être intercepté pour faire le rechargement dynamique. Pour cela, on utilise le trigger AsyncPostBackTrigger en précisant l’EventName à SelectedIndexChanged, qui est l’événement de changement pour la liste déroulante.

Notez au passage l’utilisation du controle UpdateProgress pour afficher un petit message lors du rechargement dynamique.

Si vous voulez vous convaincre qu’aucun rechargement de page n’a lieu, rajoutez un label hors de l’update panel :

que vous initialisez dans le OnLoad avec la date du jour :

protected override void OnLoad(EventArgs e)
{
lelabel.Text = DateTime.Now.ToString();
base.OnLoad(e);
}

Vous pourrez constater que la valeur du label ne change pas.

Télécharger la démo (13 ko)