IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

Rendu HTML d'un MailMessage


Sujet :

ASP.NET

  1. #1
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut Rendu HTML d'un MailMessage
    Bonjour à tous,

    je poste ici car je pense que les problématiques de mail sont plus récurrentes sur les applications web.

    Je suis en train de développer un petit module qui envoie toutes les X heures un mail à un ou plusieurs destinataires.

    Ce mail est basé sur un template HTML assez basique, sauf pour une partie dans laquelle je construis un graphique à barres via une TABLE ou une liste [UL].

    Lorsque j'ouvre le résultat dans Outlook (ou Outlook sur tablette Android), le format de ma table n'est pas du tout respecté.

    Le HTML utilisé est basé sur des exemples disponibles sur cette page
    Le rendu HTML dans une page web est correct, tout comme dans Outlook Web Acess si j'ouvre le mail (auquel cas son contenu est affiché dans un TextAera)

    Le MailMessage est construit comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    MailMessage mail = new MailMessage();
                    mail.Body = MailBody;
                    mail.BodyEncoding = Encoding.UTF8;
                    mail.IsBodyHtml = true;
    Le HTML rendu ressemble à cela :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <ul id="graph">
    	<li class="tr" id="1">2007
    		<ul>
    			<li class="bar" style="height:71px;">
    				<p>143</p>
    			</li>		
    		</ul>
    	</li>
    	<li class="qtr" id="q2">2008
    		<ul>
    			<li class="paid bar" style="height:111px;">
    				<p>223</p>
    			</li>
    		</ul>
    	</li>
    </ul>
    Avez-vous une idée de la manière dont je peux "forcer" (même si je doute fort que ce soit possible) la prise en compte du HTML par Outlook ?

    D'avance merci pour vos conseils.

  2. #2
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    Salut,

    Il y a quelques contraintes au rendu HTML des mails. En pratique les contenus externes ne sont pas téléchargés. Il faut donc en mettre un max dans le corps du mail. Si tu utilises des styles, il faut les inclure dans l'en-tête. Le js doit aussi être bloqué.

    A+
    "Winter is coming" (ma nouvelle page d'accueil)

  3. #3
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    Merci Immobilis.
    Pas de contenu externe, pas de js, les styles sont pour la plupart dans une balise style dans le head du template et globalement, tout est correctement rendu excepté ce graphique qui ne présente pourtant pas de spécificité particulière.

  4. #4
    Rédacteur/Modérateur
    Avatar de Skalp
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Novembre 2006
    Messages
    1 694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Novembre 2006
    Messages : 1 694
    Par défaut
    Plutôt que dans le head, essaye de mettre le style carrément dans les balises html.
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <ul id="graph" style="...">
    ...

  5. #5
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    Citation Envoyé par Skalp Voir le message
    Plutôt que dans le head, essaye de mettre le style carrément dans les balises html.
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <ul id="graph" style="...">
    ...
    Merci Skalp.
    Malheureusement, pas mieux.
    Le rendu est toujours mauvais. Le style des balises imbriquées <UL><LI><UL><LI></LI></UL></LI></UL> est mal géré par Outlook.

    à, je sèche...

  6. #6
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    On peut voir le détail des styles?
    "Winter is coming" (ma nouvelle page d'accueil)

  7. #7
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    @Immobilis :

    le HTML généré (version simplifiée) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
     
    </head>
    <body>
    <style>
      .bordertop{ border-top:1px solid black; }
      .borderbottom{ border-bottom:1px solid black; }
      .borderright{ border-right:1px solid black; }
      .borderleft{ border-left:1px solid black; }
      .border{ border:1px solid black; }
      .margintop{ margin-top:20px; }
      .bold{ font-weight:bold; }
     
      #q-graph {position: relative; width: 480px; height: 300px;   margin: 1.1em 0 3.5em; padding: 0; background: #DDD; border: 2px solid gray; list-style: none; font: 9px Helvetica, Geneva, sans-serif;}
      #q-graph ul {margin: 0; padding: 0; list-style: none;}
      #q-graph li {position: absolute; bottom: 0; width: 80px; z-index: 2; margin: 0; padding: 0; text-align: center; list-style: none;}
      #q-graph li.qtr {height: 298px; padding-top: 2px; border-right: 1px dotted #C4C4C4; color: #AAA;}
      #q-graph li.bar {width: 60px; border: 1px solid; border-bottom: none; color: #000;}
      #q-graph li.bar p {margin: 5px 0 0; padding: 0;}
      #q-graph li.paid {left: 10px; background: #9D9; border-color: #CDC #9B9 #000 #BFB;}
      #q-graph #q1 {left: 0;}
      #q-graph #q2 {left: 80px;}
      #q-graph #q3 {left: 160px;}
      #q-graph #q4 {left: 240px;}
      #q-graph #q5 {left: 320px;}
      #q-graph #q6 {left: 400px; border-right: none;}
    </style>
    <table>
    	<tr>
    		<td colspan="2" align="center">
    			<h2>FICHE</h2>
    		</td>
    	</tr>
    	<tr>
    	  <td colspan="2">
    		<table style="width:100%">
    		  <tr>
    			<td valign="top" align="center"><TABLE style="margin: 1.1em 0 3.5em;" BORDER=1><TR ALIGN='CENTER'><TD><B>Index</B></TD><TD><B>Date Index</B></TD><TD><B>Consommation</B></TD></TR><TR ALIGN='CENTER'><TD>23</TD><TD>06/12/2012</TD><TD>23</TD></TR><TR ALIGN='CENTER'><TD>0</TD><TD>21/09/2012</TD><TD>0</TD></TR><TR ALIGN='CENTER'><TD>579</TD><TD>21/09/2012</TD><TD>136</TD></TR><TR ALIGN='CENTER'><TD>443</TD><TD>09/01/2012</TD><TD>0</TD></TR><TR ALIGN='CENTER'><TD>443</TD><TD>09/01/2012</TD><TD>89</TD></TR></TABLE></td>
    			<td valign="top" align="center"><ul id="q-graph"><li class="qtr" id="q1">2012<ul><li class="paid bar" style="height:0px;"><p>0</p></li></ul></li><li class="qtr" id="q2">2012<ul><li class="paid bar" style="height:89px;"><p>89</p></li></ul></li><li class="qtr" id="q3">2012<ul><li class="paid bar" style="height:0px;"><p>0</p></li></ul></li><li class="qtr" id="q4">2012<ul><li class="paid bar" style="height:136px;"><p>136</p></li></ul></li><li class="qtr" id="q5">2012<ul><li class="paid bar" style="height:23px;"><p>23</p></li></ul></li></ul></td>
    		  </tr>
    		</table>            
    	  </td>
    	  <td>                        
    	  </td>
    	</tr>
    </table>
    </body>
    </html>

  8. #8
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    Une piste: http://msdn.microsoft.com/en-us/libr...dCSSProperties

    La balise "style" ne serait pas supportée mais l'attribut oui.
    "Winter is coming" (ma nouvelle page d'accueil)

  9. #9
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    C'était la proposition de Skalp.
    J'ai essayé de ramener toutes les propriétés CSS dans un attribut "style" mais ça n'a rien changé.

  10. #10
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <table>
        <tr>
            <td colspan="2" align="center">
                <h2>FICHE</h2>
            </td>
        </tr>
        <tr>
          <td colspan="2">
    Le deuxième colspan est en trop.

    Ajoute un espace insécable dans la deuxième cellule de la deuxième ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <table>
        <tr>
            <td colspan="2" align="center">
                <h2>
                    FICHE</h2>
            </td>
        </tr>
        <tr>
            <td>
                Ton tableau
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
    Ca résoudra peut-être pas le pb mais ce sera un peu plus d'équerre.
    "Winter is coming" (ma nouvelle page d'accueil)

  11. #11
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    Immobilis, j'avais zappé le colspan en trop, dans le HTML complet, il était nécessaire. J'ai juste mis en ligne une version allégée.

  12. #12
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    J'ai jamais eu besoin de faire des graph dans un mail. J'ai testé de mon côté et effectivement le rendu n'est pas bon du tout. Sachant que c'est l'application cliente qui gère le rendu cela reste tout de même aléatoire.

    Essaye avec des tables... Générer un fichier attaché... Voir ici: http://www.campaignmonitor.com/resou...rk/guidelines/

    A+
    "Winter is coming" (ma nouvelle page d'accueil)

  13. #13
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    @Immobilis : j'ai également essayé avec des tables mais ce n'est pas beaucoup mieux.
    Et je ne veux pas passer par une PJ. Au pire, je vais me passer du graph.

    C'est quand même complétement hallucinant que Word soit le moteur de rendu HTML d'Outlook et, pire, que Word soit si mauvais pour la manipulation du HTML...

  14. #14
    Expert confirmé
    Avatar de Immobilis
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2004
    Messages
    6 559
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 559
    Par défaut
    Citation Envoyé par calagan99 Voir le message
    Word soit si mauvais pour la manipulation du HTML...
    Ben ce n'est pas non plus son usage. Word a des fonctionnalités bien différentes de celles qu'on peut avoir avec une page HTML.
    "Winter is coming" (ma nouvelle page d'accueil)

  15. #15
    Modérateur

    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Avril 2007
    Messages
    1 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 996
    Par défaut
    Citation Envoyé par Immobilis Voir le message
    Ben ce n'est pas non plus son usage. Word a des fonctionnalités bien différentes de celles qu'on peut avoir avec une page HTML.
    C'est sûr.
    C'est tout de même regrettable que ce soit ce moteur qui soit utilisé dans Outlook.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Moteur de Rendu HTML Gecko?
    Par slayer418 dans le forum Autres langages pour le Web
    Réponses: 5
    Dernier message: 17/06/2009, 10h40
  2. SilverLight 2 - troncature dans le rendu HTML
    Par eagleleader dans le forum Silverlight
    Réponses: 4
    Dernier message: 11/03/2009, 11h07
  3. Rendu Html et mise en page dynamique dans flash
    Par grav dans le forum ActionScript 3
    Réponses: 0
    Dernier message: 21/12/2008, 12h27
  4. [itext]même code, rendu HTML et PDF différent
    Par kisame dans le forum Documents
    Réponses: 2
    Dernier message: 04/08/2008, 19h09
  5. [XSLT] inserer un espace dans le rendu html
    Par hysah dans le forum XSL/XSLT/XPATH
    Réponses: 5
    Dernier message: 04/11/2006, 11h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo