Owin Framework

An open architecture for interoperable middleware

Interfaces

Project

Pages Html

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

Home |  Readme

Region element reference | The OWIN FRamework

Region Elements

Region elements define and area of a page that contains content. The content can be defined by a component, layout, template set, or localizable Html. The region can bind to a list of objects and repeat the content for each object in the list. The region can also introduce a new data binding scope that affects how the content within the region resolves its data needs.

Attribute Example

In many situations you can define the regions you need by decorating an empty class with attributes. This is illustrated below: 

[IsRegion("header")]
[Style("height: 90px; width:100%; padding:10px; background: gray; color: whitesmoke; clear: both;")]
[UsesLayout("header")]
internal class HeaderRegion { }
Note that regions render a <div> element around the contents of the region by default, so you don't need to add a [Container] attribute. You can add the [Container] attribute to remove the <div> element or change it to some other type of Html element.

In this example the [IsRegion()] attribute defines the name of the region. This name can be used to refer to the region in other page elements. The [Style()] attribute defines some custom styling for the <div> element that is rendered by the region, and the [UsesLayout()] attribute specifies a layout to render inside the <div>.

The following attributes can be attached to a region define the region's behavior.

  • [IsRegion] identifies this class as a region
  • [ChildContainer] configures the html element to use when repeating the contents of the region
  • [ChildStyle] a css style to apply to the elements that repeat within the region
  • [Container] configures the html element to use as a container for this region
  • [DataScope] defines a scope name used in resolving data providers
  • [DeployCss] css rules to include on any page that includes this region
  • [DeployFunction] a Javascript function to include on any page that has this region on it
  • [DeployedAs] specifies how Javascript and CSS should be deployed for this region
  • [NeedsComponent] identifies a dependent component
  • [NeedsData] identifies data that is required for this region
  • [PartOf] defines the package (namespace) for CSS and Javascript in this region
  • [RenderTemplate] renderes a template into specific part of the page
  • [Repeat] makes the contents of this region repeat for each object in a list
  • [RenderTemplate] specifies a template to render into an area of the page
  • [Style] adds CSS style to region container
  • [UsesComponent] specifies that this region contains a component
  • [UsesLayout] specifies that this region contains a layout
  • [ZoneRegion] fills a zone of the region's layout with another region if this region contains a layout
  • [ZoneComponent] fills a zone of the region's layout with a component if this region contains a layout
  • [ZoneLayout] fills a zone of the region's layout with a layout if this region contains a layout
  • [ZoneTemplate] fills a zone of the region's layout with a template if this region contains a layout

Region Class Example

If you are unable to achieve the effect you are looking for by decorating empty classes with attributes, then you can also make your region class inherit from the built-in Region class and override the virtual methods to fully customize the behavior as illustrated in the example below: 

private class RegionExample : Region
{
    public RegionExample(IRegionDependenciesFactory dependencies) 
        : base(dependencies)
    {
        WriteOpen = w =>
            {
                w.WriteOpenTag("ul");
                w.WriteLine();
            };
        WriteClose = w => 
            {
                w.WriteCloseTag("ul");
                w.WriteLine();
            };
        WriteChildOpen = w => 
            {
                w.WriteOpenTag("li");
                w.WriteLine();
            };
        WriteChildClose = w =>
            {
                w.WriteCloseTag("li");
                w.WriteLine();
            };
        RepeatType = typeof(NewsItem);
    }
}

Example of a Package Containing a Region

If you are creating a distributable package, or creating reusable packages within your application, these packages can build regions using the fluent syntax provided by the Fluent Builder. This is illustarted by the example below: 

    [IsPackage("regions")]
    public class RegionsPackage : OwinFramework.Pages.Framework.Runtime.Package
    {
        public RegionsPackage(IPackageDependenciesFactory dependencies) 
            : base(dependencies)
        {
        }
        [Container("ul")]
        [Repeat(typeof(NewsItem), null, "li")]
        private class Region1 : Region
        {
            public Region1(IRegionDependenciesFactory dependencies)
                : base(dependencies)
            {
            }
        }
        public override IPackage Build(IFluentBuilder fluentBuilder)
        {
            fluentBuilder.BuildUpRegion(new Region1(Dependencies.RegionDependenciesFactory))
                .Name("region1")
                .BindTo("breaking-news")
                .ClassNames("news", "breaking")
                .Build();
            return this;
        }
    }
This example uses a combination of attributes attached to the region and configuration via the fluent syntax. In practice you can use either of these techniques. You can also skip creating a region class altogether and just use the fluent syntax is this is your preference. The main advantage of the fluent syntax is that you can use C# expressions and generics to define the region, and Intellisense will show you what's possible.

Copyright 2014-2020