Monday, March 26, 2012

Catching key press events. For example username control without postback

Hi atlas developers and implementers,

For example I have a textbox and I want that on every key press the written string will be controlled from database and it should say whether it is found on database or not. I'm using atlas 2.0. It is like username control without postback.

How can I do this..

Kind Regards,

Fatih U?AR.
Postglobal Ltd.
R&D ManagerHi,

basic example + bonus behavior:

<%@. Page Language="C#" %><%@. Import Namespace="System.Data" %><%@. Import Namespace="System.Web.Services" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> private DataTable data = null; protected void Page_Load(object sender, EventArgs e) { BuildData(); } private void BuildData() { data = new DataTable(); data.Columns.Add(new DataColumn("Username", typeof(string))); data.Rows.Add("garbin"); data.Rows.Add("leoscorpio82"); } [WebMethod] public bool CheckForUsername(string username) { bool userExists = data.Select("Username = '" + username + "'").Length > 0; return userExists; }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="sm" runat="server"></atlas:ScriptManager> <div> <span>Username:</span> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox> </div> </form> <script type="text/javascript"> function txtUsername_Keypress(sender, e) { PageMethods.CheckForUsername($object('txtUsername').get_text(), onCheckComplete); } function onCheckComplete(result) { $object('txtUsername').get_style().backgroundColor = (result) ? '#ffffff' : '#ff0000'; } </script> <script type="text/xml-script"> <page> <components> <textBox id="txtUsername"> <behaviors> <keyUpBehavior keyup="txtUsername_Keypress" /> </behaviors> </textBox> </components> </page> </script> <script type="text/javascript"> // A behavior to handle the keyup event. Type.registerNamespace('AtlasExamples'); AtlasExamples.KeyUpBehavior = function() { AtlasExamples.KeyUpBehavior.initializeBase(this); // Private members. var _keyupHandler; // Events. this.keyup = this.createEvent(); // Initialize / Dispose. this.initialize = function() { AtlasExamples.KeyUpBehavior.callBaseMethod(this, 'initialize'); _keyupHandler = Function.createDelegate(this, keyupHandler); this.control.element.attachEvent('onkeyup', _keyupHandler); } this.dispose = function() { this.control.element.detachEvent('onkeyup', _keyupHandler); _keyupHandler = null; AtlasExamples.KeyUpBehavior.callBaseMethod(this, 'dispose'); } // Descriptor. this.getDescriptor = function() { var td = AtlasExamples.KeyUpBehavior.callBaseMethod(this, 'getDescriptor'); td.addEvent('keyup', true); return td; } // Event Handler. function keyupHandler() { //debug.trace(event.keyCode); this.keyup.invoke(this, Sys.EventArgs.Empty); } } AtlasExamples.KeyUpBehavior.registerClass('AtlasExamples.KeyUpBehavior', Sys.UI.Behavior); Sys.TypeDescriptor.addType('script', 'keyUpBehavior', AtlasExamples.KeyUpBehavior); </script></body></html>

hello ,

the answer is ok but where is the 'AtlasExamples' behavior

i'll be glad for you answer

kind regards,


Hi,

AtlasExamples is a namespace (defined with a call to Type.registerNamespace at the beginning of the Javascript code) while the behavior is the AtlasExamples.KeyUpBehavior class defined inside the Javascript code block (it inherits from the base Sys.UI.Behavior class).


hi garbin yes i know but i don't have the dll file of the namespace. so i can't get it work. I need necessary files.. I'll be glad if you send me the files tofatihu@.postglobal.com

regards,


Hi,

sorry, but what do you mean by "the dll of the namespace"?


I mean, I run the code you wrote but it didn't work, what should I do, it didn't validate

Hi,

ah, sorry, didn't notice that the code was written for CTPs :)

Here's the updated code:

<%@. Page Language="C#" %><%@. Import Namespace="System.Data" %><%@. Import Namespace="System.Web.Services" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> private static DataTable data = null; protected void Page_Load(object sender, EventArgs e) { BuildData(); } private void BuildData() { data = new DataTable(); data.Columns.Add(new DataColumn("Username", typeof(string))); data.Rows.Add("garbin"); data.Rows.Add("leoscorpio82"); } [WebMethod] public static bool CheckForUsername(string username) { bool userExists = data.Select("Username = '" + username + "'").Length > 0; return userExists; }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="TheScriptManager" runat="server"> <Scripts> <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" /> </Scripts> </asp:ScriptManager> <div> <span>Username:</span> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox> </div> </form> <script type="text/javascript"><!-- function txtUsername_Keypress(sender, e) { PageMethods.CheckForUsername($get('txtUsername').value, onCheckComplete); } function onCheckComplete(result) { $get('txtUsername').style.backgroundColor = (result) ? '#ffffff' : '#ff0000'; } //--> </script> <script type="text/xml-script"> <page xmlns="http://schemas.microsoft.com/xml-script/2005" xmlns:cc="AtlasExamples"> <components> <textBox id="txtUsername"> <behaviors> <cc:keyUpBehavior keyUp="txtUsername_Keypress" /> </behaviors> </textBox> </components> </page> </script> <script type="text/javascript"> // A behavior to handle the keyup event. Type.registerNamespace('AtlasExamples'); AtlasExamples.KeyUpBehavior = function(element) { AtlasExamples.KeyUpBehavior.initializeBase(this, [element]); } AtlasExamples.KeyUpBehavior.prototype = { // Initialize / Dispose. initialize : function() { AtlasExamples.KeyUpBehavior.callBaseMethod(this, 'initialize'); $addHandlers(this.get_element(), {'keyup':this._onKeyUp}, this); }, dispose : function() { $clearHandlers(this.get_element()); AtlasExamples.KeyUpBehavior.callBaseMethod(this, 'dispose'); }, // Event Handler. _onKeyUp : function(evt) { this._raiseEvent('keyUp', Sys.EventArgs.Empty); }, // Event add_keyUp : function(handler) { this.get_events().addHandler('keyUp', handler); }, remove_keyUp : function(handler) { this.get_events().removeHandler('keyUp', handler); }, _raiseEvent : function(eventName, eventArgs) { var handler = this.get_events().getHandler(eventName); if (handler) { if (!eventArgs) { eventArgs = Sys.EventArgs.Empty; } handler(this, eventArgs); } } } // Descriptor. AtlasExamples.KeyUpBehavior.descriptor = { events: [{name: 'keyUp'}] } AtlasExamples.KeyUpBehavior.registerClass('AtlasExamples.KeyUpBehavior', Sys.UI.Behavior); </script></body></html>

No comments:

Post a Comment