Owin Framework

Page Elements

Page elements handle requests matching the path and methods configured then return responses by rendering a tree-like heirachy of layouts, regions and components.

Attribute Example

For simple pages it is often possible to define the page using a bare C# class with no implementation that is decorated with attributes. This is illustrated by the following example:

[IsPage("home")]
[PartOf("usecase5")]
[DeployedAs("usecase5")]
[Route("/", Method.Get)]
[UsesLayout("home")]
internal class HomePage { }
[IsLayout("home", "test1,test2")]
[PartOf("usecase5")]
[DeployedAs("usecase5")]
[ZoneTemplate("test1", "/test1")]
[ZoneTemplate("test2", "/test2")]
internal class HomeLayout { }

In this use case the [IsPage()] attribute has properties that specify how Http requests are routed to the page.

The other attributes that you can attach to the page class are:

• [IsPage] identifies this class as a web page
• [CacheOutput] configures output caching for the page
• [DataScope] defines a scope name used in resolving data providers
• [DeployCss] css rules to include on this page
• [DeployFunction] a Javascript function to include on this page
• [DeployedAs] specifies how Javascript and CSS should be deployed for this page
• [Description] a description to output into the page documentation
• [Example] an example usage to output into the page documentation
• [NeedsComponent] identifies a component that this page depends on
• [NeedsData] identifies data that is required for this page
• [Option] documents an optional part of the request for this page
• [PageTitle] specifies the title to output into the page head
• [PartOf] defines the package (namespace) for CSS and Javascript on this page
• [RequiresIdentification] specifies that users can not view this page anonymously
• [RequiresPermission] specifies a permission that users must have to see this page
• [Route] defines which requests will be routed to this page
• [Style] adds CSS style to the body element of the page
• [UsesLayout] specifies the layout for the page
• [ZoneRegion] fills a zone of the page's layout with a region
• [ZoneComponent] fills a zone of the page's layout with a component
• [ZoneLayout] fills a zone of the page's layout with a layout
• [ZoneTemplate] fills a zone of the page's layout with a template

Page Class Example

For simple pages the attribute based approach works just fine, but for real-wprld websites with dynamic pages and SEO needs, it is very likely that you will want to make your page classes inherit from the build in Page. The example below sets some properties in the constructor and overrides the writing of the page head to include some meta tags.

[UsesLayout("order_page_layout")]
internal class OrderPage : Page
{
    public MasterPage(IPageDependenciesFactory dependencies) 
        : base(dependencies)
    {
        TitleFunc = rc => "Order number ABC123";
        BodyClassNames = "my-app_order-page";
        BodyId = Guid.NewGuid().ToShortString();
    }
    public override IWriteResult WriteHeadArea(IRenderContext context)
    {
        context.Html.WriteUnclosedElement(
            "meta", 
            "name", "description", 
            "content", "This is the order page");
        context.Html.WriteLine();
        context.Html.WriteUnclosedElement(
            "meta", 
            "name", "keywords", 
            "content", "sample,demo");
        context.Html.WriteLine();
        context.Html.WriteUnclosedElement(
            "meta", 
            "name", "author", 
            "content", "Martin Halliday");
        context.Html.WriteLine();
        context.Html.WriteUnclosedElement(
            "meta", 
            "name", "viewport", 
            "content", "width=device-width, initial-scale=1.0");
        context.Html.WriteLine();
        return base.WriteHeadArea(context);
    }
}

Example of a Package Containing a Page

The following example defines a package that builds a page using the fluent builder.

    public class CmsManagerPackage: IPackage
    {
        private readonly ITemplateBuilder _templateBuilder;
        private readonly INameManager _nameManager;
        public string NamespaceName { get; set; }
        public IModule Module { get; set; }
        public ElementType ElementType { get { return ElementType.Package; } }
        public string Name { get; set; }
        public CmsManagerPackage(
            IHostingEnvironment hostingEnvironment,
            ITemplateBuilder templateBuilder,
            INameManager nameManager)
        {
            _templateBuilder = templateBuilder;
            _nameManager = nameManager;
            Name = "cms_manager";
            NamespaceName = "cmsmanager";
        }
        IPackage IPackage.Build(IFluentBuilder fluentBuilder)
        {
            // -- snip--
            // Code deleted from here to reduce complexity and focus on the page building aspect.
            // This example will not compile because of the missing piece.
            // -- snip--
            var managerLayout = fluentBuilder.BuildUpLayout()
                .Name("manager")
                .ZoneNesting("editor,tools")
                .Region("editor", editorRegion)
                .Region("tools", toolsRegion)
                .Build();
            fluentBuilder.BuildUpPage()
                .Name("cmsManager")
                .Route("/cms/manager", 0, Method.Get)
                .Layout(managerLayout)
                .Build();
            return this;
        }
    }