Comment inclure les styles CSS inline dans de Rasoir?
Je suis en utilisant Postal de rendre MVC, Razor points de vue et les envoyer par mail. J'ai un CSS personnalisé que j'ai défini spécifiquement pour l'affichage des emails. Actuellement, je suis notamment comme suit:
@Styles.Render("~/Content/EmailStyles.css")
Toutefois, cela ne comprend que le lien relatif à la feuille de style, qui ne fonctionnera pas dans un e-mail:
<link href="/Content/EmailStyles.css" rel="stylesheet"/>
Je veux inclure la feuille de style en ligne, de sorte qu'il fonctionne correctement dans l'e-mail. Quelle est la meilleure façon de rendre le contenu d'un fichier de la base de ressource au sein d'un MVC vue?
OriginalL'auteur luksan | 2013-01-12
Vous devez vous connecter pour publier un commentaire.
Je suppose que vous aurez besoin d'un helper personnalisé pour que. Sur le dessus de ma tête, il n'existe pas une méthode pour rendre le css chemin, y compris le chemin d'accès absolu du site.
par exemple http:www.example.com/css/EmailStyles.css
Afin d'écrire un helper html qui rendra le contenu de votre fichier css inline style.
Beaucoup de clients de messagerie ne sera même pas utiliser les styles définis dans l'en-tête. Vous êtes mieux avec des styles en ligne pour les e-mails. Voir campaignmonitor.com/css
Vous avez raison. C'est complètement faux.
Je suppose que la question était inutile.
OriginalL'auteur
J'ai eu la même question que moi-même, et est venu à travers Premailer.Net. Il ressemble à la bibliothèque dont vous avez besoin. Voici ce que vous avez à faire:
Créer une méthode d'extension pour vous aider à intégrer votre CSS dans votre page; il y a un
réponse à une question sur la façon d'intégrer le code HTML dans un Rasoir vue qui devrait vous aider. J'ai modifié pour
intégration CSS:
Puis dans votre Rasoir modèle, il suffit d'aller:
pour intégrer votre CSS texte.
Installer le Premailer.Net paquet dans votre projet; vous pouvez l'obtenir par le biais de NuGet.
Rendre votre Rasoir vue dans une chaîne de caractères (je suppose que c'est ce qui Postale est dans votre processus? Je crois RazorEngine pouvez le faire aussi).
Exécution de la chaîne à travers Premailer.Net:
Envoyer un e-mail!
J'ai été en utilisant cette technique dans la production pendant un certain temps maintenant, et il semble fonctionner assez bien.
Modifier: Rappelez-vous que les styles sur les pseudo-éléments ne peut pas être incorporé parce qu'ils n'existent pas dans le balisage. J'ai aussi remarqué l'étrange petit bug dans Premailer.Net -je crois que de leur spécificité et de leur cascade les règles ne sont pas parfaitement conforme. Encore, c'est du bon et c'est un plus de morceau de code que j'ai de ne pas avoir à écrire!
Hm, c'est une question intéressante. De l'actif de la compilation et du groupement des services a toujours été le domaine de mon collègue. Je parie une Cassette ou d'un Système.Web.L'optimisation de la sortie d'un bundle comme une chaîne ou un flux de mémoire; ce serait l'endroit pour commencer. Ensuite, vous pouvez traiter à la fois de vos questions avec une seule solution.
gmail client ne peut pas lire inline feuilles de style comme le style d'une balise à l'intérieur de la tête de la balise. La seule approche de la conception avec une .fichier css et analyser cette id/ définitions de classe et de les rendre dans les balises html en ligne-style="background:blue" qui fonctionne sur tous les clients de messagerie!
Pouvez-vous donner un exemple de la façon dont vous utilisez postal pour obtenir le rendu html de retour? Je suis en train de suivre cet exemple, mais éprouve des difficultés pour la mise en œuvre de la IEmailService aboutcode.net/postal/create-mail-message.html
Désolé, malheureusement j'ai pas d'expérience avec la poste, de la partie, et c'est en dehors de la portée de ma réponse. Peut-être se poser la question asker? Mais je suppose que c'Postal accepte un corps de message comme une chaîne de caractères? Si donc, vous devez juste passer la valeur de
premailedOutput
dans mon étape 5 comme le corps. Assurez-vous de dire que vous êtes à l'aide d'untext/html
type mime si il y a un endroit pour ça.OriginalL'auteur
Upvoted Paul d'Aoust de la réponse, mais j'ai trouvé cette version de sa méthode d'aide à travailler un peu mieux pour moi (ne pas essayer de coder des choses comme des citations dans le CSS):
salut, c'est super, pourriez-vous s'il vous plaît montrer une version modifiée pour intégrer directement le CSS du bloc plutôt que de lire à partir d'un fichier
.p { color : @getColrVariableFromMyAction}
et comment utiliser/utiliser à l'intérieur de la vue. quelles sont les autres libs ai-je besoin?Directement intégration d'un bloc CSS serait simple, il vous suffit accepterait la chaîne comme le CSS lui-même plutôt que de charger le contenu du fichier dans une chaîne; je vais le laisser comme un exercice pour le lecteur 🙂 pour l'utiliser dans une vue, tout ce que vous souhaitez faire est
@Html.EmbedCss(path)
, oùpath
est le chemin d'accès à votre fichier CSS. (Ou, si vous modifiez la fonction à utiliser un CSS bloc, il serait CSS.)De se! donc, il émet des blocs CSS, je doit envelopper à l'intérieur d'un article?
body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style>
puis-je mettre de la statique extension
public class NotStaticClass{ public static IHtmlString EmbedCssStaticFunc(this HtmlHelper htmlHelper, string path)
à l'intérieur d'un non-statique de la classe? je suis en train de regrouper mes utils, et voudrait jeter ce làOriginalL'auteur