Anthem supports invoking methods on controls as well as on pages.
In this example, you'll be adding two instances of the same custom control to
the page. Those controls will be invoking methods on themselves when they're
clicked.
-
First, implement your custom control by creating a new class that derives from
System.Web.UI.Control:
using System;
using System.Web.UI;
namespace Anthem.Examples
{
public class CustomControl : Control
{
}
}
-
Make the control render itself by overriding its Render method. Do
something simple like output the current time in a span element:
protected override void Render(HtmlTextWriter writer)
{
writer.RenderBeginTag("span");
writer.Write(DateTime.Now);
writer.RenderEndTag();
}
-
When the span gets clicked, we want the time to update itself by
invoking a method on the control. To do this, add an id and an onclick
to the span element. The onclick attribute will
invoke the JavaScript function that does all the work by passing in a reference
to the span element that got clicked:
protected override void Render(HtmlTextWriter writer)
{
writer.AddAttribute("id", ClientID);
writer.AddAttribute("onclick", "GetNow(this)");
writer.RenderBeginTag("span");
writer.Write(DateTime.Now);
writer.RenderEndTag();
}
-
The GetNow function doesn't normally exist on our pages so we have
to make sure it gets added to all pages that host this kind of control.
Override the control's OnLoad method to inject that script into
the page. While you're in OnLoad, be sure to register the control
with Anthem.Manager:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
Anthem.Manager.Register(this);
Page.RegisterClientScriptBlock(
typeof(CustomControl).FullName,
@"<script language='javascript' type='text/javascript'>
function GetNow(control) {
Anthem_InvokeControlMethod(
control.id,
'GetNow',
[],
function (result) {
control.innerHTML = result.value;
}
);
}
</script>");
}
-
Looking at that client-side function, we can see that it's trying to invoke a
method called GetNow on the control. Add that to the custom
control class and make sure that it's public and has the Anthem.Method
attribute on it:
[Anthem.Method]
public DateTime GetNow()
{
return DateTime.Now;
}
-
Unlike Anthem_InvokePageMethod, the first argument to Anthem_InvokeControlMethod
is the ID of the control you want to invoke the method on because there could
be more than one instance of a control on a page. Remember how we passed in this
to the GetNow function? That argument is called control
inside GetNow and is used to grab the ID of the control we need to
invoke the method on.
function GetNow(control) {
Anthem_InvokeControlMethod(
control.id,
'GetNow',
[],
function (result) {
control.innerHTML = result.value;
}
);
}
-
The second argument to Anthem_InvokeControlMethod is the name of
the method on the control you want to invoke:
function GetNow(control) {
Anthem_InvokeControlMethod(
control.id,
'GetNow',
[],
function (result) {
control.innerHTML = result.value;
}
);
}
-
The third argument is an array of parameters to pass in to the method. The GetNow
method on the control takes in no parameters so we're passing in an empty
array:
function GetNow(control) {
Anthem_InvokeControlMethod(
control.id,
'GetNow',
[],
function (result) {
control.innerHTML = result.value;
}
);
}
-
Finally, Anthem_InvokeControlMethod takes in a function to call
back when the server-side call back "returns":
function GetNow(control) {
Anthem_InvokeControlMethod(
control.id,
'GetNow',
[],
function (result) {
control.innerHTML = result.value;
}
);
}