Input Place is a selector abstraction used by WebForms Core to identify one or more HTML elements that will be modified, queried, or bound to events at runtime.
In WebForms APIs, Input Place is typically represented as a string parameter, but it can also be constructed programmatically using the InputPlace helper class.
Input Place supports both the WebForms Selector Language (WSL), which is the native selector syntax of WebForms Core, and standard CSS selector patterns.
Note: WebForms Core also defines an Output Place pattern, which follows the same conceptual model but is used for rendering and output targeting.
WPC is designed to make DOM targeting explicit while keeping HTML itself unchanged. A selector can identify an element by its id, name, tag name, class, attribute, relationship to another element, browser context, or a combination of these mechanisms.
WebForms Core provides several ways to identify a browser object or HTML element.
| Selection | WPC Pattern | Description |
|---|---|---|
| By ID | id |
Selects an element by its HTML id. |
| By Name | (name) |
Selects an element by its name attribute. |
| By Tag | <tag> |
Selects an element by its tag name. |
| By Class | {class} |
Selects an element by its CSS class. |
| CSS Query | *query |
Selects an element using a CSS selector. |
| CSS Query All | [query |
Selects all elements matching a CSS selector. |
| Current | $ |
Refers to the current element or current context. |
| Target | ! |
Refers to the event target. |
| Root | ~ |
Refers to the root of the current DOM context. |
| Window | ` |
Refers to the browser window. |
| HTML | . |
Refers to the HTML element. |
| Head | ^ |
Refers to the document head. |
| Screen Orientation | % |
Refers to the screen orientation context. |
| All | * |
Selects all elements. |
| Parent | / |
Moves the selection to a parent element. |
| Upper | - |
Repeats the last selector in Action Controls. |
These patterns are defined directly by the InputPlace class. For example, Current, Target, Root, Parent, Window, HTML, and Head are represented by dedicated constants.
The simplest WPC pattern is an element ID.
This identifies the element whose id is banner.
The equivalent helper method is:
Because an ID is the default direct selector form, no additional prefix is required.
An element can be selected by its HTML name attribute by surrounding the name with parentheses.
If multiple elements have the same name, an index can be appended.
Indexes are zero-based. Therefore, (email)0 refers to the first matching element, while (email)2 refers to the third.
To select all elements with a specific name, use *.
The corresponding helper methods are:
The InputPlace class provides these forms directly through Name and AllNames.
Tag selection uses angle brackets.
This selects a button element.
An index can be used to select a specific matching tag:
To select all matching tags:
The helper equivalents are:
WPC also provides a child-tag form:
This refers to a direct child in the current selection. An index can be supplied:
And all direct children can be selected with:
The corresponding helper methods are Child(), Child(int), and AllChild().
Note: When a<template>element is selected, WebFormsJS does not target the<template>element itself. Instead, it targets the first inner tag contained in the template content.
This behavior allows a template to act as a reusable DOM structure while WPC operations are applied to the first element contained in that template.
Classes are enclosed in curly braces.
An index can be used to select a specific matching element:
To select all elements containing the class:
The corresponding helper methods are:
The InputPlace helper implements these forms through Class and AllClasses.
Attributes can be selected by enclosing the attribute name in double quotation marks.
An index can be appended when multiple elements contain the attribute:
All matching elements can be selected with *:
WPC also supports matching an attribute value.
Attribute value matching supports operators:
| Operator | Meaning |
|---|---|
^ |
Starts with |
$ |
Ends with |
* |
Contains |
~ |
Word-based matching |
For example:
The helper method supports the same forms:
These attribute forms are generated by the Attribute and AllAttributes methods of InputPlace.
WPC can use standard CSS selector patterns when a more complex CSS-based selection is appropriate.
A CSS query is prefixed with *.
For example:
The helper method is:
When all matching elements are required, use the query-all form:
The helper method is:
Because WPC itself uses characters such as =, |, and ? as part of its syntax, the helper methods encode these characters when embedding a CSS query into a WPC pattern.
The $ symbol represents the current element or current selection context.
This is especially useful when an Action Control is executed in a context where WebFormsJS already has a current element.
For example, a server-generated command can operate on the element that initiated the current execution without knowing its explicit ID.
The ! symbol refers to the event target.
This is useful for event-driven operations where the element that triggered the event is the desired target.
For example, an event attached to several buttons can use ! to operate on the button that actually generated the event.
The ~ symbol refers to the root of the current DOM context.
Root selection is also relevant to Transient DOM execution. When WebForms Core operates inside a Transient DOM context, using ~ selects the transient root rather than necessarily referring to the permanent document root.
WPC can target browser-level objects in addition to HTML elements.
| Pattern | Context |
|---|---|
, |
Document |
` |
Window |
. |
HTML element |
^ |
Head |
% |
Screen orientation |
These patterns are defined as constants in the InputPlace class.
The / pattern moves the selection toward a parent element.
A parent operation can also be appended to an existing selector.
The Parent() extension method provides the programmatic form:
Parent navigation can be repeated when a higher ancestor is required.
WPC selectors can be chained together with |. Each segment operates relative to the result of the preceding segment.
This means that the selector first identifies a form and then selects matching input elements within that context.
Nested selection can be combined with other WPC forms:
For example, a selector can identify a container and then select an element with a particular class inside it.
The Child extension method can construct the same relationship programmatically:
The WebForms extension implementation appends nested places using the | separator.
The - pattern is used to repeat the previous selector in Action Controls.
See the two examples; it performs both of the intended tasks.
Example 1
Example 2
Using this pattern eliminates the need to repeat WPC patterns, thereby reducing the volume of Action Control code.
The . symbol is used by several WPC selection forms to request direct child elements.
For example:
Select last p element that are direct children of tag with my-tag ID.
WPC supports indexed selection for several selector types. Indexes are zero-based.
| Pattern | Meaning |
|---|---|
<button>0 |
First matching button |
<button>2 |
Third matching button |
{item}0 |
First matching class |
(item)2 |
Third matching name |
<button>* |
All matching buttons |
Negative indexes can also be used by the selector engine to address elements relative to the end of a matching collection.
WPC provides a criteria layer in addition to the basic selector syntax. Criteria allow a selector to filter its result according to properties or relationships of the selected elements.
A criterion is appended using ?.
Criteria can be combined to create more precise selections.
The T criterion evaluates the inner text of an element.
The t criterion evaluates direct child text only.
The distinction is important when an element contains nested elements. T considers the element's inner text, while t limits the check to direct child text.
The a criterion evaluates an attribute value.
It can be used when the selection needs to be filtered according to an attribute rather than simply selecting elements that possess that attribute.
The g criterion evaluates the tag name.
This allows tag-name filtering to be combined with another selection mechanism.
The v criterion evaluates whether the selected element is visible.
This is useful when the operation should only apply to elements currently considered visible by WebFormsJS.
The e criterion evaluates whether an element is enabled.
This can be used to distinguish enabled elements from disabled elements before executing an Action Control.
The c criterion evaluates the checked state of supported form elements.
This is particularly useful for checkbox and radio-button selections.
The H criterion checks whether an element has a descendant matching the specified condition.
The lowercase h criterion checks for a direct child.
The distinction between descendant and direct-child criteria allows WPC to express DOM relationships without requiring a separate CSS selector.
WPC can restrict a collection to a range of matching elements.
Range selection is useful when only a portion of a collection should be processed.
The selector engine also supports a modulo-style form inside the range criterion:
This form can be used to select elements according to their index modulo a divisor. For example, a divisor of 2 with remainder 0 selects indexes divisible by two.
Note: The current implementation expresses modulo selection using the bracketed[divisor/remainder]form. It should therefore not be documented as a bare?0/2syntax unless the selector implementation is changed accordingly.
WPC provides sibling-based criteria for navigating between neighboring elements.
The + criterion refers to the next sibling.
The - criterion refers to the previous sibling.
This makes it possible to build selectors based on the relative position of elements in the DOM.
Multiple criteria can be combined to make a selection more precise.
WPC supports operations for intersection, union, and difference.
| Operator | Operation |
|---|---|
& |
Intersection |
. |
Union |
\ |
Difference |
These operations allow WPC to construct a result set from multiple conditions instead of relying on a single selector property.
This example is for selecting numbers 14 through 17, using the \ character to denote "difference."
Part One
Part Two
Criteria can also be negated. A negative criterion excludes elements that satisfy the specified condition.
This makes it possible to express selections such as "all elements except those satisfying this condition" without requiring a separate client-side filtering function.
Criteria can be combined with nested WPC selectors.
This first establishes a selection scope and then applies a criterion to the elements found inside that scope.
Nested selectors and criteria can therefore be combined to describe both where an element is located and which properties it must satisfy.
Although WPC patterns can be written directly as strings, WebForms Core provides the InputPlace helper class for programmatic construction.
The extension methods supplied by WebForms Core can also append child and parent relationships or criteria to an existing selector.
The Criteria extension appends ? and also encodes WPC-reserved characters when necessary.
The Child extension provides a convenient way to append a nested selector.
The resulting selector represents a nested path.
The Parent extension moves upward from the current selection.
Parent navigation can be chained when several levels of the DOM hierarchy need to be traversed.
WPC does not require special HTML elements or a component-specific markup model. The selector operates directly on the browser DOM and can target ordinary HTML elements.
For example, the following HTML requires no WFC-specific attributes:
The server can target the button using WPC:
The HTML remains ordinary HTML, while the server specifies the target through the WebForms protocol.
Input Place is not an isolated selector feature. It is used throughout the WebForms class API. Methods that modify, read, bind, or attach behavior to browser elements generally receive an Input Place parameter.
For example:
In each case, the selector identifies the browser target while the WebForms method defines the operation to perform.
This separation is important to the Commander and Executor model. The WebForms class generates the command, while WebFormsJS resolves the Input Place against the current browser DOM and executes the operation.
WPC selectors are resolved at execution time in the browser. This is important when the DOM has changed after the initial page load.
An Action Control can therefore target an element that was inserted, replaced, or otherwise modified by an earlier Action Control in the same execution flow, provided that the selector resolves to the intended element at that point in the sequence.
This execution-time model also allows WPC to work with dynamically generated content, including content created from templates.
The HTML <template> element has special behavior in WebFormsJS. When the selector engine resolves a selected element and determines that its tag name is template, it processes the template's inner HTML and resolves the first inner element as the selected element.
When the template is selected, the effective target is the first inner tag, in this example the <article> element, rather than the <template> element itself.
This behavior is useful when a template represents a reusable DOM structure that will be populated, manipulated, or replicated by WebForms Core.
WPC can be viewed as a compact selector DSL rather than simply a collection of helper methods.
A selector can describe:
These mechanisms can be combined into a single Input Place and passed directly to WebForms APIs.
WPC does not attempt to replace CSS selectors. Instead, it provides a native WebForms selector language alongside CSS selector support.
CSS remains appropriate when a selector is naturally expressed through CSS syntax:
WPC's native syntax is useful when the target is better described through WebForms concepts such as current element, event target, parent traversal, indexed selection, server-generated paths, or WebForms criteria.
The two approaches can therefore coexist in the same application.
WebForms Core also defines an OutputPlace abstraction. It inherits from InputPlace and follows the same general selector model.
This allows the same conceptual path and targeting mechanisms to be used when a WebForms operation needs to distinguish between an input target and an output destination.
WebForms Place Criteria (WPC) is the selector layer of WebForms Core. It provides a compact language for identifying HTML elements, browser contexts, collections, relationships, and filtered result sets.
Its basic forms include selection by ID, name, tag, class, attribute, CSS query, current element, event target, root, parent, window, document, head, HTML, and screen orientation.
WPC extends these basic selectors with indexes, all-match selection, nested paths, parent traversal, CSS queries, text and attribute criteria, visibility and state checks, child and descendant relationships, ranges, modulo selection, sibling navigation, and set operations.
Because Input Place is resolved by WebFormsJS at runtime, the server does not need to send a new representation of the entire interface when a small part of the DOM must change. The server can instead generate an Action Control that identifies a target and specifies an operation for the browser to execute.
In this model, WPC provides the targeting language, the WebForms class provides the command-generation interface, Action Controls provide the executable commands, and WebFormsJS provides the browser-side resolution and execution environment.
