dom - mkol/il2js GitHub Wiki

[Window("~/Example.html")]
public class Example : Window {
	protected void Page_Load() {
		var style = new Style {
			Color = Color.Green
		};
		// Adding elements to document.
		this.Document.Body.Add(
			new Division {
				InnerHTML = "Div1",
				// Following syntax works only for client-side.
				// For server side use `Style = new Style {` instead.
				Style = {
					Color = Color.Red
				}
			},
			new Division {
				InnerHTML = "Div2",
				Style = new Style {
					Color = Color.Blue				}
			},
			new Span {
				Style = style,
				// Adding child elements.
				ChildNodes = new Element[] {
					new Span { InnerHTML = "Span"},
					new Span { InnerHTML = "1"}
				}
			},
			new Span {
				Style = style,
				ChildNodes = new Element[] {
					new Span { InnerHTML = "Span"},
					new Span { InnerHTML = "2"}
				}
			},
			new Span {
				// Since no property is set - You can simply list child elements.
				new Span { InnerHTML = "Span"},
				new Span { InnerHTML = "3"}
			}
		);
	}
}

[Window("~/Example.html")]
public class Example : Window {
	// DOM events can be handled using JSEventHandler delegate.
	protected void Handler(JSEventArgs args) {
		Alert("Clicked");
	}
	protected void Page_Load() {
		var button1 = new Input.Button {
			Value = "Click me"
		};
		// Adding handler using event syntax.
		button1.Click += Handler;
 
		var button2 = new Input.Button {
			Value = "Click me",
			// Adding handler using property syntax.
			OnClick = Handler
		};
 
		this.Document.Body.Add(button1, button2);
	}
}

[Window("~/Example.html", 
	// This indicates, that page file should be created.
	// If page uses css styles - also ~/Example.html.css will be created.
	Render = true
)]
public class Example : Window {
	// Page constructor must be empty (or not defined, which in fact is equivalent)!
	public Example() { }
 
	// Using this method, HTML and CSS files will be generated during compilation.
	// You can use `protected Element Render()` method insted of `protected IEnumerable<Element> Render()`.
	protected IEnumerable<Element> Render() {
		var style = new Style {
			Color = Color.Green
		};
		return new Element[] {
			new Division {
				InnerHTML = "Div1",
				Style = new Style {
					Color = Color.Blue
				}
			},
			new Span {
				Style = style,
				// Adding child elements.
				ChildNodes = new Element[] {
					new Span { InnerHTML = "Span"},
					new Span { InnerHTML = "1"}
				}
			},
			new Span {
				Style = style,
				ChildNodes = new Element[] {
					new Span { InnerHTML = "Span"},
					new Span { InnerHTML = "2"}
				}
			},
			new Span {
				// Since no property is set - You can simply list child elements.
				new Span { InnerHTML = "Span"},
				new Span { InnerHTML = "3"}
			}
		};
	}
}

[Window("~/Example.html", Render = true)]
public class Example : Window {
	// Field of type which type is one of: Element, T, Element[], T[]
	// (T denotes any subtype of Element)
	// marked with DataMemberAttribute ...
	[DataMember]
	private Input.Button button;
	protected Element Render() {
		// ... can be set in render method ...
		this.button = new Input.Button { Value = "Click me" };
 
		// (also page title can be set here)
		this.Title = "Title";
 
		return this.button;
	}
	protected void Page_Load() {
		// ... and accessed at client-side.
		this.button.Click += e => {
			Alert("Clicked");
		};
	}
}