摘要:建立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。