Tutorials

[EN] mailworx Razor Special Features

Suggest Edits

Special features of Razor templates

The templates in mailworx have independent tags, which are automatically replaced with the correct text when creating an email. Each template must be equipped with the corresponding tags!

What do you need to consider when creating a Razor template?

  • A template must NOT contain any scripts (JavaScript, VBScripts, etc.) – therefore no rollovers, etc.
  • A template must NOT contain any stylesheets (including inline stylesheets) if possible. Each property must be set in the HTML.
  • The subject of the campaign should be used as the title in the HEAD using mailworx tags (see below) to reduce the likelihood of the email being classified as spam. (@Raw(Model.Campaign.Name)
  • IMPORTANT! Enter in the source code.
  • No target attribute may be specified for any LINKS.
  • META TAGS should be avoided.
  • Templates may only contain the most necessary percentages. All table widths must be defined. This means the entire table, including all columns, etc.
  • The width of the template must be limited to 600px to 620px.
  • Each cell should be given a fixed width.
  • Background images should only be used if absolutely necessary. Always set a suitable background colour in case the background graphic is not displayed.
  • Cellspacing/cellpadding should not be used; instead, a smaller table should be inserted.
  • Links should always have the same colour (i.e. in navigation and content) if possible, otherwise there will be problems with rollover.
  • If the layout is displayed incorrectly in Lotus Notes and some other email clients, the widths of the individual cells and tables should be checked. A common mistake is that the widths have not been specified.
  • The following should be noted for links: If only an image without text is linked, an should be added to the link, as these links will otherwise not work in Outlook 2007. E.g.:  
  • The template file must be named template.cshtml.

The underlying technology for these templates is the Microsoft Razor Framework.

To output values from variables or methods, please use the Razor function @Raw(…). This function can be used to read out a value.

The subject of the campaign should be used as the title in the HEAD using Razor syntax to reduce the likelihood of the email being recognised as spam.

@Raw(Model.Campaign.Subject)

Repeatable sections are generated using a foreach loop:

foreach (var sec in Model.Sections.Sections) { ... }

The variable sec provides information about the current section for each run, such as the section name, and can be used as an assignment in editors (mailworx syntax). This technique is also used in the optional table of contents. Variables can be used in Razor in two ways. The built-in ViewBag can be used, which allows dynamic use of file types.

@{
   ViewBag.value = Model.Sections.GetSingletonValue("internerFeldName");
   
   if(String.IsNullOrEmpty(ViewBag.value)) {
      ViewBag.value = "Wert";
   }
}
<html>
   <body>
      @if(ViewBag.value == "Wert") {
         <div>Für die Variable value wurde kein Wert gesetzt.</div>
      } else {
         <div>@Raw(ViewBag.value)</div>
      }
   </body>
</html>

Alternatively, variables with fixed file types can also be used.

@{
   string value = Model.Sections.GetSingletonValue("internerFeldName");
   
   if(String.IsNullOrEmpty(value)) {
      value = "Wert";
   }
}
<html>
   <body>
      @if(value == "Wert") {
         <div>No value has been set for the variable value.</div>
      } else {
         <div>@Raw(value)</div>
      }
   </body>
</html>

The variables created therein can then be used in the template as follows:

@Raw(value) bzw. @value

Any text editor can be used as an IDE. However, we recommend Microsoft Visual Studio, Microsoft Visual C# Express or Microsoft Visual Web Developer Express, as these offer highlighting for the Razor Engine.

How can elements be hidden for the mobile version?

To avoid having to forego extravagant newsletters, there is the option of hiding elements above a certain width. The rule here is: try out the width at which you want elements to be hidden.

We recommend optimising newsletters from a width of 450px, as the iPhone has a screen width of 320px.

Here is the HTML code for the newsletter:

<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
 	<tr>
		<td width="22%" align="left" valign="top">
			<table width="140" align="center" valign="top" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td align="left" valign="top">Logo</td>
				</tr>
				<tr>
					<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
				</tr>
				<tr>
					<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
				</tr>
				<tr>
					<td align="center" class="hide" valign="middle" height="40" bgcolor="#d4d4d4" width="100%">Menü Punkt 1</td>
				</tr>
			</table>
		</td>
		<td width="78%">Einleitung</td>
 	</tr>
</table>

To ensure that the menu items are not visible in the mobile version, the attribute class="hide" is assigned. With the help of this attribute, you can access the individual lines in the CSS and style them according to your preferences.

The required CSS styles are as follows:

@media only screen and (max-width: 450px) {
    [class*=hide] {
        display:none;
    }
}

It's that simple, and entire HTML blocks are now hidden in the mobile version.

Please note: For security reasons, no elements can be hidden in the desktop view.

Updated about 5 hours ago