2008-09-01 24 views
5

Tengo un control extensor que plantea el evento OnTextChanged de un cuadro de texto después de que el usuario haya terminado de escribir. El problema con esto es que OnTextChanged se genera cuando el cuadro de texto pierde el foco, lo que causa problemas (debido a la devolución de datos).Agregar evento del lado del servidor al control del extensor

Lo que me gustaría hacer es darle al control de extensión su propio evento del lado del servidor (por ejemplo, OnDelayedSubmit) para que pueda manejarlo por separado. El evento se originará en la secuencia de comandos de comportamiento del control de extensión (después de la demora de 500 ms), por lo que poner __doPostBack en onchanged no es una opción.

¿Alguien puede arrojar luz sobre cómo hacerlo?

Respuesta

5

Después de leer un montón sobre los controles de extensión y JavaScript, he improvisado una solución que parece estar funcionando hasta el momento.

El truco principal fue obtener el código de devolución de datos necesario desde el lado del servidor hasta el script de comportamiento del lado del cliente. Hice esto usando un ExtenderControlProperty (que se establece en la función OnPreRender del control), y luego eval'd en el script de comportamiento. El resto fue cosas básicas de manejo de eventos.

Así que ahora el archivo de mi control extensor .cs se ve algo como esto:

public class DelayedSubmitExtender : ExtenderControlBase, IPostBackEventHandler 
{ 
    // This is where we'll give the behavior script the necessary code for the 
    // postback event 
    protected override void OnPreRender(EventArgs e) 
    { 
     string postback = Page.ClientScript.GetPostBackEventReference(this, "DelayedSubmit") + ";"; 
     PostBackEvent = postback; 
    } 

    // This property matches up with a pair of get & set functions in the behavior script 
    [ExtenderControlProperty] 
    public string PostBackEvent 
    { 
     get 
     { 
      return GetPropertyValue<string>("PostBackEvent", ""); 
     } 
     set 
     { 
      SetPropertyValue<string>("PostBackEvent", value); 
     } 
    } 

    // The event handling stuff 
    public event EventHandler Submit; // Our event 

    protected void OnSubmit(EventArgs e) // Called to raise the event 
    { 
     if (Submit != null) 
     { 
      Submit(this, e); 
     } 
    } 

    public void RaisePostBackEvent(string eventArgument) // From IPostBackEventHandler 
    { 
     if (eventArgument == "DelayedSubmit") 
     { 
      OnSubmit(new EventArgs()); 
     } 
    } 

} 

Y mi guión comportamiento se ve algo como esto:

DelayedSubmitBehavior = function(element) { 
    DelayedSubmitBehavior.initializeBase(this, [element]); 

    this._postBackEvent = null; // Stores the script required for the postback 
} 

DelayedSubmitBehavior.prototype = { 
    // Delayed submit code removed for brevity, but normally this would be where 
    // initialize, dispose, and client-side event handlers would go 

    // This is the client-side part of the PostBackEvent property 
    get_PostBackEvent: function() { 
     return this._postBackEvent; 
    }, 
    set_PostBackEvent: function(value) { 
     this._postBackEvent = value; 
    } 

    // This is the client-side event handler where the postback is initiated from 
    _onTimerTick: function(sender, eventArgs) { 
     // The following line evaluates the string var as javascript, 
     // which will cause the desired postback 
     eval(this._postBackEvent); 
    } 
} 

Ahora el evento del lado del servidor pueden ser manejados de la misma forma en que manejarías un evento en cualquier otro control.

Cuestiones relacionadas