<%@ Page Language="C#" EnableViewState="false" %> <% // ConnectionsTestPage.aspx // Sample page for showing how to implement AJAX data connections Using OpenAjax events. // 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 // ----- // 13.10.2014 working again with IE11. %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Pageproperties test page</title> <link href="/mathertel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/ajaxcore/ajax.js"></script> </head> <body> <mh:Banner ID="Banner1" runat="server" /> <mh:Title ID="Title" runat="server" /> <a style="position: absolute; right: 32px; top: 10px" href="../ViewSrc.aspx">View Source</a> <div style="position: absolute; background-color: #EEEEEE; width: 300px; right: 10px; xtop: 10px"> <%-- <ajax:PropEventLog ID="PropEventLog1" runat="server" /> --%> </div> <ajax:DataForm runat="server" ID="myForm" eventnamespace="mathertel.test"> <table> <tr> <td>X:</td> <td> <ajax:DataInput runat="server" style="text-align: right" eventname="x" name="x" defaultvalue="20" /> </td> <td> <ajax:HSlider ID="HSlider1" runat="server" eventname="x" unit="5" minvalue="10" maxvalue="80" /> </td> </tr> <tr> <td>Y:</td> <td> <ajax:DataInput runat="server" style="text-align: right" eventname="y" name="y" defaultvalue="60" /> </td> <td> <ajax:HSlider ID="HSlider2" runat="server" eventname="y" /> </td> </tr> <tr> <td>Z:</td> <td> <ajax:DataInput runat="server" style="text-align: right" name="z" eventname="z" defaultvalue="75" /> </td> <td> <ajax:HSlider ID="HSlider3" runat="server" eventname="z" /> </td> </tr> </table> <hr /> <table> <tr> <td style="height: 100px; width: 40px; text-align: center; vertical-align: bottom"> <ajax:VBarChart ID="VBarChart2" runat="server" eventname="mathertel.test.x" /> </td> <td style="width: 40px; text-align: center; vertical-align: bottom"> <ajax:VBarChart ID="VBarChart1" runat="server" eventname="mathertel.test.y" /> </td> <td style="width: 40px; text-align: center; vertical-align: bottom"> <ajax:VBarChart ID="VBarChart3" runat="server" eventname="mathertel.test.z" /> </td> </tr> <tr> <td style="text-align: center">x</td> <td style="text-align: center">y</td> <td style="text-align: center">z</td> </tr> </table> </ajax:DataForm> <p>This page shows how multiple controls can be attached to page properties.</p> <p>There are 3 properties in use on this page: x, y, and z.</p> <p>The values can be changed by using ths input fields or the sliders.</p> <p>The barchart control is displaying the current values as a small chart.</p> <h3>OpenAjaxEvent log:</h3> <p>This is a log area where you can see what properties have got new values. The values are brought back to all attached controls. </p> <ajax:OpenAjaxEventLog ID="PropEventLog1" runat="server" /> <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/.