Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Composant GoogleMaps pour ASP.Net
Ce petit post pour vous signaler la mise à disposition d'un composant ITGoogleMap.NET par Itelios écrit par Clément Larduinat. Il est basé sur le composant GoogleMap Control de CodePlex ( http://www.codeplex.com/googlemap ). Ce composant permet une intégration très facile d’une carte Google dans un environnement .NET. 

La carte est accessible et modifiable côté serveur (.NET) et côté client (JavaScript).

Le geocodage peut s'appuyer sur différents fournisseurs de services du marché (ViaMichelin, Yahoo, Google, Mappy).

Un site d’exemples d’utilisation est accessible ici : http://googlemaps.itelios.net/ .

Ce site peut vous permettre de tester le composant et de vous donner une  idée sur ce

qu’il est possible de faire avec ce dernier.

Voici un mini tutoriel d’installation du composant dans votre projet web :

1.       Ajout de la DLL comme référence au projet

2.       Génération de votre clé GoogleMap sur le site suivant : http://code.google.com/apis/maps/signup.html :

Cette clé est liée au nom de domaine sur lequel  le  site sera publié. (clé pour Localhost : ABQIAAAAqsI6Z47vEP2UvoM56ACx-hR5e3IaPuFv6aO5bv3FyYLzfJiMfBSWSpQZmEwEHqe4ulloCm-Fsa3kgw)

3.       Modification du web.config :

<appSettings>

<add key="GoogleMapKey" value="ABQIAAAAqsI6Z47vEP2UvoM56ACx-hR5e3IaPuFv6aO5bv3FyYLzfJiMfBSWSpQZmEwEHqe4ulloCm-Fsa3kgw"/>

</appSettings>

<controls>

<add tagPrefix="Itelios" namespace="Itelios.GoogleMap" assembly="Itelios.GoogleMap"/>

</controls>

4.       Ajout du contrôle dans la page ASPX souhaitée :

<Itelios:GoogleMap ID="GoogleMap1" runat="server" Width="976px" Height="560px" Latitude="47.22" Longitude="2.46" Zoom="5" EnableScrollWheelZoom="true" />

ATTENTION : L'insertion d'un Script Manager dans la page est un pré-requis.

J’espère que ce contrôle vous permettra d’accélérer vos développements et de tirer profit un maximum des ses fonctionnalités.

Si cela vous intéresse n'hésitez pas à nous contacter via ce blog.

[ASP.NET] Réaliser une pagination avec un objet DataList

Un des soucis lors de l’utilisation d’un Datalist demeure la pagination. En effet, le contrôle ne nous offre pas un événement de pagination comme c’est le cas pour un Gridview par exemple. Cependant, la solution existe. On peut désormais appliquer une pagination sur un Datalist et ceci en utilisant la classe PagedDataSource. On détaillera dans ce que suit comment procéder.

Voici un exemple d’un Datalist  qui prend comme source une liste contenant des URLs des images:

<asp:DataList runat="server" id="dlGallery" RepeatColumns="4" RepeatDirection="Horizontal"> 
    <ItemTemplate>
        <img src="<%# Eval(Container.DataItem)%>" width="90" height="90">
    </ItemTemplate>
</asp:DataList>

