Custom Extenders cho phép bạn tùy biến và mở rộng khả năng của điều khiển ASP.NET mà không cần phải tạo ra các lớp mới.
Tên bài viết: Hướng dẫn Tạo ra Ajax Control Toolkit Extender
Tác giả: QuangIT
Cấp độ bài viết: Không dành cho người mới bắt đầu làm quen với ASP.Net
Trong hướng dẫn này, bạn tìm hiểu làm thế nào để tạo ra điều khiển tùy chỉnh AJAX Toolkit control extender. Chúng ta tạo ra một extender, đơn giản, nhưng hữu ích mới mà thay đổi trạng thái của một Button từ vô hiệu hóa để kích hoạt khi bạn gõ văn bản vào TextBox. Sau khi đọc hướng dẫn này, bạn sẽ có thể mở rộng ASP.NET AJAX Toolkit với control extender của riêng bạn.
Bạn có thể tạo custom control extender bằng cách sử dụng Visual Studio hay Visual Web Developer (hãy chắc chắn rằng bạn có phiên bản mới nhất của Visual Web Developer).
Tổng quan về Extender DisabledButton
Control Extender mới được đặt tên là các extender DisabledButton. Extender này sẽ có ba đặc tính:
- TargetControlID - TextBox control extender.
- TargetButtonIID - Nút bị vô hiệu hóa hoặc kích hoạt.
- DisabledText - Các văn bản ban đầu được hiển thị trong Button. Khi bạn bắt đầu nhập, Button sẽ hiển thị giá trị của thuộc tính Button Text.
Bạn móc DisabledButton extender đến điều khiển TextBox và Button. Trước khi bạn gõ bất kỳ văn bản, Button bị vô hiệu hóa, TextBox và Button trông như thế này:
Sau khi bạn bắt đầu gõ văn bản, Button được kích hoạt, TextBox và Button trông như thế này:
Để tạo Control Extender, chúng ta cần phải tạo ra ba tập tin sau đây:
- DisabledButtonExtender.cs - File này là lớp control phía máy chủ quản lý việc tạo ra extender và cho phép thiết lập các thuộc tính tại design-time. Nó cũng xác định các thuộc tính có thể được đặt trên extender. Các thuộc tính này có thể truy cập thông qua source và design phù hợp với thuộc tính được xác định trong các tập tin DisableButtonBehavior.js.
- DisabledButtonBehavior.js - File này là nơi sẽ thêm tất cả kịch bản logic máy khách.
- DisabledButtonDesigner.cs - Lớp này cho phép chức năng thiết kế. Bạn cần lớp này nếu bạn muốn các điều khiển extender để làm việc một cách chính xác với Visual Studio / Designer Visual Web Developer.
Vì vậy, một control extender bao gồm điều khiển phía máy chủ, xử lý phía máy khách, và lớp thiết kế phía máy chủ.
Tạo Custom Extender web và dự án
Bước đầu tiên là tạo ra class library project và website trong Visual Studio / Visual Web Developer. Tạo ra Custom extender trong class library project và kiểm tra các custom extender trong trang web.
Cho phép bắt đầu với trang web. Thực hiện theo các bước sau để tạo ra các trang web:
- Chọn tùy chọn trình đơn File, New Web Site.
- Chọn tempalte ASP.NET Web Site.
- Tên website mới .
- Nhấp OK.
Tiếp theo, chúng ta cần tạo class library project chứa mã cho control extender:
- Chọn tùy chọn trình đơn File, New Project.
- Chọn template Class Library.
- Tên class library mới với tên CustomExtenders .
- Nhấp OK.
Sau khi hoàn tất các bước này, cửa sổ Solution Explorer sẽ giống như trong hình 1.
Hình 1: Solution Explorer với website và Project
Tiếp theo, bạn cần phải thêm tất cả các tham chiếu assembly cần thiết cho class library project:
- Kích chuột phải vào dự án CustomExtenders và chọn menu tùy chọn Add Reference .
- Chọn tab .NET
- Add references cho các assemblies sau đây:
- System.Web.dll
- System.Web.Extensions.dll
- System.Design.dll
- System.Web.Extensions.Design. dll
- Chọn tab Browse.
- Thêm references đến assembly AjaxControlToolkit.dll. Assembly này nằm trong thư mục mà bạn tải về AJAX Control Toolkit.
Sau khi hoàn tất các bước này, thư mục class library project References sẽ trông giống như hình 2.
Hình 2: Thư mục References
Tạo Custom Extender Control
Bây giờ chúng ta có class library, có thể bắt đầu xây dựng control extender.
Liệt kê 1 - MyCustomExtender.cs
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
[assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")]
namespace CustomExtenders
{
[ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class MyControlExtender : ExtenderControlBase
{
[ExtenderControlProperty]
[DefaultValue("")]
public string MyProperty
{
get
{
return GetPropertyValue("MyProperty", "");
}
set
{
SetPropertyValue("MyProperty", value);
}
}
}
}
Đầu tiên, lớp kế thừa từ lớp cơ sở ExtenderControlBase. Tất cả các control extender của AJAX Control Toolkit xuất phát từ lớp cơ sở này. Ví dụ, các lớp cơ sở bao gồm thuộc tính TargetID đó là thuộc tính yêu cầu của tất cả các control extender.
Tiếp theo, lớp bao gồm hai thuộc tính sau đây có liên quan đến kịch bản máy khách:
- WebResource - Nguyên nhân tập tin được bao gồm như là một nguồn tài nguyên nhúng trong một assembly.
- ClientScriptResource - Nguyên nhân một nguồn tài nguyên kịch bản phải được lấy từ một assembly.
Thuộc tính WebResource được sử dụng để nhúng các tập tin JavaScript MyControlBehavior.js vào assembly khi custom extender được biên dịch. Thuộc tính ClientScriptResource được sử dụng để lấy kịch bản MyControlBehavior.js từ assembly khi mở rộng tùy chỉnh được sử dụng trong trang web.
Để cho các thuộc tính WebResource và ClientScriptResource làm việc, bạn phải biên dịch tập tin JavaScript như là nguồn tài nguyên nhúng. Chọn tập tin trong cửa sổ Solution Explorer, hãy mở bảng thuộc tính, và gán giá trị nguồn tài nguyên nhúng thuộc tính Build Action.
Chú ý control extender cũng bao gồm thuộc tính TargetControlType. Thuộc tính này được sử dụng để xác định loại hình control được extender bởi các control extender. Trong trường hợp của Liệt kê 1, các control extender được sử dụng để mở rộng TextBox.
Cuối cùng, chú ý các custom extender bao gồm thuộc tính có tên MyProperty. Thuộc tính được đánh dấu với thuộc tính ExtenderControlProperty. Phương thức GetPropertyValue() và SetPropertyValue() được sử dụng để thông qua thuộc tính value từ control extender phía máy chủ đến hành vi phía máy khách.
Liệt kê 2 - DisabledButtonExtender.cs
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
[assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")]
namespace CustomExtenders
{
[ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class DisabledButtonExtender : ExtenderControlBase
{
[ExtenderControlProperty]
[DefaultValue("")]
[IDReferenceProperty(typeof(Button))]
public string TargetButtonID
{
get
{
return GetPropertyValue("TargetButtonID", "");
}
set
{
SetPropertyValue("TargetButtonID", value);
}
}
[ExtenderControlProperty]
[DefaultValue("")]
public string DisabledText
{
get
{
return GetPropertyValue("DisabledText", "");
}
set
{
SetPropertyValue("DisabledText", value);
}
}
}
}
Các extender DisabledButton trong Liệt kê 2 có hai thuộc tính tên là TargetButtonID và DisabledText. IDReferenceProperty áp dụng cho thuộc tính TargetButtonID ngăn không cho bạn chỉ định bất cứ điều gì khác hơn là ID của button lên thuộc tính này.
Các thuộc tính WebResource và ClientScriptResource kết hợp hành vi phía máy khách nằm trong một file có tên DisabledButtonBehavior.js.
Tạo các hành vi Custom Extender
Thành phần phía máy khách của control extender được gọi là hành vi. Logic thực tế vô hiệu hóa và cho phép button được chứa trong hành vi DisabledButton.
Liệt kê 3 - DisabledButtonBehavior.js
- Type.registerNamespace('CustomExtenders');
- CustomExtenders.DisabledButtonBehavior = function(element) {
- CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);
- this._targetButtonIDValue = null;
- this._disabledTextValue = null;
- }
- CustomExtenders.DisabledButtonBehavior.prototype = {
- initialize : function() {
- CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');
- // Initalization code
- $addHandler(this.get_element(), 'keyup',
- Function.createDelegate(this, this._onkeyup));
- this._onkeyup();
- },
- dispose : function() {
- // Cleanup code
- CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
- },
- // Property accessors
- //
- get_TargetButtonID : function() {
- return this._targetButtonIDValue;
- },
- set_TargetButtonID : function(value) {
- this._targetButtonIDValue = value;
- },
- get_DisabledText : function() {
- return this._disabledTextValue;
- },
- set_DisabledText : function(value) {
- this._disabledTextValue = value;
- },
- _onkeyup : function() {
-
- var e = $get(this._targetButtonIDValue);
- if (e) {
- var disabled = ("" == this.get_element().value);
- e.disabled = disabled;
- if ( this._disabledTextValue) {
- if (disabled) {
- this._oldValue = e.value;
- e.value = this._disabledTextValue;
- }
- else
- {
- if(this._oldValue){
- e.value = this._oldValue;
- }
- }
- }
- }
- }
- }
- CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);
Các tập tin JavaScript trong Liệt kê 3 có chứa lớp DisabledButtonBehavior có tên là client-side. Lớp này, như twin phía máy chủ của nó, bao gồm hai thuộc tính tên là TargetButtonID và DisabledText có thể truy cập bằng cách sử dụng get_TargetButtonID/set_ TargetButtonID và get_DisabledText/set_ DisabledText.
Phương thức initialize() xử lý sự kiện KeyUp với các phần tử cho hành vi. Mỗi khi gõ một ký tự vào TextBox liên quan đến hành vi này, KeyUp thực hiện. Việc xử lý KeyUp hoặc cho phép hoặc vô hiệu hóa các nút tùy thuộc vào việc TextBox kết hợp với hành vi chứa bất kỳ văn bản.
Hãy nhớ rằng bạn phải biên dịch tập tin JavaScript trong Liệt kê 3 như là một nguồn tài nguyên nhúng. Chọn tập tin trong cửa sổ Solution Explorer, hãy mở bảng thuộc tính, và gán giá trị nguồn tài nguyên nhúng thuộc tính Build Action (xem hình 3). Tùy chọn này có sẵn trong Visual Studio và Visual Web Developer.
Hình 3: Thêm a JavaScript file như embedded resource
Tạo các Custom Extender Design
Chúng ta cần phải tạo ra lớp Design trong Liệt kê 4. Lớp này cần thiết để làm cho extender hoạt động đúng với Visual Studio / Designer Visual Web Developer.
Liệt kê 4 - DisabledButtonDesigner.cs
using System.Web.UI.WebControls;
using System.Web.UI;
namespace CustomExtenders
{
class DisabledButtonDesigner : AjaxControlToolkit.Design.ExtenderControlBaseDesigner<DisableButtonExtender>
{
}
}
Bạn liên kết Design trong Liệt kê 4 extender DisabledButton với thuộc tính design. Cần phải áp dụng các thuộc tính design cho lớp DisabledButtonExtender như thế này:
[Designer(typeof(DisabledButtonDesigner))]
[ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class DisabledButtonExtender : ExtenderControlBase
{
Sử dụng Custom Extender
Bây giờ chúng ta đã hoàn thành việc tạo Control Extender DisabledButton, để sử dụng nó trong trang web ASP.NET. Đầu tiên, chúng ta cần thêm các custom extender vào hộp công cụ. Thực hiện theo các bước sau:
- Mở trang ASP.NET bằng cách nhấp đúp trang trong cửa sổ Solution Explorer.
- Kích chuột phải vào hộp công cụ và chọn tùy chọn trình đơn Choose Items .
- Trong hộp thoại Choose Toolbox Items, duyệt đến assembly CustomExtenders.dll.
- Nhấp vào nút OK để đóng hộp thoại.
Sau khi hoàn tất các bước này, control Extender DisabledButton sẽ xuất hiện trong hộp công cụ (xem hình 4).
Hình 4: DisableButton trong Toolbox
Tiếp theo, chúng ta cần tạo trang ASP.NET mới. Thực hiện theo các bước sau:
- Tạo một trang ASP.NET mới có tên ShowDisabledButton.aspx.
- Kéo ScriptManager vào trang.
- Kéo một điều khiển TextBox lên trang.
- Kéo một điều khiển Button lên trang.
- Trong cửa sổ Properties, thay đổi thuộc tính ID nút với value btnSave các văn bản và thuộc tính value Save*.
Đã tạo ra trang ASP.NET với control TextBox và Button chuẩn.
Tiếp theo, chúng ta cần phải mở rộng control TextBox với các extender DisabledButton:
- Chọn tùy chọn Add Extender để mở hộp thoại wizard Extender (xem hình 5). Chú ý rằng hộp thoại bao gồm custom extender DisabledButton.
- Chọn extender DisabledButton và nhấn OK.
Hình 5: Hộp thoại Extender Wizard
Cuối cùng, chúng ta có thể thiết lập các thuộc tính của extender DisabledButton. Bạn có thể sửa đổi các thuộc tính của extender DisabledButton bằng cách thay đổi các thuộc tính của điều khiển TextBox:
- Chọn TextBox trong Design.
- Trong cửa sổ Properties, mở rộng nút Extenders (xem hình 6).
- Gán giá trị thuộc tính và giá trị btnSave đến thuộc tính TargetButtonID DisabledText .
Hình 6: Thiết lập các thuộc tính mở rộng
Khi chạy trang (bằng cách nhấn F5), điều khiển button ban đầu vô hiệu hóa. Ngay sau khi bạn bắt đầu nhập văn bản vào TextBox, điều khiển nút được kích hoạt (xem hình 7).
Hình 7: DisabledButton extender hoạt động
Kết luận:
Mục đích của hướng dẫn này là để giải thích làm thế nào có thể mở rộng AJAX Control Toolkit với các điều khiển mở rộng tùy chỉnh. Trong hướng dẫn này, chúng ta đã tạo ra một extender DisabledButton điều khiển đơn giản. Chúng ta thực hiện extender bằng cách tạo ra một lớp DisabledButtonExtender, JavaScript DisabledButtonBehavior và một lớp DisabledButtonDesigner. Bạn thực hiện một loạt các bước tương tự như trên, bạn sẽ có được 1 control custom extender.