Добавление серверного события в элемент управления extender

У меня есть элемент управления, который поднимает текстовое поле OnTextChanged событие 500 мс после того, как пользователь закончил печатать. Проблема в том, что OnTextChanged поднимается, когда текстовое поле теряет фокус, что вызывает проблемы (из-за обратной передачи).

То, что я хотел бы сделать, это дать экстентору возможность управлять своим собственным событием на стороне сервера (скажем, OnDelayedSubmit) так что я могу справиться с этим отдельно. Событие будет происходить из сценария поведения элемента управления-расширителя (после задержки 500 мс), поэтому __doPostBack в onchanged это не вариант.

Кто-нибудь может пролить свет на то, как это сделать?

1 ответ

Решение

После тщательного изучения элементов управления расширением и JavaScript, я собрал воедино решение, которое, похоже, работает до сих пор.

Основная хитрость заключалась в получении необходимого кода обратной передачи со стороны сервера в сценарий поведения на стороне клиента. Я сделал это с помощью ExtenderControlProperty (который установлен в элементе управления OnPreRender функция), а затем eval'd в сценарии поведения. Остальное было основным материалом для обработки событий.

Так что теперь мой контроль за расширителем .cs файл выглядит примерно так:

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());
        }
    }

}

И мой скрипт поведения выглядит примерно так:

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);
    }
}

Теперь серверное событие может быть обработано так же, как вы обрабатывали бы событие в любом другом элементе управления.

Другие вопросы по тегам