<%@ Page Language="C#" EnableViewState="false" %> <% // CarPage.aspx // Sample page for showing how to implement cascading select elements with AJAX Actions. // 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 // ----- // 12.06.2007 repaired. // 16.09.2007 Using OpenAjax events. %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Cascading Select elements with AJAX</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/S03_AJAXControls/CarData.asmx"></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 eventnamespace="jcl" style="width: 200px; border: solid 2px #203050; padding: 6px; margin: 6px;"> <p>1. Select a class:</p> <ajax:Select ID="ClassSelect" runat="server" eventname="carclass" style="width: 120px"> <option value="C-Class">C-Class</option> <option value="E-Class">E-Class</option> <option value="S-Class">S-Class</option> <option value="SLK-Class">SLK-Class</option> </ajax:Select> <br /> <p>2. Select a model:</p> <ajax:Select ID="ModelSelect" runat="server" eventname="carmodel" style="width: 120px"> </ajax:Select> </div> <script type="text/javascript"> var cascade = { _carclassvalue: null, handleEvent: function(name, data) { if (name == "jcl.carclass") this._carclassvalue = data; ajax.Start(this.FillAction, this); }, // handleEvent FillAction: { delay: 10, prepare: function(obj) { return (obj._carclassvalue); }, call: proxies.CarData.getModelsByClass, finish: function (value, obj) { document.getElementById("ModelSelect").CreateOptions(value); }, onException: proxies.alertException } // FillAction } // cascade OpenAjax.hub.subscribe("jcl.carclass", cascade.handleEvent, cascade); </script> <p>This page is a small sample that shows how to link 2 <select> boxes for a cascading selection by using OpenAjax events.</p> <p>The first <select> element is used for selecting a car series and the second <select> element will display the available models. Both elements are implemented by using the <ajax:Select> control that can publish OpenAjax events when specifying the eventname attribute. The surrounding <div> element specifies the eventnamespace.</p> <pre class="code"> <div eventnamespace="jcl"> <p>1. Select a class:</p> <ajax:Select ID="ClassSelect" runat="server" eventname="carclass" style="width: 120px"> <option value="C-Class">C-Class</option> <option value="E-Class">E-Class</option> <option value="S-Class">S-Class</option> <option value="SLK-Class">SLK-Class</option> </ajax:Select> <br /> <p>2. Select a model:</p> <ajax:Select ID="ModelSelect" runat="server" eventname="carmodel" style="width: 120px"> </ajax:Select> </div></pre> <p>When the value of the first control is changed the select element publishes an "jcl.carclass" event.</p> <p>For linking these 2 elements and a server side method a small javascript object is used:</p> <pre class="code"> var cascade = { _carclassvalue: null, handleEvent: function(name, data) { if (name == "jcl.carclass") this._carclassvalue = data; ajax.Start(this.FillAction, this); }, // handleEvent FillAction: { delay: 10, prepare: function(obj) { return (obj._carclassvalue); }, call: proxies.CarData.getModelsByClass, finish: function (value, obj) { document.getElementById("ModelSelect").CreateOptions(value); }, onException: proxies.alertException } // FillAction } // cascade OpenAjax.hub.subscribe("jcl.carclass", cascade.handleEvent, cascade);</pre> <p>The last line is the key for capturing the event published by the first <select> element and will cause the cascade.handleEvent method to be called.</p> <p>This method will save the new carclass value to the local _carclassvalue variable and then start the AjaxAction FillAction.</p> <p>The prepare function retrieves the stored value that is used as the parameter for the Ajax server webservice call that is available through proxies.CarData.getModelsByClass.</p> <p>The finish function will be used the returned options to call CreateOptions on the second <select> element.</p> <ajax:OpenAjaxEventLog 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/.