On déclare une variable statique (Si on a un contexte web, on utilise un ViewState pour palier au problème d' utilisation multiple de la variable) :

private static int CurrentPage = 0;

Dans le code Behind de la page, au niveau de la fonction qui remplit la Datalist :

BinderDataList(){
    List<String> olstUrls = DictionnaryHelper.GetUrls();

    //Déclaration de l’objet de la pagination et mettre à vrai la pagination
    PagedDataSource objPage = new PagedDataSource();
    objPage.AllowPaging = true;

   //assigner la source de données à l’objet
    objPage.DataSource = olstUrls;

    //Spécifier le nombre de page pour la pagination
    objPage.PageSize = 8;

    //"CurrentPage" est une variable statique indiquant la page courante de la pagination
    objPage.CurrentPageIndex = CurrentPage;

    //lbtnNext et lbtnPrev sont deux boutons pour le "Suivant" et "Précédent" sur les éléments
    lbtnNext.Enabled = !objPage.IsLastPage;
    lbtnPrev.Enabled = !objPage.IsFirstPage;

   //Assigner l’objet à la List
    dlGallery.DataSource = objPage;
    dlGallery.DataBind();
}

On spécifie après les événements des deux objets "Linkbutton" qui serviront pour naviguer entre les éléments de la liste:

private void lbtnPrev_Click(object sender, System.EventArgs e){
    CurrentPage -=1;
    BinderDataList();
}

private void lbtnNext_Click(object sender, System.EventArgs e){
    CurrentPage +=1;
    BinderDataList();
}

Et voila , on place les deux LinkButtons dans notre page et ainsi nous obtenons une pagination sur notre Datalist. On peut bien sur améliorer tout ça pour obtenir un pager du style |< < ... 4 5 6 7 8 ... > >|

PS: Merci à O. Nouiri pour cette astuce.

[ASP.NET] Fixer la ligne du Header d'un GridView

Vous avez toujours rêver d' utiliser les GridView, mais il y a trop de lignes.
Vous voulez donc permettre le "scroll" vertical , mais par défaut la ligne de titres scroll aussi, ce qui est gênant ...
Vous voulez trouver une solution pour que la ligne de titre reste fixe comme c' est possible dans Excel.


L'exemple suivant le permet :

1- Créer les deux classes suivantes dans votre CSS :

div.GVScrollCSS
{
  overflow-y: scroll;
  overflow-x: hidden;
}

.GVScrollFixedHeader
{
  position:relative;
  top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}

2- Appliquer ces classes CSS dans votre fichier aspx comme dans l'exemple suivant :

<div class="GVScrollCSS">
   <asp:GridView ID="_gvParcelles"  DataKeyNames="PARCEL_ID" runat="server"
            AutoGenerateColumns="False"
            ShowHeader="true" Width="100%">
      <HeaderStyle CssClass="GVScrollFixedHeader" />
      <Columns>
          <asp:TemplateField HeaderText="Colonne1" > 
              <ItemTemplate>
                 <asp:Label ID="lblCol1" runat="server" Text='<%# Bind("COL1") %>' />
              </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Colonne2" >
              <ItemTemplate>
                  <asp:Label ID="lblCol2" runat="server" Text='<%# Bind("COL2") %>' />
              </ItemTemplate>
         </asp:TemplateField>
     </Columns>
  </asp:GridView>
</div>

Cette solution peut également s' appliquer sur l' élément Footer.

PS: Merci à R. Aymard pour cette astuce.

[ASP.NET]FileUpload et UpdatePanel

Sur un projet j'ai été confronté à un problème quant à l'utilisation d'un FileUpload ASP.NET dans un UpdatePanel.

En effet, pour des raisons de sécurité, le contrôle FileUpload ne fonctionne pas à l'intérieur d'un UpdatePanel.
L'UpdatePanel  fait ses requêtes de mise à jour partiel en utilisant l'objet XmlHttpRequest, hors cet objet ne gère pas l'envoi de fichier.

L'upload de fichier nécessite un PostBack complet de la page.

Pour contourner ce problème une solution consiste à créer un PostBackTrigger sur le bouton qui déclenchera l'upload:

<asp:updatepanel runat="server" id="UpdatePanel1">
        <contenttemplate>
            <asp:FileUpload runat="server" id="Upload1" />
            <asp:button runat="server" id="ButtonSubmit" text="Postback" />
        </contenttemplate>
        <triggers>
            <asp:postbacktrigger controlid="ButtonSubmit" />
        </triggers>
</asp:updatepanel>

Vous pouvez également spécifier au ScriptManager les contrôles qui déclanche un PostBack complet de la page (dans le code-behind):

ScriptManager.GetCurrent(Page).RegisterPostBackControl(Upload1);

Autre méthode qui fonctionne également : Vous pouvez utiliser une iFrame pour appeler une page d'Upload dans une frame. L'inconvénient c'est que les iFrame ne sont pas XHTML compliant Tongue out

[ASP .NET]Localisation dynamique

Pour localiser un site Web en plusieurs langues, il existe différentes façon de faire. L'une d'elle est l'utilisation de fichier ressources. Nous allons voir ici comment générer automatiquement ces fichiers de ressources et comment mettre en place le changement de langues dynamiquement sur une page Web.

Créez un nouveau projet de site Web et construisez la page "Default.aspx". Le mieux est de mettre vos différents textes dans des labels. Pour générer le fichier de ressource associée à votre page, aller dans le menu Tools > Generate Local Ressource (Remarque : il faut être en mode design pour avoir accès à cette option). Visual Studio vous générer un fichier "Default.aspx.resx" dans un répertoire App_LocalRessources.

Si vous regardez rapidement la source de la page vous constaterez que vos label, button... ont été modifiés :

<asp:Label ID="lblMenu1" runat="server" Text="Accueil" />

<asp:Label ID="lblMenu1" runat="server" Text="Accueil" meta:resourcekey="lblMenu1Resource1" />

Pour créer un fichier de ressources pour une autre langue, il suffit de dupliquer le fichier .resx et de la renommer de la forme :

  • /repertoireRessource/nom_de_la_page.extension_de_la_page.resx (pour la page par défault, c'est à dire la page neutre).
  • /repertoireRessource/nom_de_la_page.extension_de_la_page.pays[-region].resx (pour les pages des différentes langues).

Exemple :

  • Default.aspx.resx
  • Default.aspx.en.resx
  • Default.aspx.es-ES.resx

Localisation dynamique
Figure 1

Localisation dynamique
Figure 2

Localisation dynamique
Figure 3

Vous n'avez plus qu'à ouvrir les différents fichiers .resx et à traduire les éléments :

Localisation dynamique
Default.aspx.resx

Localisation dynamique
Default.aspx.en.resx

Maintenant, nos différents fichiers sont prêts. Le but serai de pouvoir change la langue du site "a la volée", par exmple en cliquant sur un drapeaux. Comment faire ? c'est assez simple. Voici une méthode parmis d'autre.

Ajoutez par exemple deux images boutons sur votre site. Nous allons maintenant travaillez le code behind. Dans l'événement click de chaque image bouton, nous allons référencer une variable de session pour stocker la langue :

protected void UK_Click(object sender, ImageClickEventArgs e)
{
     
Session["user-language"] = "en-GB";
     Response.Redirect(Request.ServerVariables["HTTP_REFERER"]);

Ici, sur le click de l'image bouton "UK" on renseigne la variable de session avec le code de la langue. Puis on redirige la page vers elle même.
Il faut encore applique ce changement de langue. Pour cela, redéfinissez la méthode "InitialiseCulture".

protected

override void InitializeCulture()
{
   if (Session["user-language"] != null)
      Thread.CurrentThread.CurrentUICulture = new CultureInfo(Session["user-language"].ToString());
}

Dans une page Web ASP.NET, vous pouvez affecter à deux valeurs de culture les propriétés Culture et UICulture. La valeur Culture détermine les résultats de fonctions spécifiques à une culture, comme la mise en forme de la date, des nombres et de la monnaie, etc. La valeur UICulture détermine les ressources qui sont chargées pour la page.

Il ne vous reste plus qu'à tester. Pour les plus pressé d'entre vous, vous pouvez recupérer un exemple ici.

Présentation de l'équipe

Nous sommes très heureux de rejoindre la communauté CodeSource et remercions plus particulièrement notre marraine "JesusOnline".

Clément, Xavier, Guillaume  et Stéphan oeuvrent tous les 4 dans la société Itelios basée à Paris, Macon et Sao Paulo (30 personnes).

Ce blog traitera de points techniques autour de .Net 3.5  et Silverlight faisant suite uniquement à des retours opérationnels (intégrant des contraintes de projets clients).

 

  



Les 10 derniers blogs postés

- ssdl view et TPT par Matthieu MEZIL le il y a 23 heures et 27 minutes

- L'injection SQL n'est PAS un problème QUE pour les développeurs web ! par CoqBlog le 07-05-2008, 01:08

- Un outil pour réaliser des animations WPF basées sur des équations de Bézier par Perspective le 07-04-2008, 21:45

- Sandcastle et CodePlex : le verdict par CoqBlog le 07-04-2008, 20:53

- ssdl view et TPH par Matthieu MEZIL le 07-04-2008, 19:12

- Webcasts sur le Parallel Framework disponibles par Matthieu MEZIL le 07-04-2008, 17:26

- [Silverlight] - Comprendre et Débuter avec Silverlight par Danuz le 07-04-2008, 12:41

- SharePoint : Nouvel article sur l'exportation et Importation de sites SharePoint par Blog Technique de Romelard Fabrice le 07-04-2008, 01:00

- ImagineCup 2008 Final in Paris: Day 1 par Richard Clark le 07-03-2008, 22:48

- PowerShell : Comment utiliser un ENUM .NET dans un script PowerShell par Blog Technique de Romelard Fabrice le 07-03-2008, 18:09