Working on the Client Side

The Sum web part performs its calculations on the server, but that's not really necessary or efficient. For high-volume applications, it's a good idea to do as much work on the client side as possible. For example, the following HTML creates an equivalent client-side web part that doesn't require a round-trip to the server to perform the calculations:

<html>
    <head>
        <script id="clientEventHandlersJS" language="javascript">
function _btn_onclick(  ) {
    var arr = new Array("");
    // Use getElementById, direct control refs don't work
    var _txt = document.getElementById("_txt");
    var _div = document.getElementById("_div");
    var total = 0, s = _txt.value;
    arr = s.split("\n");
    for (var i in arr)
    {
        total += parseFloat(arr[i]);
    }
    _div.innerText = "Total: " + total;
    return;
}
        </script>
    </head>
    <body>
        <form id="_frm">
            <div id="_div">Total:
            </div>
            <TEXTAREA id="_txt" name="_txt" rows="10" cols="35">
            </TEXTAREA>
            <br>
            <INPUT id="_btn" type="button" value="Sum"
                 onclick="return _btn_onclick(  )">
        </form>
    </body>
</html>

This code is stored as an HTM file in a resource, and then loaded and rendered by the following line:

protected override void RenderWebPart(HtmlTextWriter writer)
{
    output.Write(GetHtml("clientSum.htm"));
}

At runtime, this web part is visually identical to the server-side web part in Figure 11-8, but the calculation is done on the client computer via JavaScript. The result is much better performance and less network traffic, because the page isn't sent back to the ...

Get Essential SharePoint 2007, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial