ASP.Net AJAX - Submit Extender

4/3/2008

To be honest I have no idea what to call this extender. Input Extender? Submit Extender? Anyway, let me explain what it does first and maybe you can come up with a clever name. Have you ever wanted to be able to press a particular button (or group of buttons) while in an input box, check box, etc. and have a specific button called?

For instance, I have two list boxes. The first box is filled with possible choices that the person might want and the second box are the items that they've selected.  We also have two buttons, an add button and a remove button (we've set the add button as the default for the form).  The user selects the item they want, presses enter, form submits, and we add the item to the second list box in the code behind.  Very simple and the user doesn't have to click anything special. Now what about removing the newly selected items from the box? The person would select the item and have to click on the remove button. However wouldn't it be nice if we could just press the delete key and have the remove button called?

Well you can do that... In IE and Safari anyway... I even created an extender to do it.

SubmitExtender.cs

   1: using System;
   2: using System.Web.UI.WebControls;
   3: using System.Web.UI;
   4: using System.ComponentModel;
   5: using System.ComponentModel.Design;
   6: using AjaxControlToolkit;
   7:  
   8: [assembly: System.Web.UI.WebResource("AJAXControls.Submit.SubmitBehavior.js", "text/javascript")]
   9:  
  10: namespace AJAXControls.Submit
  11: {
  12:     [Designer(typeof(SubmitDesigner))]
  13:     [ClientScriptResource("AJAXControls.Submit.SubmitBehavior", "AJAXControls.Submit.SubmitBehavior.js")]
  14:     [TargetControlType(typeof(Control))]
  15:     public class SubmitExtender : ExtenderControlBase
  16:     {
  17:         [ExtenderControlProperty]
  18:         [RequiredProperty()]
  19:         [IDReferenceProperty(typeof(IButtonControl))]
  20:         public string SubmitButtonID
  21:         {
  22:             get
  23:             {
  24:                 return GetPropertyValue("SubmitButtonID", "");
  25:             }
  26:             set
  27:             {
  28:                 SetPropertyValue("SubmitButtonID", value);
  29:             }
  30:         }
  31:  
  32:         [ExtenderControlProperty]
  33:         [DefaultValue(13)]
  34:         [ClientPropertyName("KeyCode")]
  35:         public int KeyCode
  36:         {
  37:             get
  38:             {
  39:                 return GetPropertyValue("KeyCode", 13);
  40:             }
  41:             set
  42:             {
  43:                 SetPropertyValue("KeyCode", value);
  44:             }
  45:         }
  46:     }
  47: }

SubmitBehavior.js

   1: // README
   2: //
   3: // There are two steps to adding a property:
   4: //
   5: // 1. Create a member variable to store your property
   6: // 2. Add the get_ and set_ accessors for your property
   7: //
   8: // Remember that both are case sensitive!
   9:  
  10:  
  11: /// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
  12:  
  13:  
  14: Type.registerNamespace('AJAXControls.Submit');
  15:  
  16: AJAXControls.Submit.SubmitBehavior = function(element) {
  17:     AJAXControls.Submit.SubmitBehavior.initializeBase(this, [element]);
  18:     this._KeyCodeValue=13;
  19:     this._SubmitButtonID=null;
  20: }
  21: AJAXControls.Submit.SubmitBehavior.prototype = {
  22:     initialize : function() {
  23:         AJAXControls.Submit.SubmitBehavior.callBaseMethod(this, 'initialize');
  24:         
  25:         Sys.UI.DomEvent.addHandler(this.get_element(), 'keydown',Function.createDelegate(this, this._KeyDown));
  26:     },
  27:     
  28:     _KeyDown:function(EventElement)
  29:     {
  30:         if((EventElement.which&&EventElement.which==this._KeyCodeValue)||(EventElement.keyCode&&EventElement.keyCode==this._KeyCodeValue))
  31:         {
  32:             EventElement.returnValue=false;
  33:             EventElement.cancel=true;
  34:             
  35:             var Button=document.getElementById(this._SubmitButtonID);
  36:             Button.click();
  37:             return false;
  38:         }
  39:         return true;
  40:     },
  41:  
  42:     dispose : function() {
  43:         // TODO: Add your cleanup code here
  44:  
  45:         AJAXControls.Submit.SubmitBehavior.callBaseMethod(this, 'dispose');
  46:     },
  47:  
  48:     // TODO: (Step 2) Add your property accessors here
  49:     get_SubmitButtonID : function() {
  50:         return this._SubmitButtonID;
  51:     },
  52:  
  53:     set_SubmitButtonID : function(value) {
  54:         this._SubmitButtonID = value;
  55:     },
  56:     
  57:     get_KeyCode : function() {
  58:         return this._KeyCodeValue;
  59:     },
  60:  
  61:     set_KeyCode : function(value) {
  62:         this._KeyCodeValue = value;
  63:     }
  64: }
  65: AJAXControls.Submit.SubmitBehavior.registerClass('AJAXControls.Submit.SubmitBehavior', AjaxControlToolkit.BehaviorBase);

In the example above, all we would have to do is create a SubmitExtender with a TargetID equal to the ID of the second list box, a SubmitButtonID equal to the ID of the remove button, and the key code that we wanted (in this case 127). There are other ways to accomplish this including client side callbacks, etc. but I wanted something simple. My only complaint is it doesn't work on FireFox. The .click() function on input objects doesn't seem to work correctly (or at least not how I would expect). Anyway, download the code, leave feedback, etc. and happy coding.



Comments