Description

Anthem allows you to invoke methods on your server-side pages via client-side JavaScript.

In this example, you'll invoke a simple Add method defined on your server-side page from the client.

Steps

  1. Add a public method called Add to your page so that it takes in two integers and returns their sum:

    public int Add(int a, int b)
        {
        return a + b;
        }
  2. Apply the Anthem.Method attribute to the Add method. Without this, it can't be invoked from clients:

    [Anthem.Method]
        public int Add(int a, int b)
        {
        return a + b;
        }
  3. Register the page with the Anthem manager when the page fires its Load event:

    void Page_Load()
        {
        Anthem.Manager.Register(this);
        }
  4. Add three input controls and a button to trigger the call back to your page:

    <input id="a" size="3" value="1">
        <input id="b" size="3" value="2">
        <button onclick="DoAdd(); return false;" type="button">Add</button>
        <input id="c" size="6">
  5. The button is invoking a client-side function called DoAdd. That function needs to be defined on the page so that it invokes the server-side Add method:

    <script language="javascript" type="text/javascript">
        function DoAdd() {
        Anthem_InvokePageMethod(
        'Add',
        [document.getElementById('a').value, document.getElementById('b').value],
        function(result) {
        document.getElementById('c').value = result.value;
        }
        );
        }
        </script>
  6. The first argument to Anthem_InvokePageMethod needs to be the name of the method you want to invoke:

    Anthem_InvokePageMethod(
        'Add',
        [document.getElementById('a').value, document.getElementById('b').value],
        function(result) {
        document.getElementById('c').value = result.value;
        }
        );
  7. The second argument is the array of parameters for that method:

    Anthem_InvokePageMethod(
        'Add',
        [document.getElementById('a').value, document.getElementById('b').value],
        function(result) {
        document.getElementById('c').value = result.value;
        }
        );
  8. The third argument is a function that will get invoked here on the client when the server-side call back completes:

    Anthem_InvokePageMethod(
        'Add',
        [document.getElementById('a').value, document.getElementById('b').value,
        function(result) {
        document.getElementById('c').value = result.value;
        }
        );
  9. The argument to the client-side call back function is a result object. It has a value and an error property. If an error occurred on the server, value will be null and error won't be:

    Anthem_InvokePageMethod(
        'Add',
        [document.getElementById('a').value, document.getElementById('b').value,
        function(result) {
        document.getElementById('c').value = result.value;
        }
        );

Remarks

Don't forget to make your method public and put the Anthem.Method attribute on it!

The conversion from strings to the integers (or whatever the type of the parameters is on the server) happens on the server. The types of parameters that are supported is limited to the common "primitive" types (like strings, integers, doubles, and single-dimensional arrays of those types).

The supported return value types is slightly richer with support for DataSet-related objects and limited automatic support for other custom types.

The client-side call back function can be defined anonymously as the above example demonstrates.

下面把完整的代码贴出来:

 1<script runat="server">
 2                void Page_Load()
 3                {
 4                    Anthem.Manager.Register(this);
 5                }

 6
 7                [Anthem.Method]
 8                public int Add(int a, int b)
 9                {
10                    return a + b;
11                }

12            </script>
13            <input id="a" size="3" value="1"> <input id="b" size="3" value="2"> <button onclick="DoAdd(); return false;" type="button">
14                Add</button> <input id="c" size="6">
15            <script language="javascript" type="text/javascript">
16                function DoAdd() {
17                    Anthem_InvokePageMethod(
18                        'Add',
19                        [document.getElementById('a').value, document.getElementById('b').value],
20                        function(result) {
21                            document.getElementById('c').value = result.value;
22                        }

23                    );
24                }

25            </script>