HTML to Razor

From Dynamicweb HTML to Razor.

This document is a guide for migrating from Dynamicweb HTML to Dynamicweb Razor.

You do not have to change all templates to Razor. You can change just one or more templates as needed.

Razor is an ASP.NET programming syntax released by Microsoft in January 2011 as one of the view engines for ASP.NET MVC. It is a template markup syntax and is a mix of HTML and .NET code in the same file, like classic ASP and PHP. This means that templates have the simplicity of HTML and the power of .NET. Where the HTML based templates in Dynamicweb have very limited scripting capabilities and requires .NET based add-ins to do more advanced rendering logic, the Razor based templates have the possibility to utilize all of the Dynamicweb and .NET APIs to perform the rendering. 

Razor is maybe a new technology for some developers, but is fast to learn since it is HTML and .NET (C# or VB) – so not a new language, but a new combination of existing implementation methods. The benefits is that implementation and rendering logic can be developed faster and gives the developer full freedom to achieve a well working website.

 

Everywhere in Dynamicweb where templates can be used, it is possible to change to use a Razor template instead of a HTML template. Razor templates are placed in the same folders as the HTML templates. Razor templates are named *.cshtml, *.cshtm, *.vbhtml or *.vbhtm. Cshtml means C# based Razor syntax, VBhtml means VB based Razor syntax. 

Upload your razor template to any template folder and select the template where you want to apply it

Do install ASP.NET MVC 4 when developing Razor templates in your Visual Studio for better syntax support: http://www.asp.net/mvc/mvc4.

Dynamicweb has the possibility of converting an existing HTML based template to Razor (C#).

There are two ways of converting an existing HTML template to Razor.

  1. From any template selector where a HTML template is selected, click the Edit icon.
  2. In the file manager in any template folder, list the templates, right click a HTML template and choose “Edit”.

Both of these actions will open the file editor ({Figureref}).

Figure 3.1 The file editor with a HTML template.

In the Ribbon, click the button “Convert to Razor”. This will convert the contents of the editor to Razor.

Figure 3.2 The converted template.

After the conversion, click the “Save as...” button, and rename the file to .cshtml 

Figure 3.3 Save the converted file to cshtml.

The conversion will handle the most common scenarios in the HTML templates – it will convert these things

  1. Template tags <!--@SomeTag-->
  2. Loops (<!--@LoopStart(NameOfLoop)-->)
  3. If Defined (<!--@If Defined(Sometag)-->)

More advanced template implementations are not converted (conditionals). The converter may not always convert all your code 100% correctly and you therefore need to manually validate the conversion to see if it is ok and make the needed changes to have it work fully.

The conversion cannot be guaranteed to be 100% correct – the converted file can have some syntax errors. These have to be handled manually.

The @model In MVC and Razor, you normally access data properties on the Model dynamic object. In Dynamicweb, you can access Model but in this first implementation of Razor in Dynamicweb Model is not the type being rendered, but the Template instance in context. In Dynamicweb Razor templates you can access the model like this:

@Model.PropertyName

The object returns a generic Dynamicweb.Rendering.RazorTemplateModel<t> where t is the model being rendered, for now Dynamciweb.Rendering.Template. In addition, the model has a Template property returning the same instance of Dynamciweb.Rendering.Template.

In future Dynamicweb releases the Model will be the model being rendered, i.e. the PageView, Product, Item etc.