3.3 WebForms Class: DOM Manipulation and UI Control Methods

The WebForms class provides a large collection of methods for generating WebForms Core Action Controls. These methods allow the server to manipulate the HTML DOM, modify element properties, create and remove elements, control form elements, and perform incremental UI changes.

This section covers the DOM manipulation and UI control methods of the WebForms class.

Most methods in this section use an InputPlace parameter. InputPlace identifies the target element or elements using the WebForms Place Criteria (WPC) syntax. For example, Textbox1 can target an element by its identifier, while <h1> can target an element by its tag name.

3.3.1 AddLine

The AddLine method is provided for extensions and advanced scenarios where a developer needs to add an Action Control directly.

AddLine

Method	Description
AddLine(string Name, string Value)	Adds an Action Control line using the specified name and value.

The method can be used to generate an Action Control that does not have a dedicated WebForms method.

WebForms form = new WebForms(); form.AddLine("st<h1>", "Hello World!");

3.3.2 Add Methods

The Add methods create data when it does not exist and append the new value when the corresponding data already exists. This makes them useful when multiple values, classes, styles, options, or other properties must be added to the same element.

Element Properties

Method	Arguments	Description
AddId	InputPlace, Id	Adds an id value to the target element.
AddName	InputPlace, Name	Adds a name value to the target element.
AddValue	InputPlace, Value	Adds a value to the target form element.
AddClass	InputPlace, Class	Adds a CSS class to the target element.
AddStyle	InputPlace, Style	Adds a complete CSS style declaration.
AddStyle	InputPlace, Name, Value	Adds a CSS property and its value.

For example, multiple classes can be added independently:

form.AddClass("Textbox1", "my-class1"); form.AddClass("Textbox1", "my-class2"); form.AddStyle("Textbox1", "background-color", "blue"); form.AddStyle("Textbox1", "margin-left: 30px");

The equivalent operation can therefore build up the target element without replacing previously added values.

Option and Checkbox Elements

Method	Arguments	Description
AddOptionTag	InputPlace, Text, Value, Selected	Adds an option to a select element. Selected determines whether the option is selected.
AddCheckBoxTag	InputPlace, Text, Value, Checked	Adds a checkbox to the target location. Checked determines its initial checked state.

The Selected and Checked arguments are optional and default to false.

form.AddOptionTag("<select>", "name1", "value1"); form.AddOptionTag("<select>", "name2", "value2", true); form.AddCheckBoxTag("<section>", "name1", "value1", true); form.AddCheckBoxTag("<section>", "name2", "value2", false);

Title, Label, and Text

Method	Arguments	Description
AddTitle	InputPlace, Title	Adds title information to the target element.
AddLabel	InputPlace, Label	Adds label content to the target element.
AddText	InputPlace, Text	Adds text to the target location.
AddTextToUp	InputPlace, Text	Adds text toward the upper position of the selected element according to WebForms Core execution rules.

For example:

form.AddTitle("Textbox1", "Please Enter name:"); form.AddLabel("<h1>", "Heading Label"); form.AddText("<h1>", "Additional heading text"); form.AddTextToUp("<section>", "Text added to the upper position");

Attributes

Method	Arguments	Description
AddAttribute	InputPlace, Attribute, Value, Splitter	Adds an attribute to the target element.

Value is optional and defaults to an empty string. Splitter is a character used by the Action Control when a custom attribute value needs a specific separator. It defaults to '\0'.

form.AddAttribute("<h1>", "attr"); form.AddAttribute("<h1>", "attr2", "attr2 value");

Creating Tags

The Add section also contains methods for creating HTML tags. These methods are part of the Add operation set and are not excluded from this section.

Method	Arguments	Description
AddTag	InputPlace, TagName, Id	Adds a new tag at the target location.
AddTagToUp	InputPlace, TagName, Id	Adds a new tag toward the upper position of the target.
AddTagBefore	InputPlace, TagName, Id	Adds a new tag before the target element.
AddTagAfter	InputPlace, TagName, Id	Adds a new tag after the target element.
AddHidden	InputPlace, Name, Value, Id	Adds a hidden form input to the target location.

The Id argument is optional for the tag creation methods and defaults to an empty string.

