建立Control Extender

摘要:建立Control Extender

在準備考試的過程中發現了這個有趣的東西,

這個東西可以幫我們為已經定義好的控制項做加值的動作,

像以前我們要讓一個TextBox限制只能輸入數字,

我們會需要繼承TextBox來擴充功能,

現在,我們只需要定義一個ControlExtender來完成這樣的需求。

在做練習的過程中,我定義了一個簡單的Extender,

功能是讓TextBox秀出jQuery的datepicker,

第一步需要繼承ExtenderControl做出自定義的Extender,

繼承ExtenderControl需要完成GetScriptReferences、GetScriptDescriptors兩個方法的定義,

在GetScriptReferences中需要回傳參考到的Javascript路徑。

而在GetScriptDescriptors中需要回傳要註冊到頁面的javascript定義。

另外可以定義一些屬性用以讓使用者可以自定一些行為,

在Class層級可以加上TargetControlTypeAttribute來限制可以用這個Extender的控制項型別,

/// <summary>

/// DatePickerExtender類別。

/// </summary>

/// <remarks></remarks>

[TargetControlType(typeof(TextBox))]

public class DatePickerExtender : ExtenderControl

{

    protected override IEnumerable<ScriptReference> GetScriptReferences()

    {

       string currentAssemblyFullName = Assembly.GetExecutingAssembly().FullName;

       JQuerySection section = ConfigurationManager.GetSection("jQuery") as JQuerySection;

 

       ScriptReference jquery = new ScriptReference()

       {

           Assembly = currentAssemblyFullName,

           Name = "Valhalla.JQuery.Extenders.Resources.jquery.js"

       };

       ScriptReference jqueryUI = new ScriptReference()

       {

           Assembly = currentAssemblyFullName,

           Name = "Valhalla.JQuery.Extenders.Resources.jquery-ui.js"

       };

       ScriptReference behavior = new ScriptReference()

       {

           Assembly = currentAssemblyFullName,

           Name = "Valhalla.JQuery.Extenders.Resources.DatePickerBehavior.js"

       };

 

       if(section == null || section.IsLoadFramework)

           return new ScriptReference[] {

              jquery, jqueryUI, behavior

           };

       else

           return new ScriptReference[] { behavior };

    }

 

    protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl)

    {

       ScriptBehaviorDescriptor descriptor =

           new ScriptBehaviorDescriptor("Valhalla.JQuery.DatePickerBehavior", targetControl.ClientID);

 

       return new ScriptDescriptor[] { descriptor };

    }

}

定義完成後,接下來要定義一個javascript類別,使控制項加入擴充的行為,

(function($)

{

    // Register the namespace for the control.

    Type.registerNamespace('Valhalla.JQuery');

 

    //

    // Define the behavior properties.

    //

    Valhalla.JQuery.DatePickerBehavior = function(element)

    {

       Valhalla.JQuery.DatePickerBehavior.initializeBase(this, [element]);

    }

 

    //

    // Create the prototype for the behavior.

    //

 

    Valhalla.JQuery.DatePickerBehavior.prototype = {

 

 

       initialize: function()

       {

           Valhalla.JQuery.DatePickerBehavior.callBaseMethod(this, 'initialize');

 

           $(this.get_element()).datepicker();

       },

 

       dispose: function()

       {

           $(this.get_element()).datepicker("destroy");

 

           Valhalla.JQuery.DatePickerBehavior.callBaseMethod(this, 'dispose');

       }

    };

 

    // Optional descriptor for JSON serialization.

    Valhalla.JQuery.DatePickerBehavior.descriptor = {};

 

    // Register the class as a type that inherits from Sys.UI.Control.

Valhalla.JQuery.DatePickerBehavior.registerClass('Valhalla.JQuery.DatePickerBehavior', Sys.UI.Behavior);

})(jQuery);

 

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

包含這個script還有需要的jQuery程式就是GetScriptReferences是方法所需要輸出的參考路徑,

這樣子就完成了一個簡單的Extender。