Owin Framework

An open architecture for interoperable middleware

Interfaces

Project

Pages Html

NuGet packageOwin.Framework.Pages.Html
GitHub sourceOwinFramework.Pages.Html

Home |  Readme

[DeployedAs] attribute | The OWIN Framework Pages

The [DeployedAs] Attribute

You can attach this attribute to elements that produce CSS and Javascript to control how the CSS and Javascript is incorporated into the website.

Example Usage

[IsRegion("menu_region")]
[Container("ul", "{ns}_menu")]
[ChildContainer("li", "{ns}_menu-item")]
[DeployCss("ul.{ns}_menu", "font-size: 14px;")]
[DeployCss("li.{ns}_menu-tem", "font-size: 12px;")]
[DeployedAs(AssetDeployment.InPage)]
public class MenuRegion
{
}

The [DeployedAs()] attribute has the following properties you can set.

ModuleName

This defines the name of the Module element that defines the asset deployment method for this element's assets. By default elements inherit asset deployment from their parent element. This propagates up the tree to the Page level where the default is to deploy all assets to one resource.

By specifying a module name in this attribute, you are saying that the asset deployment mechanism for this element is going to be determined by the module instead of being explicitly set on this element. This is a good strategy because it allows you to change your mind later about how you want assets deployed without having to revisit all the code.

Deployment

This allows you to explicitly define the asset deployment mechanism for the element. Generally speaking you probably don't want to explicitly set this for every element, because using modules is a much better way of organizing your assets.

The possible values for the Deployment property are:

  • Inherit means that page element will interit the AssetDeployment property of the containing page element. If all elements on a page are set to Inherit (which is the default) then they all follow the asset deployment mechanism set in the page. Pages default to PerWebsite, so by default all Javascript and all CSS for the entire website will be combined into a single asset.
  • InPage means that page element will write its CSS and Javascript directly into the <head> section of the page. This option is mainly useful for debugging and generating html for emails.
  • PerPage means that each page will have a Javascript and CSS asset that is specific to that page and contains everything that that page needs to render. If the same page element is used on multiple pages then its CSS and Javascript will be duplicated in all the page specific assets for the pages where it is referenced. This option means that the page will only reference exactly what it needs, but the browser will have to fetch the assets associated with every page that the user visits.
  • PerModule means that the element should use the AssetDeployment property of the module it is in. You can also specify this module by name with the [DeployedAs] attribute.
  • PerWebsite means that there is a single Javascript and CSS asset for the entire website and this element will write its CSS and Javascript into this global asset.

Copyright 2014-2020