ASP.NET MVC : Helpers et méthodes d'extentions, le mariage parfait

2010-05-05T19:22:00.001-07:00

ASP.NET MVC fournit 3 Helpers essentiels au framework : UrlHelper, HtmlHelper et AjaxHelper que l'on retrouve respectivement sous le nom de Url, Html et Ajax comme propriété.
Ces helpers fournissent un contexte qui expose l'essentiel des méthodes et propriétés "core" les concernant.
Les helpers deviennent alors des accrocheurs de méthodes d'extensions qui vont étendre les fonctionnalités en utilisant le contexte de celui ci. Ainsi, au lieu de créer une méthode d'extension pour ViewPage, ViewPage<T>, ViewUserControl, ViewUserControl<T>, ViewMasterPage et ViewMasterPage<T>, une seule suffit sur HtmlHelper. On peut constater d'ailleur que la plupart des méthodes que l'on retrouve sur ces objets sont des méthodes d'extensions :

Les helpers permettent donc de fournir un contexte aux méthodes d'extensions sans polluer le reste des objets et permettant ainsi de classer ces méthodes, de créer des catalogues de méthodes statiques. Le helper devient un "this" et son écriture devrait justement omettre l'écriture du "this". J'ai ainsi 3 helpers me permettant de résoudre bien des problèmes d'implémentations dans mon application MVC (Ex : AccountHelper, FileHelper). On peut imaginer que ce genre de concept peut s'appliquer dans bien d'autres cas.

Optimisation de listes SQL Server - ASP.NET - HTML

2010-05-04T19:10:00.000-07:00

Il est assez fréquent d'avoir des listes simples (listes de liens, DropDownList's, ListItem's, etc.) de clefs/valeurs nécessitant de multiples requêtes, mappings, objets, etc...

Voici ma solution permettant d'alléger le travail du développeur et des serveurs :
Énoncé :
On souhaite afficher une fiche "détail" issue d'une table d'aliments ([produits]). Chaque aliment possède une ou plusieurs catégories (Ex : Légume, Viande, Produit Frais, Cru, etc...) issues d'une table ([categories_in_produits]) en liaison avec une table de référence ([categories]).
On souhaite maintenant afficher ces catégories sous formes de liens dans la fiche du produit afin de pouvoir rediriger vers une liste des produits pour la catégorie en question.

1. Script T-SQL :
Voici le corps de la procédure stockée :

DECLARE @categories varchar(1000)

-- Concaténation des catégories. ex : 55=Légumes;45=Cru;
SET @categories = ''
SELECT @categories = @categories + c.id + '=' + c.display_name + ';'
FROM categories c
INNER JOIN categories_in_produits cp ON c.id = cp.category_id
WHERE cp.produit_id = @produit_id

-- Requête de résultat
SELECT *, @categories categories
FROM produits
WHERE id = @produit_id

On obtient donc toutes nos catégories en 1 seule requête.

2. Étendre jQuery :
Cette méthode va permettre de parser coté client notre chaine de catégories et de les binder sur un template :
(function($) {
$.fn.databind = function(d, r) {
var p = $.extend({ r: /([^=]*)=([^;]*);/gi, d: '' }, { d: d, r: r });
return this.each(function() {
var s = $(this);
var h = s.html();
var l = h.length - 3;
if(l > 4 && h.indexOf('', l) == l)
h = h.substring(4, l);
s.html(p.d.replace(p.r, h)).show();
});
};
})(jQuery);

3. Allégez votre Html :
Laisser le client parser la chaine de catégories (utilisation du model MVC) :

<script type="text/javascript">
$(document).ready(function() {
$('#template').databind('<%= Model.Categories %>');
});
</script>
<p id="template" style="display: none">[<a href="<%= Url.Action("CategoryList") %>/$1">$2<a>] </p>

Grâce à cette méthode, on économise les transactions avec notre serveur de bases de données, on ne transforme rien coté IIS/ASP.NET, on optimise le HTML généré et on laisse le client parser la chaine. Coté développeur, une seule procédure stockée est nécessaire ainsi que tout ce qui en découle (objets, mapping, data access).

