<%@ 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> </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/.