O'Reilly logo

Essential SharePoint by Jeff Webb

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 roundtrip 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, then loaded and rendered by the following line:

     ' See "Creating Web Part Appearance" for GetHtml() code.
     output.Write(GetHtml("clientSum.htm")

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required