form.AddTag("<section>", "b", "NewtagID"); form.AddTagToUp("<section>", "u", "NewUPtagID"); form.AddText("<section>|<b>", "Bold text"); form.AddText("<section>|<u>", "Underlined text"); form.AddTagBefore("<section>", "h4", "H4Tag"); form.AddTagAfter("<section>", "h4", "H4ATag"); form.AddHidden("<form>", "HiddenValue", "Hidden1", "HiddenID");

Because the newly created elements can immediately become targets for subsequent Action Controls, several operations can be composed into a single server-generated command sequence.

3.3.3 Set Methods

The Set methods create the corresponding data when it does not exist and replace the existing value when it does exist. They are therefore useful when the target property must have a specific final value.

Element Properties

Method	Arguments	Description
SetId	InputPlace, Id	Sets the id of the target element.
SetName	InputPlace, Name	Sets the name of the target element.
SetValue	InputPlace, Value	Sets the value of the target form element.
SetClass	InputPlace, Class	Sets the CSS class value.
SetStyle	InputPlace, Style	Sets the complete style value.
SetStyle	InputPlace, Name, Value	Sets a specific CSS property.

form.SetId("<h1>", "HeadingID"); form.SetName("<h1>", "HeadingName"); form.SetValue("Textbox1", "New value"); form.SetClass("Textbox1", "my-class"); form.SetStyle("Textbox1", "background-color", "violet"); form.SetStyle("Textbox1", "margin-left: 0px");

Unlike AddClass, calling SetClass establishes the specified class value rather than successively adding another class through the Add operation.

Option and Checkbox Controls

Method	Arguments	Description
SetOptionTag	InputPlace, Text, Value, Selected	Sets the specified option data.
SetChecked	InputPlace, Checked	Sets the checked state of the target checkbox.
SetCheckBoxTag	InputPlace, Text, Value, Checked	Sets the specified checkbox data.

The Selected and Checked arguments of the option and checkbox tag methods default to false.

form.SetOptionTag("<select>", "name1", "value1"); form.SetOptionTag("<select>", "name2", "value2", true); form.SetChecked("(mysection$1)", true); form.SetCheckBoxTag("<section>", "name4", "value4", false);

Title, Label, Text, and Attributes

Method	Arguments	Description
SetTitle	InputPlace, Title	Sets the title of the target element.
SetLabel	InputPlace, Label	Sets the label of the target element.
SetText	InputPlace, Text	Sets the text of the target element.
SetAttribute	InputPlace, Attribute, Value	Sets the specified attribute.

form.SetTitle("Textbox1", "Please Enter name:"); form.SetLabel("<h1>", "Main heading"); form.SetText("<h1>", "Updated heading"); form.SetAttribute("<h1>", "data-status", "active");

The Value argument of SetAttribute is optional and defaults to an empty string.

Dimensions

Method	Arguments	Description
SetWidth	InputPlace, Width	Sets the width of the target element.
SetWidth	InputPlace, int Width	Sets the width in pixels.
SetHeight	InputPlace, Height	Sets the height of the target element.
SetHeight	InputPlace, int Height	Sets the height in pixels.

form.SetWidth("Textbox1", 240); form.SetHeight("Textbox1", 140);

When an integer overload is used, the value is converted to pixels. The equivalent string form can be used when another CSS unit is required.

form.SetWidth("Textbox1", "50%"); form.SetHeight("Textbox1", "10rem");

Visual and Interaction Properties

Method	Arguments	Description
SetBackgroundColor	InputPlace, Color	Sets the background color.
SetTextColor	InputPlace, Color	Sets the text color.
SetFontName	InputPlace, Name	Sets the font family.
SetFontSize	InputPlace, Size	Sets the font size.
SetFontSize	InputPlace, int Size	Sets the font size in pixels.
SetFontBold	InputPlace, Bold	Enables or disables bold text.
SetVisible	InputPlace, Visible	Shows or hides the target element.
SetTextAlign	InputPlace, Align	Sets text alignment.

form.SetBackgroundColor("<body>", "violet"); form.SetTextColor("<body>", "gray"); form.SetFontName("<body>", "Tahoma"); form.SetFontSize("<body>", "1.5rem"); form.SetFontBold("<h4>", true); form.SetVisible("<h5>", false); form.SetTextAlign("<h4>", "right");

Form Control Properties

Method	Arguments	Description
SetReadOnly	InputPlace, ReadOnly	Sets whether the target form element is read-only.
SetDisabled	InputPlace, Disabled	Sets whether the target form element is disabled.
SetFocus	InputPlace, Focus	Sets the focus state of the target element.
SetMinLength	InputPlace, Length	Sets the minimum length.
SetMaxLength	InputPlace, Length	Sets the maximum length.

form.SetReadOnly("Textbox1", true); form.SetDisabled("Textbox2", true); form.SetFocus("Textbox2", true); form.SetMinLength("Textbox2", 5); form.SetMaxLength("Textbox2", 150);

Select and Checkbox State

Method	Arguments	Description
SetSelectedValue	InputPlace, Value	Selects an option by its value.
SetSelectedIndex	InputPlace, Index	Selects an option by its index.
SetCheckedValue	InputPlace, Value, Checked	Sets the checked state of a checkbox identified by its value.
SetCheckedIndex	InputPlace, Index, Checked	Sets the checked state of a checkbox identified by its index.

Both SetSelectedIndex and SetCheckedIndex provide string and integer overloads.

form.SetSelectedValue("<select>", "value2"); form.SetSelectedIndex("<select>", 4); form.SetCheckedValue("<section>", "value10", false); form.SetCheckedIndex("<section>", 4, false);

3.3.4 Insert Methods

The Insert methods create the corresponding data only when it does not already exist. If the target already contains the requested data, the operation does nothing.

This behavior makes Insert different from both Add and Set. Add appends data, Set replaces the existing value, and Insert preserves existing data.

Method	Arguments	Description
InsertId	InputPlace, Id	Inserts an id only when one does not already exist.
InsertName	InputPlace, Name	Inserts a name only when one does not already exist.
InsertValue	InputPlace, Value	Inserts a value only when one does not already exist.
InsertClass	InputPlace, Class	Inserts a CSS class only when the corresponding data does not exist.
InsertStyle	InputPlace, Style	Inserts a style value only when the corresponding data does not exist.
InsertStyle	InputPlace, Name, Value	Inserts a CSS property and value.
InsertOptionTag	InputPlace, Text, Value, Selected	Inserts an option if the corresponding option data does not exist.
InsertCheckBoxTag	InputPlace, Text, Value, Checked	Inserts a checkbox if the corresponding checkbox data does not exist.
InsertTitle	InputPlace, Title	Inserts title data only when it does not already exist.
InsertLabel	InputPlace, Label	Inserts label data only when it does not already exist.
InsertText	InputPlace, Text	Inserts text only when the corresponding data does not exist.
InsertAttribute	InputPlace, Attribute, Value, Splitter	Inserts an attribute only when the corresponding data does not exist.

The Selected and Checked arguments default to false. The Value and Splitter arguments of InsertAttribute are optional, with defaults matching the WebForms implementation.

form.InsertId("<h1>", "HeadingID"); form.InsertName("<h1>", "HeadingName"); form.InsertValue("Textbox1", "Initial value"); form.InsertClass("Textbox1", "my-class"); form.InsertStyle("Textbox1", "color", "blue"); form.InsertTitle("<h1>", "Heading title"); form.InsertLabel("<h1>", "Heading label"); form.InsertText("<h1>", "Initial text"); form.InsertAttribute("<h1>", "data-status", "active");

A useful pattern is to use Insert when an operation should establish a value only if the page does not already provide one.

3.3.5 Delete Methods

The Delete methods remove specific properties, values, child data, attributes, or elements from the DOM.

Method	Arguments	Description
DeleteId	InputPlace	Removes the id from the target element.
DeleteName	InputPlace	Removes the name from the target element.
DeleteValue	InputPlace	Removes the value from the target form element.
DeleteClass	InputPlace, ClassName	Removes the specified CSS class.
DeleteStyle	InputPlace, StyleName	Removes the specified CSS style property.
DeleteOptionTag	InputPlace, Value	Removes the option identified by its value.
DeleteAllOptionTag	InputPlace	Removes all option tags from the target.
DeleteCheckBoxTag	InputPlace, Value	Removes the checkbox identified by its value.
DeleteAllCheckBoxTag	InputPlace	Removes all checkbox tags from the target.
DeleteTitle	InputPlace	Removes title data.
DeleteLabel	InputPlace	Removes label data.
DeleteText	InputPlace	Removes text data.
DeleteAttribute	InputPlace, Attribute	Removes the specified attribute.
Delete	InputPlace	Deletes the target element.
DeleteParent	InputPlace	Deletes the parent of the target element.