Un exemple testable directement (en incluant jQuery et l'extension de jQuery du point 2) :
Il est possible de spécifier une expression régulière personnalisée pour gérer vos propres concaténations :

<script type="text/javascript">
$(document).ready(function() {
$('#list-languages').databind('FR;EN;IT;ES;', /([^;]*);/gi);
$('#list-languages2').databind('fr=Francais;en=Anglais;it=Italien;es=Espagnol;');
});
</script>
<select id="list-languages" style="display:none"><option value="$1" >$1</option></select>
<select id="list-languages2" style="display:none"><option value="$1" >$2</option></select>

Le fonctionnement de la méthode 'databind' ajoutée à jQuery étant basé sur une expression régulière, il faudra utiliser la syntaxe correspondante pour le template.

Sur certains navigateurs, vous serrez obligé de mettre le template en commentaire () parce que les quotes autour des valeurs des attributs disparaissent. La mise en commentaire peut aussi permettre d'afficher le cadre container avant le binding évitant ainsi d'éventuels sauts lors du chargement de votre page car il n'est plus nécessaire de placer le style "display:none".

Méthode d’extension : Object To Dictionary

2009-09-14T09:30:00.001-07:00

Je parle dans le précédent post de la méthode utilisée pour initialisé un dictionnaire de valeur par certaines briques de la SP1 du 3.5. Elle est souvent utilisée où l’écriture d’un objet anonyme simplifie l’écriture ou pour initialiser un objet en une seule ligne dans la nouvelle syntaxe. Cette méthode consiste à scanner un objet par réflexion pour créer un dictionnaire <Nom de la propriété, Valeur de la propriété>. Cette méthode n’est pas performante pour alimenter un dictionnaire, mais elle peut être utile. Voici donc une méthode d’extension plus générique permettant d’obtenir un résultat similaire :

public static class MyExtensions
{
    public static Dictionary<string, object> ToDictionary(this object obj)
    {
        Dictionary<string, object> dic = new Dictionary<string, object>();
        Type t = obj.GetType();
        foreach (var item in t.GetProperties())
        {
            dic.Add(item.Name, item.GetValue(obj,null));
        }
        return dic;
    }
}

Cette méthode est simple, mais elle peut s’agrémenter de plusieurs surcharges permettant ainsi de filtrer les types ou d’effectuer des conversions par exemple.

“System.Web.Routing” dans les applications ASP.NET

2009-09-11T15:58:00.001-07:00

Cette assembly apporté par le .NET 3.5 SP1 principalement pour ASP.NET MVC et Dynamic Data nous permet d’écrire nos Url’s dans le format de notre choix. L’utilisation de cette assembly va de pair avec “System.Web.Abstraction” utilisée par “System.Web.Routing” dans l’encapsulation du HttpContext dans un HttpContextWrapper et représenté dans un HttpContextBase dans un object RequestContext :

Son utilisation et implémentation est extrêmement simple et elle commence par l’ajout d’une référence à l’Assembly “System.Web.Routing” et “System.Web.Abstraction” et la spécification du HttpModule analysant les Url’s à la source dans la configuration (version IIS 6) :

        <httpModules>
            <add name="RoutingModule"
           type="System.Web.Routing.UrlRoutingModule,System.Web.Routing,Version=3.5.0.0,
           Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
     </httpModules>

L’étape suivante consistera à créer une classe permettant de résoudre le HttpHandler de la réponse. Pour que cette classe puisse être utilisé par la table de routage, elle doit implémenter l’interface “System.Web.Routing.IRouteHandler” :

public class PageRouteHandler : IRouteHandler
{
public string UrlFormat { get; set; }

    public PageRouteHandler(string urlFormat)
    {
        this.UrlFormat = urlFormat;
    }

    IHttpHandler IRouteHandler.GetHttpHandler(RequestContext requestContext)
    {
        string vp = string.Format(this.UrlFormat, requestContext.RouteData.Values["page"]);
        return (IHttpHandler)BuildManager.CreateInstanceFromVirtualPath(vp, typeof(IHttpHandler));
    }
}

Cette classe va donc nous permettre de résoudre le chemin virtuel d’une page grâce à un format de base et à l’information “page” située dans les valeurs de “RouteData” résultat du parsing de l’url. Afin de suivre la méthodologie de ASP.NET MVC, on va maintenant utiliser les méthodes d’extensions pour ajouter simplement un format à la table de routage :

public static class PageRouteExtentions
{
    public static void MapPage(this RouteCollection routes, string routeName, string serverFormat, string clientUrl)
    {
        routes.Add(routeName, new Route(clientUrl, new PageRouteHandler(serverFormat)));
    }
}

Grâce à cette méthode d’extension, il devient très aisé d’enregistrer une route :

public class Global : System.Web.HttpApplication
{
    protected void Application_Start(object sender, EventArgs e)
    {
        RouteTable.Routes.MapPage("Base", "~/{0}.aspx", "{page}.php");
…

Comme on le voit, le paramètre “page” est entouré de 2 accolades dans l’url client, c’est une règle permettant à la Route de résoudre le format de notre url. Il y a pleins d’autres options, comme des contraintes de formats, des valeurs attachées à la routes dans rapport à l’url, des valeurs par défaut…

On notera que l’objet “System.Web.Routing.RouteDataDictionary” utilisé pour toutes les valeurs d’une “System.Web.Routing.RouteData” à la particularité d’avoir un constructeur permettant de scanner un objet par réflexion pour obtenir clef/valeur de chaque propriété. Cette méthode est très répandue dans l’ASP.NET MVC, elle permet de faire usage à volonté des objets anonymes.

BuildProvider : Custum compilation ASP.NET

2009-08-19T12:37:00.000-07:00

L’ASP.NET est extensible de multiple façon : IHttpHandler & Factory’s, les contrôles ASP.NET. Mais l’extension la plus intéressante du moteur ASP.NET est la compilation personnalisé.
Comment cela marche t-il ? Grâce à BuilderProvider. La classe BuilderProvider va nous permettre de compiler du code sur le même principe que l’ASP.NET avec les pages ASPX, ASCX, Master, etc. On va donc créer un générateur pour une extension de fichier définie dans la configuration et le moteur ASP.NET se chargera de compiler le code généré et l’intégrer dans notre application au démarrage de celle-ci.

Étape 1 : Génération du code source et création du provider de génération :

public class SampleBuildProvider : BuildProvider
{
private CompilerType _compilerType = null;

public SampleBuildProvider()
{
_compilerType = base.GetDefaultCompilerTypeForLanguage("C#");
}

public override CompilerType CodeCompilerType
{
get { return _compilerType; }
}

public override void GenerateCode(AssemblyBuilder assemblyBuilder)
{
using (TextWriter wr = assemblyBuilder.CreateCodeFile(this))
{
wr.WriteLine("using System;");
wr.WriteLine("using System.Collections.Generic;");
wr.WriteLine("using Builder;");

wr.WriteLine("namespace MyNamespace");
wr.WriteLine("{");
Uri uri = new Uri(base.VirtualPath);
wr.WriteLine("public class My{0} : IHttpHandler", Path.GetFileName(base.VirtualPath).Split(new char[] { '.' }));
wr.WriteLine("{");

// Implémentation de IHttpHandler

wr.WriteLine("}}");
}
}

public override Type GetGeneratedType(CompilerResults results)
{
string type = string.Format("MyNamespace.My{0}", Path.GetFileName(base.VirtualPath).Split(new char[] { '.' }));
return results.CompiledAssembly.GetType(type);
}
}

Étape 2 : Spécifier dans la section “Compilation” du Web.Config quels sont les fichiers concernés :

Étape 3 : Utilisation des éléments générés :

Dans notre exemple, on implémente IHttpHandler, il nous suffit de créer alors un Factory de Handler pour cette nouvelle extension :

[PermissionSet(SecurityAction.LinkDemand, Unrestricted = true), PermissionSet(SecurityAction.InheritanceDemand, Unrestricted = true)]
public class MyHandlerFactory : IHttpHandlerFactory
{
public MyHandlerFactory()
{
}

public virtual IHttpHandler GetHandler(HttpContext context, string requestType, string virtualPath, string path)
{
Type type = BuildManager.GetCompiledType(virtualPath);
return Activator.CreateInstance(type) as IHttpHandler;
}

public virtual void ReleaseHandler(IHttpHandler handler)
{
}
}

et de le spécifier dans la configuration :

On peut trouver de multiples applications, les plus courrantes vont utiliser le Xml pour décrire du code.

Fonctionnement du Dictionary grâce aux nombres premiers

2009-06-04T14:40:00.001-07:00

Le Dictionnaire est souvent utilisé pour obtenir une collection à accès rapide ~~identique~~ presque identique via une clef.

Mais comment marche t-il ?
Grâce aux nombres premiers !
Pour ceux qui ne connaissent pas, les nombres premiers ne se divise que par 1 ou par eux même. Ceux-ci vont nous permettre de calculer les index de positionnement de nos valeurs dans la collection.

Rappelons qu’une List<T> se base à l’origine sur un tableau T[] et que la List<T> s’occupe de gérer la taille de ce tableau et l’agrandir au besoin.

Un dictionnaire fonctionne de la même manière qu’une List<T> en utilisant une structure pour stocker Clef/Valeur, appelée Entry<TKey,TValue> dans le framework :

Disons que notre structure contient pour le moment ceci :

public struct Entry<TKey, TValue>
{
public TKey key;
public TValue value;
}

La différence avec une List<T>, c’est que le dictionnaire possède un index permettant un filtrage des données lors de leurs récupérations.
Cet index est un tableau d’entier de la même taille que le tableau de valeur :

public class Dictionary
{
private int[] buckets;
private Entry<TKey,TValue> entries;
}

Les tailles des deux tableaux sont égales entre elle et à un nombre premier.
Lors de l’ajout d’un item au tableaux “entries”, voici ce qui est effectué :

On récupère le HashCode de la clef pour obtenir un entier :
int hashCode = key.GetHashCode();
On récupère le reste de la division par le nombre premier utilisé pour la taille des tableaux :
int index = hashCode % entries.Length;
On obtient ainsi un nombre strictement inférieur à la taille de la collection. Ce nombre correspondra à un index dans le tableau d’index “buckets”. À cette position, on y stockera un index du tableau “entries” correspondant à l’index de la dernière clef dont la division du HashCode retourne la même valeur.

Le problème est que maintenant, on ne peut que récupérer le dernier enregistrement ajouté. Il nous suffit alors de stocké ce lui du précédent dans notre structure “Entry” :

public struct Entry<TKey, TValue>
{
public TKey key;
public TValue value;
public int previous; // Appelé next dans le framework
public int hasCode;
}

En simplifiant le code d’ajout d’item, on obtient ceci :

public void Add(TKey key, TValue value)
{
// Calcul d'un hashcode (positif)
int hashCode = key.GetHashCode() & int.MaxValue;
// Reste de la division
int index = hashCode % this.buckets.Length;
// Positionnement dans le tableau de valeur
int freeEntry = this.count;
this.count++;
this.entries[freeEntry].hashCode = hashCode;
// Récupération de l'index de l'ancienne clef vu en premier
this.entries[freeEntry].next = this.buckets[index];
this.entries[freeEntry].key = key;
this.entries[freeEntry].value = value;
// Définition de la nouvelle entrée vu en premier
this.buckets[index] = freeEntry;
}

Code très simplifié (la suppression, la présence de la clef et l’augmentation de taille ne son pas gérés).

On récupèrera donc la valeur ainsi :

public TValue Get(TKey key)
{
int hashCode = key.GetHashCode() & int.MaxValue;
int index = hashCode % this.buckets.Length;
for (int i = this.buckets[index]; i >= 0; i = this.entries[i].next)
{
if (this.entries[i].hashCode == hashCode)
{
return this.entries[i].value;
}
}
return default(TValue);
}

La principale source de gains de performance vient à l’initialisation du dictionnaire, ce qui est aussi le cas des List<T> : La taille de départ. Celle ci est d’autant plus importante que le dictionnaire doit, en plus de la copie mémoire des tableaux, recalculer les index avec la nouvelle taille.

JavaScript : parseInt ne retourne pas la valeur souhaitée

2009-04-14T03:55:00.000-07:00

Sur des valeurs comme "08" ou "09", le parseInt de JavaScript écrit ainsi :

var val = parseInt("09");
alert(val);

Nous affiche 0.

Pourquoi ? Parce que JavaScript par du principe que toutes chaines de caractères commençant par 0 est en base 8, comme une chaine commençant par un "x" est en base 16.

Alors comment régler ce problème ? En lui spécifiant la base :

var val = parseInt("09", 10);
alert(val);

ASP.NET : Attention au contrôle Image sans URL

2009-02-17T03:46:00.000-08:00

Après avoir encore vu le problème réapparaître ce matin, voici l'explication du pourquoi il ne faut pas oublier de renseigner la propriété "ImageUrl" d'un contrôle System.Web.UI.WebControls.Image.
Cette propriété non obligatoire contient le chemin de l'image (le "src" de la balise "img"). Il peut nous arriver de ne pas vouloir la renseigner pour x raison et ainsi laisser cette propriété vide.
Mais cela peut poser un problème et pas toujours décelé.

Ex :
ASP.NET : <asp:Image ID="Image1" runat="server" />
HTML généré : <img id="Img1" src="" style="border-width:0px;" />

Le problème est alors le suivant : n'ayant pas d'URL, la balise image appelle la page par défaut du répertoire en cours. Si aucune page par défaut n'y est présente, aucun soucis. Si une page par défaut est présente, elle est appelé.
Il vous suffit d'essayer en posant un point d'arrêt dans cette page par défaut et lancer la page contenant la balise image.

La conséquence direct est un appel inutile vers cette page, mais elle peut s'avérer bien plus grâve.

TechDays 2009 : La démo jQuery

2009-02-15T10:15:00.000-08:00

Lors de la session sur ASP.NET 4.0, il fut évoqué l'integration de jQuery en complément et non en remplacement, du Framework Microsoft Ajax. La démo sur jQuery ne portait que sur ce Framework et donc sur une simple page HTML. L'exercice, 6 images brutes à réduire et ajouter des effets de mouseover et un agrandissement sur click... en une ligne de code JavaScript.
Voici ma reproduction de ce code qui doit être assez proche de la démo :

<img alt="" src="Images/Butterfly.jpg" /><img alt="" src="Images/Field.jpg" /><img alt="" src="Images/Flower.jpg" />
<img alt="" src="Images/Leaves.jpg" /><img alt="" src="Images/Rocks.jpg" /><img alt="" src="Images/Tulip.jpg" />
<script type="text/javascript">
$("img").css({height:"75px", opacity: 0.7, margin:"5px", border: "gray 1px solid", padding: "5px"})
.hover(
function(){$(this).css({opacity: 1, border: "black 1px solid"});},
function(){$(this).css({opacity: 0.7, border: "gray 1px solid"});})
.click(function()
{
$("#img-preview").animate({height:"0px",width:"0px", marginLeft:"0px", marginTop:"0px"}, "normal", "linear", function(){$(this).remove();});
$(this).clone()
.css({height:"0px",width:"0px", position:"absolute", left:"50%", top:"50%"})
.attr("id", "img-preview")
.appendTo($("body"))
.animate({height:"768px",width:"1024px", marginLeft:"-512px", marginTop:"-384px"}, "normal", "linear")
.click(function(){$(this).animate({height:"0px",width:"0px", marginLeft:"0px", marginTop:"0px"}, "normal", "linear", function(){$(this).remove();});});
});
</script>

Pour télécharger jQuery : http://docs.jquery.com/Downloading_jQuery avec version spécial pour Visual Studio.

Pour télécharger l'exemple complet : http://sebdoucet.googlepages.com/jQuery.rar

TechDays 2009 : Microsoft Parallel Extensions , la démo sur 24 processeurs

2009-02-10T11:15:00.000-08:00

Pour les démos des TechDays sur les Parallel Extensions, un serveur de 24 corps et des résultats impressionnants.
Parallel sur les boucles, PLinq pour Linq To Object et Linq To Xml, Task pour la gestions de taches... le framework promet beaucoup dans la simplification des traitements parallèles.
Disponible en CTP pour les framework 3.5, il est seulement prévu pour être intégré dans le .NET 4.0 et Visual Studio 2010.
Visual Studio 2010 ne sera pas en reste sur les traitements parallèles avec l'ajout d'une multitudes d'outils pour observer et déboguer vos Threads.

Téléchargement de la CTP pour .NET 3.5

TechDays 2009 : Les MVx

2009-02-10T10:59:00.001-08:00

Microsoft et ses partenaires sont bien décidé à nous faire totalement abandonné le fichier de code behind : MVC ASP.NET, MV VM Silverlight 2 et WPF, le Full Ajax ASP.NET, etc...
De très bon pattern permettant de supprimer complètement la liaison entre les actions et la présentation.
Microsoft nous démontre en plus que l'utilisation de ce modèle simplifie la mise en place de routines de tests avec ses nouvelles librairies de tests.
Ce modèle permet aussi de rendre le code plus maintenable par son abstraction, scinde la partie design de la partie code, comprend l'implémentation du pattern de commande...
Il s'agit là d'une vrai volonté de Microsoft de nous changer nos habitudes de développement, ce qui n'est pas pour me déplaire.

TabContainer : Chargement asynchrone des données lors de l'affichage de l'onglet

2008-07-16T14:33:00.000-07:00

Le contrôle d'onglet de l'Ajax Control Toolkit permet d'immiter les onglets WinForm.

Le problème : ce contrôle charge tous ces onglets même lorsque l'utilisateur ne les utilisent pas. Ce problème se pose d'autant plus si le chargement des onglets est lourd.

Le but : ne charger les onglets que lorsque vous les ouvrez en évitant de recharger la page complète.

La solution : elle s'appelle UpdatePanel.

Le principe : Ajouter un UpdatePanel dans chaque onglet. Chaque UpdatePanel contiendra un bouton dont l'évenement Click chargera et actualisera le contenu. Ensuite, il suffit d'utiliser le PostBack du bouton pour le placer sur la propriété OnClientClick des TabPanels.

La démo :

Code ASP.NET :

<ajax:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<ajax:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<ContentTemplate>
<asp:UpdatePanel runat="server" ID="UpadatePanel1">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Refresh" onclick="Button1_Click" />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="UpadateProgress1" AssociatedUpdatePanelID="UpadatePanel1">
<ProgressTemplate>
Chargement en cours...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<asp:UpdatePanel ID="UpadatePanel2" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Refresh" onclick="Button2_Click" / >
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="UpadateProgress2"AssociatedUpdatePanelID="UpadatePanel2" >
<ProgressTemplate>
Chargement en cours...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>

Code C# :

private const string POSTBACK = "var {0}_clicked = false; {0}_Click=function(){{if(!{0}_clicked){{Sys.WebForms.PageRequestManager.getInstance()._doPostBack('{1}',''); {0}_clicked=true;}}}};";

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
StringBuilder sb = new StringBuilder();
sb.AppendFormat(POSTBACK, this.Button1.ID, this.Button1.UniqueID);
sb.AppendFormat(POSTBACK, this.Button2.ID, this.Button2.UniqueID);

this.TabPanel1.OnClientClick = string.Format("{0}_Click", this.Button1.ID);
this.TabPanel2.OnClientClick = string.Format("{0}_Click", this.Button2.ID);

sb.AppendFormat("function pageLoad(sender, args){{{0}_Click();}};", this.Button1.ID);

this.ClientScript.RegisterStartupScript(this.GetType(), "UPDATE_PANELS", sb.ToString(), true);
}

protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(1000);
this.TextBox1.Text = DateTime.Now.ToString();
}

protected void Button2_Click(object sender, EventArgs e)
{
Thread.Sleep(1000);
this.TextBox2.Text = DateTime.Now.ToString();
}

Cette démo n'est pas forcément des mieux synthaxée, mais elle explique bien la mise en oeuvre d'un chargment différré des onglets.

Le DataFormatString et le GridView

2008-07-09T03:54:00.001-07:00

Cette propriété permet de formater les données d'une colonne (System.Web.UI.WebControls.BoundField par exemple) afin de les afficher dans un format particulier. Cette propriété fonctionne de la même façon que la méthode "Format" de System.string.
On l'utilise souvent pour formater des champs de type System.DateTime et afficher seulement la date dans le format de notre choix :

<asp:BoundField DataField="LAST_UPDATE" DataFormatString="{0:dd/MM/yyyy}" />

En C#, cela reviendrait à effectuer ceci :

string dtFormatee = myDate.ToString("dd/MM/yyyy");

ou

string dtFormatee = string.Format("{0:dd/MM/yyyy}", myDate);

C'est bien la dernière méthode qu'utilise le System.Web.UI.WebControls.GridView, ce qui nous permet d'en déduire que les chaines de formats suivantes sont valide :

<asp:BoundField DataField="LAST_UPDATE" DataFormatString="{0:dd} du mois {0:MM}" />
-->> 02 du mois 05

<asp:BoundField DataField="LAST_UPDATE" DataFormatString="Mise à jour un {0:dddd}" />
-->> Mise à jour un mercredi

<asp:BoundField DataField="LAST_UPDATE" DataFormatString="Mise à jour en <b>{0:MMMM}</b> de l'an de grâce <b>{0:yyyy}</b>" />
-->> Mise à jour en juillet de l'an de grâce 2008

Le "bug" rencontré :
Il ne s'agit pas vraiment d'un bug, mais d'une petite logique pas forcement évidente : Lors de vos développement, ce petit formatage convient parfaitement, mais lors de la mise en production, on s'apperçoit que le format n'est plus pris en compte.
Ceci vient du fait que le champ est encodé en Html (propriété HtmlEncode) et que du fait que cette propriété est à "True", le formatage ne s'applique plus :

<asp:BoundField DataField="LAST_UPDATE" HtmlEncode="false" DataFormatString="{0:dd MMMM}" />

Réflection .NET

2008-06-01T04:33:00.000-07:00

Une petite démo de réflection .NET permettant de récupérer la valeur d'une propriété d'un objet par son nom sous forme de chaine de caractères. Pour ce petit exercice assez simple, j'ai créé un type de liste générique triable par le nom d'un champs de l'objet en collection, si le champ en question implémente bien System.IComparable, ce qui est le cas des types primaires et courants du framework.

/// <sumary>

/// Type permettant de spécifier le sens du tri
/// <sumary>

public enum OrderType : int { Asc = 1, Desc = -1 }

/// <sumary>

/// Interface à implémenter pour la gestion de collections triables
/// <sumary>

public interface IOrderableCollection
{
/// <sumary>

/// Obtient ou définit la propriété sur laquelle la collection est triée
/// <sumary>

PropertyInfo PropertyOrder { get; set; }
/// <sumary>

/// Obtient ou définit le sens du tri
/// <sumary>

OrderType OrderType { get; set; }
/// <sumary>

/// Tri la liste en fonction du nom du champ et du sens de tri
/// <sumary>

void Sort(string fieldName, OrderType orderType);
}

/// <sumary>

/// Exemple d'implémentation sur une collection generics
/// <sumary>

public class OrderableList <T> : List<T>, IOrderableCollection
{
public PropertyInfo PropertyOrder { get; set; }
public OrderType OrderType { get; set; }

public void Sort(string fieldName, OrderType orderType)
{
this.OrderType = orderType;
this.PropertyOrder = typeof(T).GetProperty(fieldName);
if (this.PropertyOrder != null) this.Sort(Compare);
}

private int Compare(T t1, T t2)
{
object obj1 = this.PropertyOrder.GetValue(t1, null);
object obj2 = this.PropertyOrder.GetValue(t2, null);

IComparable obj1Comparable = obj1 as IComparable;
if (obj1Comparable != null)
return obj1Comparable.CompareTo(obj2) * (int)this.OrderType;
return 0;
}
}

(Les champs sont déclarés pour le dernier compilateur .NET)

L'exemple est simple et sans doute moins performant que Link, mais il permet de voir comment utiliser la Réflection .NET

XmlSerializer : Désérialiser correctement votre fichier

2007-12-04T04:51:00.000-08:00

Lorsque vous utiliser le System.Xml.Serialization.XmlSerializer, la tentation de lui passer un System.IO.FileStream directement est grande :

StringCollection result = null;
using (FileStream fs = new FileStream(path, FileMode.OpenOrCreate))
{
result = (StringCollection)new XmlSerializer(typeof(StringCollection)).Deserialize(fs);
}

Cela marche souvent très bien, mais la désérialisation n'est pas parfaite (ex : le "\r\n" sont remplacés par "\n").
Afin de désérialiser correctement votre flux, il suffit de modifier légèrement votre code pour passer un System.Xml.XmlTextReader au lieu du System.IO.FileStream :

StringCollection result = null;
using (FileStream fs = new FileStream(path, FileMode.OpenOrCreate))
{
result = (StringCollection)new XmlSerializer(typeof(StringCollection)).Deserialize(new XmlTextReader(fs));
}

Et voilà vos données correctement récupérées.

Le WebBrowser et le Flash

2007-11-14T04:57:00.000-08:00

Si vous avez déjà essayé de naviguer sur le Net avec notre ami le WebBrowser du .NET 2.0, vous avez sans doute remarqué qu'il n'apprécit guère le Flash. Le problème, bug, est connu (voir le lien plus bas) et se pose ainsi : Lorsqu'on est sur une application flash, le premier clique de souris marche et après plus rien.
Il s'agirait d'un problème de focus. Voici une solution pour remédier à ce problème :

Dans une classe héritant de WebBrowser, surchargez la méthode WndProc comme ceci :

protected override void WndProc(ref Message m)
{
if (m.Msg == 0x0021 && !DesignMode)
{
Control control = this;
while (control != null)
{
if (control.GetType() == typeof(ContainerControl))
{
control.Focus();
break;
}
control = control.Parent;
}
}
}

Le problème de focus est ainsi réglé en s'assurant que le conteneur principal garde le focus.

Attention quand même, ce code ne fonctionnera pas si vous insérez votre WebBrowser dans un UserControl (celui ci hérite de ContainerControl), mais la plupart du temps, un UserControl peut se remplacer par un Control, même si cela ne se fait qu'après la mise en place des éléments plus aisée avec le mode Design du UserControl (En général, vous n'aurez qu'à supprimer 2 lignes pas importantes que le Control ne supporte pas).

Une autre solution de contournement est proposée ici :
https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=94320

IDWebBrowserEvents & NewWindow3

2007-10-28T02:03:00.000-07:00

Dans les précédents posts, je vous ai montré comment gérer les Popup's modales du JavaScript en surchargeant les méthodes "ShowDialog...". Mais il reste la méthode JS "window.open" et le lien avec un "target" dans une frame inconnu ou vide. Pour cela, nous allons utiliser une Interface COM du WebBrowser (n'oublions pas que notre WebBrowser est le Wrapper d'un controle ActiveX). L'interface utilisée est "IDWebBrowserEvents" et la méthode qui nous intéresse est "NewWindow3" :

[ComImport()]
[Guid("34A715A0-6587-11D0-924A-0020AFC7AC4D")]
[InterfaceType(ComInterfaceType.InterfaceIsIDispatch)]
[TypeLibType(TypeLibTypeFlags.FHidden)]
public interface IDWebBrowserEvents
{
[DispId(273)]
void NewWindow3([In, MarshalAs(UnmanagedType.IDispatch)] ref object pDisp,
[In, Out] ref bool cancel, //Indique si on annule ou non l'événement
[In] ref object flags,
[In] ref object URLContext, //URL de la page d'origine
[In] ref object URL); //URL de la Popup
}

Une fois cette interface ajoutée à votre projet, il nous faut créer une classe qui l'implémente :

public class WBNewWindow : StandardOleMarshalObject, IDWebBrowserEvents
{
public void NewWindow3(ref object pDisp, ref bool cancel, ref object flags, ref object URLContext, ref object URL)
{
//Traitement des nouvelles fenêtres
}
}

Il faut maintenant faire la liaison entre notre contrôle et le traitement de cette événement :

public class WebBrowser2 : WebBrowser
{
private AxHost.ConnectionPointCookie _cookieNewWindow;
private WBNewWindow _eventNewWindow;

protected override void CreateSink()
{
base.CreateSink();
_eventNewWindow = new WBNewWindow ();
_cookieNewWindow = new AxHost.ConnectionPointCookie(base.ActiveXInstance, _eventNewWindow, typeof(IDWebBrowserEvents));
}
protected override void DetachSink()
{
if (this._cookieNewWindow != null)
{
this._cookieNewWindow.Disconnect();
this._cookieNewWindow = null;
}
base.DetachSink();
}
....

Et voilà, la démo ne traite pas l'événement, mais ce qu'il reste à faire coule de source. Ici, on viens de voir comment ajouter un traitement personnalisé d'un interface COM d'un ActiveX.
La méthode la plus propre pour organiser tout ceci consiste à insérer la classe qui implémente l'interface dans celle du WebBrowser et de la rendre privée. Ensuite, vous pouvez créer un événement qui gère les nouvelles fenêtres et le déclancher dans une méthode qui sera appellée par "NewWindow3".

Exécution de C# via JavaScript

2007-10-25T03:04:00.000-07:00

Après avoir vu comment remplacer la fonction "showModalDialog" dans le précédent post, on peut se douter que l'on peut personnaliser chaque méthodes du JS comme ceci :

((IHTMLWindow2)this.Document.Window.DomWindow).execScript("window.showModelessDialog = function(url, frame, option){ Alert('La méthode que le veux'); }", "javascript");

Mais il y a mieux encore : ObjectForScripting. Ceci est une propriété du WebBrowser permettant d'ajouter des options au JavaScript. Vous créez une classe, visible par COM, et vous y insérer vos propres méthodes en .NET. Il ne vous reste qu'à créer une instance de cette classe pour l'attribuer au champ "ObjectForScripting".

Voici un exemple de classe très simple avec une procédure permettant de remplacer "showModalDialog" :

[ComVisible(true)]
public class ObjectScripting
{
public object OpenModal(string url, object frame, string options)
{
MessageBox.Show(url, "Messages personnels");
return true;
}
}

Vous pouvez ajouter ceci dans le constructeur de votre WebBrowser :

this.ObjectForScripting = new ObjectScripting();

Et voici comment remplacer notre méthode "showModalDialog" :

((IHTMLWindow2)this.Document.Window.DomWindow).execScript("window.showModelessDialog = function(url, frame, option){ return window.external.OpenModal(url, frame, option); }", "javascript");

Avec cette méthode, on peut imaginer faire la différence avec les Popup's classiques et gérer les fenêtres Modales.

Attention : Ce type de remplacement peut ouvrir de belles failles de sécurités, veillez à faire simple et à ne pas trop surcharger le JavaScript.

Le WebBrowser et ses Popup's

2007-10-24T04:39:00.000-07:00

Le Wrapper de base du WebBrowser dans le .NET Framework 2.0 est assez basique. Pour en faire un navigateur viable, il faut lui ajouter beaucoup d'options, via ses Interfaces COM ou directement en ajoutant de nouvelles fonctionnalités.
L'option du jour, c'est la suppression des Popup's liées au JavaScript, les fenêtres modales : "window.showModalDialog".
Afin de ne pas les supprimer, mais de les transformer en Popup standards et interceptables via l'interface "IDWebBrowserEvents" et sa méthode "NewWindow3" (voir dans un prochain post), voici comment la remplacer par la méthode "window.open" classique :

protected override void OnNavigated(WebBrowserNavigatedEventArgs e)

{
((IHTMLWindow2)this.Document.Window.DomWindow).execScript("window.showModalDialog = window.open", "javascript");

((IHTMLWindow2)this.Document.Window.DomWindow).execScript("window.showModelessDialog = window.open", "javascript");

base.OnNavigated(e);
}

Pour un premier, sans doute le plus simple, ce petit ajout peut aussi devenir une prise de tête pour rien étant donné la simplicité du code.
Le principe ici est de remplacer la méthode "showModalDialog" par une autre ayant le même prototype.
L'événement peut être aussi annulé en remplaçant par "null" la méthode "window.open".

Ce code est une surcharge de OnNavigated, pour une classe qui hérite de WebBrowser, mais vous pouvez aussi placer ce code dans l'événement "Navigated" de votre WebBrowser.

Afin d'accéder à l'IHTMLWindow2, vous devrez ajouter une référence .NET à "Microsoft.mshtml" et ajouter le namespace "mshtml"

Rappel : Ce code ne sert pas à supprimer les Popup's, seulement à les rendre interceptable par NewWindow2 et/ou NewWindow3 issus de l'interface COM "IDWebBrowserEvents".

L'API GetShortPathName

2007-10-05T09:35:00.000-07:00

Suite à un besoin, je me suis penché sur la question de retrouver le chemin court d'un fichier (Ex : "C:\PROGRA~1\") afin de pouvoir ouvrir un fichier avec plus de 256 caractères sur le chemin long avec un FileInfo ou un FileStream.
Après avoir cherché s'il existe une méthode Managed dans le Framework, je me suis tourné vers PInvoke.NET pour mapper l'API GetShortPathName :

[DllImport("kernel32.dll", CharSet = CharSet.Auto, SetLastError = true)]
static extern int GetShortPathName(
[MarshalAs(UnmanagedType.LPTStr)] string lpszLongPath,
[MarshalAs(UnmanagedType.LPTStr)] StringBuilder lpszShortPath,
int cchBuffer);

lpszLongPath : Le chemin de fichier long (string)
lpszShortPath : Le chemin de fichier court : Un StringBuilder dont vous fixerez d'avant sa capacité à 256 caractères
cchBuffer : Le nombre de caractères du StringBuilder ()

Une fois cette fonction appellée, récupérez la chaine du StringBuilder pour obtenir le chemin court.

using NameSpace en JavaScript

2007-09-07T07:04:00.001-07:00

Ben oui, pour ceux qui ne le savaient pas, on peut faire de la POO en JS... et classer nos objets dans des NameSpaces.
Mais, programmeurs .NET, des namespaces c'est bien, mais pouvoir les déclarer en entête, c'est mieux.
Et bien voilà ma solution :
Partez du principe que dans tous vos fichiers JS, il y en a un minimum que vous déclarez dans votre code HTML. Et en entête de ce fichier, placez le code suivant :

function using(NameSpace)
{
if(eval(NameSpace) != null) return;
var XMLHttpRequest = null;
if(window.XMLHttpRequest)
XMLHttpRequest = new XMLHttpRequest();
else if(window.ActiveXObject)
XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest.open("GET", NameSpace + ".js",false);
XMLHttpRequest.send(null);
eval(XMLHttpRequest.responseText);
}

Maintenant, plusieurs conditions pour cette fonction marche :

Votre fichier JS dois quand même être présent
Il doit porter le même nom que le NameSpace qu'il contient

Et voilà, maintenant dans mon fichier "Wapiti.WebForm.js", j'ai besoin du fichier "Wapiti.Drawing.js", voilà donc mon entête de fichier JavaScript :
using("Wapiti.Drawing");
Comme en C#... j'aime ça .