Source Code

for file /AJAXEngine/S02_AJAXCoreSamples/CalcAJAX.aspx

<%@ Page Language="C#" EnableViewState="false" %>

<!--
// CalcAJAX.htm
// Sample showing the using the AJAX Engine with webservices consuming multiple parameters.
// Copyright (c) by Matthias Hertel, http://www.mathertel.de
// This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
// -----
// 18.02.2006 created.
// 21.10.2007 revised to use the multiple parameter feature of the AJAXEngine
-->
<!DOCTYPE html>
<html lang="en">
<head runat="server">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Using multiple parameters in web services</title>
  <link href="/mathertel.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="/ajaxcore/ajax.js"></script>
  <script type="text/javascript" src="/ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S02_AJAXCoreSamples/CalcService.asmx"></script>
</head>
<body>
  <mh:Banner ID="Banner1" runat="server" />
  <mh:Title ID="Title" runat="server" />
  <a style="position: absolute; right: �"px; top: 10px" href="../ViewSrc.aspx">View Source</a>
  <hr />
  <table style="table-layout: fixed; width: 300px">
    <tbody>
      <tr>
        <td>&nbsp;</td>
        <td>
          <input id="n1" style="text-align: right; width: 80px" onkeyup="ajax.Start(action1)" value="0"></td>
      </tr>
      <tr>
        <td align="right">+</td>
        <td>
          <input id="n2" style="text-align: right; width: 80px" onkeyup="ajax.Start(action1)" value="0" /></td>
      </tr>
      <tr>
        <td align="right">=</td>
        <td>
          <input id="outputField" style="text-align: right; width: 80px" disabled="disabled" value="0" /></td>
      </tr>
    </tbody>
  </table>
  <script defer="defer" type="text/javascript">

    // declare an AJAX action
    var action1 = {
      delay: 200, // wait for multiple keystrokes from fast typing people

      // the prepare function just returns an array with the parameters and marks it with "multi".
      prepare: function(obj) {
        var p = [];
        p[0] = document.getElementById("n1").value;
        p[1] = document.getElementById("n2").value;
        p.multi = true; // the hint for the ajax Engine
        return (p);
      },

      // the call as usual
      call: proxies.CalcService.AddInteger,

      // the result will now be processed as usual.
      finish: function(p) { document.getElementById("outputField").value = p; },

      onException: proxies.alertException
} // action1

  </script>
  <hr />
  <h3>Hint:</h3>
  <p>Change the numbers in the above fields to calculate the sum on the server.</p>
  <p>This (too) simple sample uses a webservice with multiple parameters. Have a look to the source code and
    see the implementation of the AJAX action definition to see how it's done.</p>
  <mh:Footer ID="foot" runat="server" />
</body>
</html>


This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.