Compose behaviour with C#. Used together with Mad.Html.
There are three main things that is used for composing behaviour.
Event handlers are created for the different events.
Actions are added to the event handlers and can be composed together.
Values can be added to actions as parameters. Some actions are also values.
The J class is a factory class that makes it easier to compose behaviour like thisJ.OnClick().Do(J.Alert("I was clicked!"))
You can add events to all Html tags
H.Button("Some Button").AddBehaviour(J.OnClick());
If anything is to happen, you need to add actions to the events.
H.Button("Some Button").AddBehaviour(J.OnClick().Do(J.Alert("I was clicked!")));
A lot of the events uses the jQuery events and some are Mad specific events.
| OnClick | jQuery.com |
| OnInput | jQuery.com |
| OnChange | jQuery.com |
| OnKeyDown | jQuery.com |
| OnFocus | jQuery.com |
| OnFocusOut | jQuery.com |
| OnMouseEnter | jQuery.com |
| OnMouseLeave | jQuery.com |
| OnSubmit | jQuery.com |
| OnLoad | Triggered when the element is loaded. |
| OnReturn | A special event that is triggered when content is returned from a POST or GET request. This makes it possible to return actions from the server that will excecute in the browser. |
To get data and to do manipilations you need to get access to html elements. This can be done by querying. The querying uses jQuery underneath, so the API reflects the jQuery API.
J.Query("a")
J.Query("[attribute='value']")
J.Query("#some-item")
J.Query("#some-item").Find(".some-button")
J.QueryThis()
J.QueryThis().Find(".some-button")
| J.Query(someSelector) | Run a normal query. |
| J.QueryThis() | Query current event element. |
| .Children(...) | jQuery.com |
| .Closest(...) | jQuery.com |
| .Find(...) | jQuery.com |
| .Next(...) | jQuery.com |
| .NextAll(...) | jQuery.com |
| .NextUntil(...) | jQuery.com |
| .OffsetParent(...) | jQuery.com |
| .Parent(...) | jQuery.com |
| .Parents(...) | jQuery.com |
| .PranetsUntil(...) | jQuery.com |
| .Prev(...) | jQuery.com |
| .PrevAll(...) | jQuery.com |
| .PrevUntil(...) | jQuery.com |
| .Siblings(...) | jQuery.com |
A simple button click and alert example.
H.Button("Alert")
.AddBehaviour(J.OnClick().Do(J.Alert("I was clicked!"))));Load date from server into label.
H.Div()
.AddElement(H.Button("Load")
.AddBehaviour(J.OnClick().Do(J.QueryThis().Next().LoadFromGet("/jay/getdate"))))
.AddElement(H.Nbsp(4))
.AddElement(TB.Label("...").AddClass("example-label"))Replace a element with data from server. Nice when using partial views in ASP.NET MVC
H.Div()
.AddElement(H.Button("Replace")
.AddBehaviour(J.OnClick().Do(J.QueryThis().Next().ReplaceWithGet("/jay/newdiv"))))
.AddElement(H.Nbsp(4))
.AddElement(H.Div("replace this div").AddClass("div-to-replace"))
)Toggles a paragraph with text. There are multiple ways of toggeling elements (hide/show, fade & slide).
Some text here.
Some text here.
Some text here.
H.Div()
.AddElement(H.Button("Toggle")
.AddBehaviour(J.OnClick().Do(J.QueryThis().Parent().Find("p").SlideToggle())))
.AddElement(H.Br(2))
.AddElement(H.P("Some text here. <br> Some text here. <br> Some text here."))Create strings with data from multiple JValue sources using {#} to specify the value to load into the template
H.Div()
.AddBehaviour(J.OnLoad()
.Do(J.QueryThis()
.SetHtml(J.Format(
"This is a template with val1: <b>{0}</b>, val2: <b>{1}</b> and val3: <b>{2}</b>.",
J.String("some"),
J.String("more"),
J.String("even more"))))))Get the number of elements found.
H.Div()
.AddBehaviour(J.OnLoad()
.Do(J.QueryThis().SetText(J.Query("div").Count()))
));Checks if any items found.
H.Div()
.AddBehaviour(J.OnLoad()
.Do(J.QueryThis().SetText(J.Query("div").Any()))
));Checks if none items found.
H.Div()
.AddBehaviour(J.OnLoad()
.Do(J.QueryThis().SetText(J.Query("div").None()))
));Get query string paramter from the url.
H.Div()
.AddElement(H.A("?name=Name+1", "Click Here"))
.AddBehaviour(J.OnLoad()
.Do(J.QueryThis().SetText(J.GetQueryStringParameter("name")))
));To upload files use the J.Post(...url...).WithValue(J.FormData(...form...)).
H.Form()
.AddElement(H.File("File")
.AddBehaviour(J.OnChange().Do(J.Post("/jay/UploadFile").WithValue(J.FormData(J.QueryThis().Closest("form"))))))
.AddElement(H.Div().AddClass("upload-result")))If you need to post complex objects you can use the J.Dictionary().
H.Div()
.AddElement(H.Button("Post Dictionary")
.AddBehaviour(J.OnClick().Do(J.QueryThis().Closest("div").Find(".result")
.LoadFromPost("/jay/PostDictionary",
value: J.Dictionary()
.Add("Name", J.Dictionary().Add("FirstName", "Bob").Add("LastName", "Mandora"))
.Add("Email", J.Query("h2").First().GetText())
.Add("Age", 56)
.Add("SomeValue", true)
)))
)
.AddElement(H.Div().AddClass("result")))A sime JavaScript alert.
H.Button("Alert").AddBehaviour(J.OnClick().Do(J.Alert("Button was clicked!")))A sime JavaScript confirm.
H.Button("Confirm").AddBehaviour(J.OnClick()
.Do(J.If(J.Confirm("Do you confirm?"))
.Do(J.QueryThis().SetText("Confimed : True"))
.DoElse(J.QueryThis().SetText("Confimed : False"))
))A sime JavaScript prompt.
H.Button("Choose name").AddBehaviour(J.OnClick().Do(J.QueryThis().SetText(J.Prompt("Name"))))Do actions on each item in a collection.
H.Div()
.AddElement(H.Span("1"))
.AddElement(H.Span("2"))
.AddElement(H.Span("3"))
.AddElement(H.Span("4"))
.AddElement(H.Br())
.AddElement(H.Button("Run Foreach")
.AddBehaviour(J.OnClick()
.Do(J.Foreach(J.QueryThis().Closest("div").Find("span")).Do(J.QueryThis().Closest("div").Find(".result").Append(J.Format("0<br/>", J.QItem().GetText()))))
))
.AddElement(H.Div().AddClass("result"))Do actions on a ticks interval.
H.Div().AddBehaviour(J.OnTick(333).Do(J.QueryThis().SetHtml(J.Window().Prop("Date").Meth("now"))))Do scrolling on elements.
H.Div()
.AddElement(H.Div().AddClass("scroll-target").AddStyle("width:100px;height:100px;overflow:auto;").AddElement("cccccccccccccccc vvvvvvvvvvvvvvvvvvvvvv bbbbbbbbbbbbbbbbbbbbbbbbbbbb fffffffffffffffffffffffffffff dddddddddddddddddddddddddddd ssssssssssssssssssssss fffffffffffffff"))
.AddElement(H.Button("Scroll Top").AddBehaviour(J.OnClick().Do(J.Query(".scroll-target").ScrollTop(0))))
.AddElement(H.Button("Scroll Left").AddBehaviour(J.OnClick().Do(J.Query(".scroll-target").ScrollLeft(0))))
.AddElement(H.Button("Scroll Body").AddBehaviour(J.OnClick().Do(J.Query("body").ScrollTop(0))))Shows server error on a request. Shows the responseTitle as normal text. For the responeText an iframe is used since the content is a HTML page.
H.Div()
.AddElement(H.Button("Call Server").AddBehaviour(J.OnClick().Do(J.Get("/jay/errorcall")
.AddOnFailAction(J.Query(".error-title").SetHtml(J.Result().Prop("responseTitle")))
.AddOnFailAction(J.Query(".error-text").Contents().Find("html").SetHtml(J.Result().Prop("responseText")))
)))
.AddElement(H.Div().AddClass("error-title"))
.AddElement(H.Iframe().AddClass("error-text").AddStyle("width", "100%"))Using basic operators.
+-*/%
H.Div()
.AddElement(H.Div().AddElement(H.Textbox("left", "4")).AddElement(TB.CodeInline("+")).AddElement(H.Textbox("right", "4")).AddElement(H.Button("=").AddBehaviour(J.OnClick(J.QueryThis().SetText(J.Addition(J.QueryThis().Closest("div").Find("[name=left]").GetVal(), J.QueryThis().Closest("div").Find("[name=right]").GetVal()))))))
.AddElement(H.Div().AddElement(H.Textbox("left", "4")).AddElement(TB.CodeInline("-")).AddElement(H.Textbox("right", "4")).AddElement(H.Button("=").AddBehaviour(J.OnClick(J.QueryThis().SetText(J.Subtraction(J.QueryThis().Closest("div").Find("[name=left]").GetVal(), J.QueryThis().Closest("div").Find("[name=right]").GetVal()))))))
.AddElement(H.Div().AddElement(H.Textbox("left", "4")).AddElement(TB.CodeInline("*")).AddElement(H.Textbox("right", "4")).AddElement(H.Button("=").AddBehaviour(J.OnClick(J.QueryThis().SetText(J.Multiplication(J.QueryThis().Closest("div").Find("[name=left]").GetVal(), J.QueryThis().Closest("div").Find("[name=right]").GetVal()))))))
.AddElement(H.Div().AddElement(H.Textbox("left", "4")).AddElement(TB.CodeInline("/")).AddElement(H.Textbox("right", "4")).AddElement(H.Button("=").AddBehaviour(J.OnClick(J.QueryThis().SetText(J.Division(J.QueryThis().Closest("div").Find("[name=left]").GetVal(), J.QueryThis().Closest("div").Find("[name=right]").GetVal()))))))
.AddElement(H.Div().AddElement(H.Textbox("left", "4")).AddElement(TB.CodeInline("%")).AddElement(H.Textbox("right", "4")).AddElement(H.Button("=").AddBehaviour(J.OnClick(J.QueryThis().SetText(J.Modulus(J.QueryThis().Closest("div").Find("[name=left]").GetVal(), J.QueryThis().Closest("div").Find("[name=right]").GetVal()))))))