Extender 제어에 서버측 이벤트 추가

Question

텍스트 상자를 높이는 확장 컨트롤이 있습니다. OnTextChanged 사용자가 입력을 마친 후 500ms 이벤트.문제는 이것입니다. OnTextChanged 텍스트 상자가 포커스를 잃으면 발생하여 포스트백으로 인해 문제가 발생합니다.

내가 하고 싶은 것은 익스텐더에게 자체 서버측 이벤트 제어권을 부여하는 것입니다(예: OnDelayedSubmit) 그래서 따로 처리할 수 있어요.이벤트는 익스텐더 컨트롤의 동작 스크립트(500ms 지연 후)에서 발생하므로 __doPostBack ~에 onchanged 옵션이 아닙니다.

누구든지 이 문제를 해결하는 방법을 밝힐 수 있습니까?

Answer 1

Extender 컨트롤과 JavaScript에 대해 많이 읽은 후 지금까지 작동하는 것으로 보이는 솔루션을 함께 엮었습니다.

주요 비결은 서버 측에서 클라이언트 측 동작 스크립트로 필요한 포스트백 코드를 가져오는 것이었습니다.나는 이것을 사용하여 이것을했다 ExtenderControlProperty (컨트롤의 OnPreRender 함수), 그런 다음 동작 스크립트에서 평가됩니다.나머지는 기본적인 이벤트 처리 작업이었습니다.

이제 내 익스텐더 컨트롤은 .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);
    }
}

이제 다른 컨트롤에서 이벤트를 처리하는 것과 동일한 방식으로 서버측 이벤트를 처리할 수 있습니다.