Canvas Core Sections
Sections are the Heart of Canvas and manage what content should be rendered when a URL is requested.
Sections allow the developer / designer to define how a requested URL should be handled by the server, and what should be rendered as a result of a given request.
A section can respond to a pre-defined static URL,
/index.html for example, or a dynamic URL where it's components are accessible via variables for such as
The content rendered might be anything from a HTML page, CSS, some JSON data or a file such as a PDF.
Under most cases you'll be rendering HTML.
Using Design Mode.
Each section can be accessed via the Designer in the dot-dash of the NetCanvas site. From the designer, a range of "Controls" can be added to the section to build up the appropriate response.
Sections & Templates
Each Section has a Top-Level "Template", defined on the Section Edit Page. Normally you will use the
blank template. The other template,
_main_, is used for administrative pages.
blank template, as the name suggests, presents you with an empty page. Most sites, from page-to-page, will conform to a standard layout. For example the header, navigation, footer, etc. appear the same on every page.
To achieve the same in NetCanvas, you would create a
TemplateControl, which is a special type of Canvas Control where the ASCX HTML can contain
<n4:canvasplacholder> elements, which define the available locations for other controls.
<n4:canvasplacholder> / Location has an ID, which determines the name of the Location. Every Location name must be unique.
Templates can contain other templates. Taking the example layout in the image above, the
MAIN_CONTENT location might contain another template that defines the layout for a specific page, be it a Product page or a blog post. For example the following image shows a possible layout for a Product page, where another template has been added to the Location -
MAIN_CONTENT. This allows the developer to create modular and reusable controls.
Taking the Product Page example further, you might add to
MAIN_IMG Location :
- An Image control
- A List of Other Images
PRODUCT_MAIN Location :
- A PlainText Control for the Main Title
- A PlainText Control for the Sub Title
- A RichText Control for the Product Description
- A AddToBasket Control to Buying the Product
PRODUCT_META Location :
- A Recently Viewed Products Control
- A Similar / Customers Also Viewed Control