Source Code

for file /AJAXEngine/S03_AJAXControls/ConnectionsTestPage.aspx

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