Create hybrid and Web Forms template using a Master page

You can use Master pages to define placeholders in the layout together with more complex HTML structure in case the Layout editor cannot satisfy your needs. Using ASP.NET Master Pages is the common way to add consistent layout for .NET developers. You can use this approach in case you need more complex HTML layout or you need logic in code-behind files.

Place your .master files in: ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Master/

Creating the HTML structure

The .master file is a simple HTML file with few additional specific .NET tags.

The following is a simple code of a .master page:

IMPORTANT: Make sure the form name is aspnetForm

The code above has the following differences from the standard HTML page:

  • The head line before the DOCTYPE declaration.
  • All of the body content is inside the form tag.
  • In the form tag there is a ScriptManager responsible for the loading of the script and the styles in your .master file.
  • Content placeholders are placed inside some of the elements.
    Content placeholders are ASP.NET native tags that will tell Sitefinity CMS where you want to have an editable area. Content placeholders are making the element that wrap them into a Create a template using the Layout editor.

    IMPORTANT: Master pages that will be used as Sitefinity CMS templates, must not have <asp: ContentPlaceHolder> controls declared inside the <head> tag of the master page (by default Visual Studio will include one when creating a new master page). When changing a template, some of the widgets might have their placeholders missing on the new template. In this case, they become orphaned and will be placed in the first available placeholder on the page. If there is a ContentPlaceHolder declared in the head tag, this will be the first available placeholder, and the orphaned controls will be placed there. This might cause problems with the page rendering in edit mode, since the template parser does not support Sitefinity CMS content inside the head tag.

Adding an existing Master page in Sitefinity CMS

If you already have a Master page and you want to use it in Sitefinity CMS, perform the following:
  1. Place the file in folder ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Master/
  2. Go to Sitefinity’s backend (http://<yoursite>/sitefinity)
  3. In the main menu, click Design » Page Templates.
  4. Click Create a Template.
  5. In Name input field, enter a name for your template.
  6. Select Use template and click Select another Template.
  7. Click Use your own .master file.
  8. Browse the file in your App_Master folder and select the .master file.
  9. Click Use Selected » Create this template.

NOTE: When you are working with Visual Studio in development environment, instead of the ~/App_Data folder of your website, you can create ~/App_Master and ~/App_Theme directly in the root of the project. This will allow you to use Visual Studio templates, because they will not appear when you work under ~/App_Data.
When you are ready with the development and you can go live and distribute the project you can move your files in your ~/App_Data folder, as described in the procedure above.

 

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Apply page templates