Team LiB
Previous Section Next Section

What About Client Scripting?

In Chapter 2, you saw that the new development environment offers great support for client-side programming. Even dynamic generation of client scripts has become easier, as you'll see in the next section. Furthermore, a new Client Callback function is ready to use.

Client Scripting

In the future you can leave the definition of client-side scripts to the ClientScriptManager, which you can access through the Page.ClientScript property. The object returned offers the scripting methods that you already know from the existing Page class and some new ones. Among others there are, for example, RegisterArrayDeclaration(), RegisterClientScriptBlock(), RegisterClientScriptInclude(), RegisterClientScriptResource(), RegisterHiddenField(), RegisterOnSubmitStatement(), and RegisterStartupScript().

As of now, the scripts are handled through several dictionaries internally to avoid the double definition of common scripts. With the help of various Is ... Registered methods, you can check if a script already exists. In addition to the existing approach, you can now pass a type instance that's used as additional key value:

this.ClientScript.RegisterClientScriptBlock(this.GetType(), "myscript", myScript);

The annoying creation of script blocks that are needed again and again is a thing of the past. If desired, the ClientScriptManager will create the common JavaScript tags <script> ... </script> automatically for you. A new Boolean parameter does the job for several methods:

this.ClientScript.RegisterStartupScript(this.GetType(),
    "startupalert",
    "alert('Hello world!');",
    true);

Client Callback

Until now, a postback of the complete page is required for each server-side action, including all the corresponding difficulties such as the eventual loss of the current scroll position and the control focus. Also, the user can interact with the page without waiting for the entire reload. The new Client Callback feature was built to be used in those cases when only single data values have to be sent and reloaded rather than the entire page. Therefore, a request is sent to the server through JavaScript and XMLHTTP similarly to what has been done by the Internet Explorer WebService behavior in the past.

In comparison with the Internet Explorer WebService behavior, Client Callbacks are available in the current version of the Internet Explorer as well as for Netscape (using its own technique). You can use the Client Callback in custom controls as well as directly within your page. One control that already benefits from this feature today is the TreeView. It can dynamically load nodes as needed.

The implementation of a Client Callback is relatively easy and consists of only two steps. First, the control or the page must support the ICallbackEventHandler interface by implementing the RaiseCallbackEvent method. This method is accessed as soon as the Callback is initiated. It receives a character string as parameter. Also, the value returned by the method (that will later be available on the client side) is defined as a string. Additionally, you need two client-side script functions that initiate the Callback and process the (asynchronously delivered) return value.

Listing 11-18 shows the proceeding steps in a comprehensive way. In this case, the local page uses the Callback itself and implements the already mentioned interface to fulfill this purpose. The Callback is used to invert a string value (character by character) that was entered by the user in a TextBox control and display it afterward in the input box again.

Listing 11-18: Server-Side Page Callback Reverses Entered Text
Start example
<%@ page language="C#" %>
<%@ implements interface="System.Web.UI.ICallbackEventHandler"%>

<script runat="server">

void Page_Load(object sender, System.EventArgs e)
{
    string callback = Page.GetCallbackEventReference(this, "this.value",
        "ProcessReverse", null);
    this.Textbox1.Attributes.Add("onchange", callback);
}

string ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
    char[] chars = eventArgument.ToCharArray();
    Array.Reverse(chars);
    return new string(chars);
}

</script>

<script language="javascript">

function ProcessReverse(result, context)
{
    document.forms[0].Textbox1.value = result;
}

</script>

<html>
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form runat="server">
        <asp:textbox id="Textbox1" runat="server">
        </asp:textbox>
    </form>
</body>
</html>
End example

The Callback function is created through the Page.GetCallbackEventReference() method and assigned to the input box's onchange client event. Apart from the parameter, the method includes the name of the second client function that will receive the asynchronously delivered result of the callback. In this case, it's the ProcessReverse() function that puts the return value of the Callback into the TextBox on the client side. Sounds complicated, doesn't it? A glance at Figure 11-16 and Listing 11-18 will show you that it is quite easy indeed, however.

Click To expand
Figure 11-16: The text "Hello World" was reversed by a server-side callback method.
Tip 

You'll find another example for the use of Client Callbacks in Chapter 9, which covers Themes. There you will find a solution in which a Theme chosen by a user is stored in his Personalization Profile using the Callback.


Team LiB
Previous Section Next Section