Archives par mot-clé : ASP.NET

Glimpse : Debugger votre application ASP.NET

Je vais présenter aujourd’hui Glimpse, un outil qui va vous permettre de debugger votre application ASP.NET (MVC ou WebForms) plus facilement.

Installation

Glimpse s’installe facilement via NuGet. Pour cela, faire clic droit sur votre projet ASP.NET et cliquer sur Gérer les packages NuGet … . Sélectionner En Ligne et rechercher Glimpse. Il existe une version de Glimpse pour chaque version de MVC et pour WebForms.

Glimpse - Installation

Installez la version en fonction de votre application web.

Utilisation

Lors de l’ajout de Glimpse via NuGet, Glimpse rajoute automatiquement une section permettant de configurer Glimpse dans votre web.config.

Par défaut, glimpse est activé coté serveur seulement en local via la ligne suivante rajoutée dans le web.config :

<glimpse defaultRuntimePolicy="On" endpointBaseUri="~/Glimpse.axd">

Vous pouvez désactiver complétement Glimpse en passant defaultRuntimePolicy à Off. Il est également possible de configurer plus finement Glimpse. Pour cela, je vous renvoie vers la documentation concernant la configuration.

Par défaut, Glimpse n’est pas activé coté client. Lancer votre application web et aller à l’adresse racine de votre application et ajouter Glimpse.axd (http://localhost:portname/Glimpse.axd).

Cette page permet de configurer Glimpse et de l’activer. L’activation se fait via les boutons Turn Glimpse On et Turn Glimpse Off (ces boutons sont des bookmarklets qui vous pouvez glisser / déposer dans votre barre d’adresse pour une activation/désactivation rapide). Cette page permet également de gérer les onglets qui seront affichés dans Glimpse.

Glimpse - Configuration

(en vert dans la barre d’addresse, les bookmarklets permettant l’activation/désactivation rapide).

Vous pouvez maintenant retourner sur votre application. Une fois activée, vous verrez en bas à droite de votre écran la barre Glimpse.Cette barre affiche les informations relative à la page courante :

  • HTTP : temps de réponse, …
  • Host : Information Serveur (Controller/Action, Vue, …)
  • Ajax : le nombre de requêtes AJAX.

Glimpse - Mode Reduit
Au survol d’une zone, on affiche un volet afin plus d’information :

Glimpse - Information Http
Au clic sur le g (en bas à droite), on passe en mode avancé avec un système d’onglet comme on peut l’avoir avec une barre d’outils comme Firebug.

Voici quelques onglets présent dans cette vue avancée :

L’onglet Configuration permet de consulter la configuration (web.config) de l’application :

Glimpse - Configuration

L’onglet Timeline présente l’exécution de la requête dans le temps

Glimpse - Onglet TimeLine

L’onglet Request présente les informations de la requête :

Glimpse - Onglet Requete

L’onglet Route présente la résolution de la route :

Glimpse - Onglet Route

L’onglet Trace permet d’afficher les messages écrit via System.Diagnostics.Trace et Debug

public ActionResult Index()
{
    System.Diagnostics.Trace.Write("Je suis une trace");
    System.Diagnostics.Debug.Write("Je suis un debug");
    return View();
}

Glimpse - Trace

Plugins

Glimpse supporte des extensions, à installer via NuGet, qui permettent de rajouter un onglet contenant les informations relatives à l’extension. Il existe notamment :

  • une extension pour Entity Framework (comme pour ASP.NET veillez à installer le package lié à la version d’EF que vous utilisez), qui permet d’afficher les requêtes effectuées ainsi que leur temps d’exécution.
  • une extension pour Log4Net qui permet de voir les entrées de Log4Net

Liens

Utilisation du cache ASP.NET dans un Web Service asmx

Une des méthodes pour améliorer les performances de son site web est l’utilisation du cache. Ce dernier permet de garder en mémoire des informations afin de ne pas les recalculer à chaque appel. L’utilité de l’objet cache est qu’il permet de définir une politique d’expiration, c’est à dire de définir combien de temps les données enregistrées dans le cache sont valides. Une fois cette durée expirée, la donnée sera supprimée du cache. Celle-ci sera recalculée à l’appel suivant.

Dans une page aspx, l’accès au cache se fait par l’appel à l’objet Cache. Dans un web service (asmx), il faut passer par le contexte Http : HttpContext.Current.Cache

HttpContext ctx = HttpContext.Current;
//Si la valeur est dans le cache on la renvoie
if (ctx.Cache["CachedData"] != null)
{
    return (CachedData)ctx.Cache["CachedData"];
}
//On récupère et on enregistre dans le cache avec une durée de rétention de 7 jours
CachedDataresult = DataManager.GetData();
ctx.Cache.Insert("CachedData", result, null, DateTime.Today.AddDays(7), TimeSpan.Zero);
return result;

Voici le lien vers la page MSDN

ASP.NET MVC : Requetes Ajax multiples et Session

Dans une des applications dont je m’occupe, nous utilisons ASP.NET MVC (dans la version 3) dans une web application ou le contenu du site est mis à jour via des requêtes AJAX. J’ai remarqué que certaines actions pourtant rapide si effectuée seule, prenait beaucoup de temps lorsque celle-ci était effectuée après avoir lancée une autre action plus longue. L’application semblait comme bloquée pour la plupart des actions nécessitant le serveur.

Après analyse, j’ai vu qu’il s’agissait d’un problème lié à Session State.

Voici ce que dit la MSDN concernant Session State et les demandes simultanées.

Demandes simultanés et état de session
L’accès à l’état de session ASP.NET s’effectue exclusivement par session, ce qui signifie que si deux utilisateurs différents effectuent des demandes simultanées, l’accès à chaque session distincte est accordé simultanément. Toutefois, si deux demandes simultanées sont faites pour la même session (en utilisant la même valeur SessionID), la première demande a l’accès exclusif aux informations sur la session. La deuxième demande s’exécute uniquement après que la première demande est terminée. (La deuxième session peut également obtenir l’accès si le verrou exclusif sur les informations est libéré parce que la première demande dépasse le délai d’attente de verrouillage.) Si EnableSessionState de la directive @ Page a la valeur ReadOnly, une demande d’informations de session en lecture seule n’entraîne pas de verrouillage exclusif des données de session. Cependant, les demandes de données de session en lecture seule risquent encore de patienter jusqu’à ce qu’un verrouillage définit par une demande de données de session en lecture-écriture soit désactivé.

Voici un exemple montrant ce problème. J’ai créé un controller qui a 2 Actions de type JsonResult. Je simule un traitement long pour la méthode accédant à une variable en Session.

[SessionState(System.Web.SessionState.SessionStateBehavior.Default)]
public class AjaxController : Controller
{
	public JsonResult GetUserName()
	{
		//Simulate long process
		System.Threading.Thread.Sleep(3000);
		return Json(Session["Name"], JsonRequestBehavior.AllowGet);
	}

	public JsonResult GetUserCulture()
	{
		return Json(this.Request.UserLanguages", JsonRequestBehavior.AllowGet);
	}
}

Pour le test, Voici le code JavaScript qui utilise jQuery pour faire 2 requête AJAX (donc asynchrones). J’utilise console.time et console.timeEnd pour afficher dans la console de la barre d’outils, le temps d’exécution des appels AJAX.

console.time('GetUserName');
$.ajax({
    url: '/Home/GetUserName',
    success: function (response) {
        console.log(response);
        console.timeEnd('GetUserName');
    }
});

console.time('GetUserCulture');
$.ajax({
    url: '/Home/GetUserCulture',
    success: function (response) {
        console.log(response);
        console.timeEnd('GetUserCulture');
    }
});

Et voici le résultat par défaut. On peut voir que le résultat de l’appel à la méthode GetUserCulture prends pratiquement 3,5s !
SessionState Default

Nous allons modifier l’attribut SessionState du controller afin de lui indiquer que nous n’accédons qu’en lecture seule à la session. Ainsi les données de session ne seront plus verrouillées pour les méthodes du controler.

[SessionState(System.Web.SessionState.SessionStateBehavior.ReadOnly)]
public class AjaxController : Controller

Le temps d’exécution de la méthode est de 540ms. Nous avons gagnés 3s qui était liées au traitement de la méthode GetUserName qui verrouillait la session.
SessionState ReadOnly

Comme vous pouvez le voir, cet attribut se positionne sur les classes (controller) et non sur les méthodes, ce que je ne trouve pas forcément optimal. Voici un lien qui permet de définir un attribut personnalisé permettant la configuration par action.

Outils CSS3 – HTML5 – JavaScript : Episode 6

Une petite liste d’outils/librairies/… pour les développeurs web trouvés ici et là …

JavaScript

CSS

  • CSS3 Flexible Box Layout Explorer : Comprendre le layout flexbox de CSS3
  • Preboot : une collection de fonctions utiles (mixins, variables) pour less
  • CSS3 Click Chart : Exemple d’utilisation des propriétés CSS3
  • Stylify Me : Affichez facilement les couleurs, police, dimensions d’un site web.
  • Tridiv : Un éditeur CSS pour créer des formes 3D
  • CSSLisible : CSSLisible va réindenter vos blocks de code, ordonner vos propriétés, afin de fournir un code CSS Lisible et plus maintenable. Attention, les commentaires internes aux sélecteurs sont retirés !

HTML

Tout ce qu’il faut savoir les favicons

Font

Fontello : Un Générateur de police d’icône.

Divers

Une liste de points à vérifier lors de vos développements web :

DevDocs : un site regroupant la documentation pour HTML/CSS/JavaScript/DOM/JQuery/… bien fait avec la compatibilité par navigateur.

ASP.NET : Augmentez la taille maximale des fichiers uploadés

J’ai rencontré un problème récemment concernant l’upload de gros fichier jusqu’au point d’avoir des erreurs 404 sur les plus gros alors que cela fonctionnait très bien pour des petits fichiers (Explications sur les erreurs 404 liés au limites de requêtes sur le site de IIS).

Il faut savoir qu’il y a 2 paramètres qui entre en compte dans la configuration de la taille maximale autorisée d’un fichier en ASP.NET. Cette configuration se fait dans le fichier de configuration de l’application web.config.

  • maxRequestLength (attribut de l’élément httpRunTime) qui indique la taille maximale de l’upload d’un fichier supporté par ASP.NET. La valeur par défaut est 4 096 Ko (soit 4 Mo)
  • maxAllowedContentLength qui spécifie la taille maximale du contenu d’une requête supporté par IIS. La valeur par défaut est 30000000 bytes (soit 28.6 Mo)

Il faut donc modifier ces 2 paramètres pour uploader des fichiers volumineux.

Attention : maxRequestLength est en ko alors que maxAllowedContentLength est en octet.

Div, FieldSet, Span et Label en ASP.NET

Je fais faire ici un petit focus sur des balises asp.net et des propriétés méconnues.

Tout d’abord, comment écrire du texte brut en asp.net ?

Pour cela, il y a Literal :

génèrera Mon texte.

Et un Label me dirait vous !!!

Un Label permet de générer 2 types de balises. Par défaut, il vous génèrera un span.

génèrera

Mon texte

Mais si vous lui ajouter une propriété AssociatedControlID avec comme valeur l’ID d’un élément de formulaire, celui ci sera transformé en label (dans le sens HTML du terme). Cela permet de relier une zone de saisie et sa description. Cela permet également de sélectionner le champs associé à un label par le clic sur ce dernier.

 : 

génèrera

 : 

Une autre balise asp.net permet de générer 2 types de balise HTML : Panel.

Par défaut panel créera une balise div.

Mon texte est dans une div

génèrera

Mon texte est dans une div

La propriété groupingtext permet de transformer le panel en Fieldset. Un fieldset permet de regrouper des éléments d’un formulaire en catégories logiques. L’utilisation de cet élément rend également les document plus accessibles aux personnes handicapées. La valeur de la propriété groupingtext est une chaine de caractères qui définira la légende de votre Fieldset.

Mon texte est dans un fielset

génèrera

Ma légende Mon texte est dans un fieldset

Maintenant vous n’aurez plus d’excuse pour ne plus générer les bonnes balises afin d’avoir un code valide.

C#, Replace, Javascript et quote

Il est courant de devoir appeler une fonction javascript contenant une quote. Il faut alors échapper cet apostrophe (quote) par un antislash.

alert('Vous êtes sur le Royto\'s Blog');

En asp.net, on peut lancer un script après le chargement d’une page via la méthode Page.ClientScript.RegisterStartupScript.

this.ClientScript.RegisterStartupScript(this.GetType(), ScriptName, »<script>alert(‘Vous êtes sur le Royto\’s Blog’);</script> »);

Mon problème était que je construit mon message d’erreur dynamiquement et je voulait remplacer tous les apostrophe (‘) de mon message par antislash apostrophe (/’).

Facile me dirait vous.

Il suffit de faire :

msg.Replace("'", "\'");//-> Vous êtes sur le Royto's Blog

mais cela ne fonctionne pas car est également le caractère d’échappement en C#.

Bon il suffit alors de faire

msg.Replace("'", "\\\'");//-> Vous êtes sur le Royto\'s Blog

mais cela ne fonctionne pas non plus.

L’astuce vient du fait d’utiliser x27 qui est le code hexadécimale de l’apostrophe. Cela donne donc :
this.ClientScript.RegisterStartupScript(this.GetType(), ScriptName,<script>alert(‘ » + msg.Replace(« ‘ », « \x27 »)+ « ‘);</script>);