The distinction between Delete and DeleteParent allows the selected element or its containing element to be removed directly.

form.DeleteClass("Textbox1", "my-class1"); form.DeleteStyle("Textbox1", "background-color"); form.DeleteAttribute("Textbox1", "type"); form.DeleteOptionTag("<select>", "value1"); form.DeleteAllOptionTag("<select>"); form.DeleteCheckBoxTag("<section>", "value1"); form.DeleteAllCheckBoxTag("<section>"); form.DeleteText("<h5>"); form.Delete("<select>");

3.3.6 Increase Methods

The Increase methods modify numerical UI properties by increasing their current value. They are available for minimum length, maximum length, font size, width, height, and element value.

Method	Arguments	Description
IncreaseMinLength	InputPlace, Value	Increases the minimum length by the specified value.
IncreaseMaxLength	InputPlace, Value	Increases the maximum length by the specified value.
IncreaseFontSize	InputPlace, Value	Increases the font size by the specified value.
IncreaseWidth	InputPlace, Value	Increases the width by the specified value.
IncreaseHeight	InputPlace, Value	Increases the height by the specified value.
IncreaseValue	InputPlace, Value	Increases the numerical value of the target element.

Each method provides both string and int overloads.

form.SetMinLength("txt_Number", 4); form.SetMaxLength("txt_Number", 18); form.IncreaseMinLength("txt_Number", 26); form.IncreaseMaxLength("txt_Number", 22); form.IncreaseFontSize("txt_Number", 20); form.IncreaseWidth("txt_Number", 100); form.IncreaseHeight("txt_Number", 100); form.SetValue("txt_Number", "20"); form.IncreaseValue("txt_Number", 80);

The incremental methods are useful when the required result depends on the current browser-side value rather than a fixed value known by the server.

3.3.7 Decrease Methods

The Decrease methods are the inverse of the corresponding Increase methods. They decrease the current value of the selected UI property.

Method	Arguments	Description
DecreaseMinLength	InputPlace, Value	Decreases the minimum length by the specified value.
DecreaseMaxLength	InputPlace, Value	Decreases the maximum length by the specified value.
DecreaseFontSize	InputPlace, Value	Decreases the font size by the specified value.
DecreaseWidth	InputPlace, Value	Decreases the width by the specified value.
DecreaseHeight	InputPlace, Value	Decreases the height by the specified value.
DecreaseValue	InputPlace, Value	Decreases the numerical value of the target element.

As with the Increase methods, every Decrease method provides both string and int overloads.

form.DecreaseMinLength("txt_Number", 27); form.DecreaseMaxLength("txt_Number", 23); form.DecreaseFontSize("txt_Number", 10); form.DecreaseWidth("txt_Number", 50); form.DecreaseHeight("txt_Number", 50); form.DecreaseValue("txt_Number", 80);

3.3.8 Choosing Between Add, Set, Insert, Delete, Increase, and Decrease

These method groups provide different mutation semantics and should be selected according to the intended operation.

Method Group	Purpose
Add	Append or add new data to the target.
Set	Create the data when absent or replace the existing value.
Insert	Create the data only when it does not already exist.
Delete	Remove a property, value, attribute, child data, or element.
Increase	Increase a supported numerical UI value relative to its current value.
Decrease	Decrease a supported numerical UI value relative to its current value.

This distinction allows a server-side WebForms sequence to express precise DOM operations without requiring the server to maintain a mirrored DOM. The generated Action Controls describe the required operations, and WebFormsJS executes them in the browser.

WebForms form = new WebForms(); form.AddClass("Textbox1", "highlight"); form.SetValue("Textbox1", "Updated value"); form.InsertAttribute("Textbox1", "data-status", "active"); form.DeleteStyle("Textbox1", "color"); form.IncreaseWidth("Textbox1", 50); form.DecreaseFontSize("Textbox1", 2);

The resulting sequence is transmitted as WebForms Core Action Controls and executed by the WebFormsJS browser runtime.