ผู้แต่ง: Dflying Chen ( http://dflying.cnblogs.com/ )
หลังจากทำความเข้าใจแนวคิดพื้นฐานและทำตามข้อกำหนดเบื้องต้นแล้ว (โปรดดูที่: การพัฒนาตัวควบคุม Extender ฝั่งเซิร์ฟเวอร์ ASP.NET Atlas - แนวคิดพื้นฐานและข้อกำหนดเบื้องต้น) เราก็สามารถเริ่มพัฒนา ValidateUserNameExtender ได้
ขั้นแรก สร้าง Atlas Control Project ใหม่ใน Visual Studio และตั้งชื่อเป็น ValidateUserName หลังจากสร้างแล้ว โซลูชันควรมีลักษณะเหมือนรูปภาพต่อไปนี้:
ดังที่คุณเห็นแล้วว่าแอสเซมบลีต่อไปนี้ได้รับการอ้างอิงโดยอัตโนมัติสำหรับเราในเทมเพลตโครงการ:
Microsoft.Web.Atlas.dll ซึ่งเป็นแอสเซมบลีหลักของ Atlas และจะถูกใช้โดย Microsoft.AtlasControlExtender.dll ต่อไปนี้
Microsoft.AtlasControlExtender.dll นี่คือแอสเซมบลีที่มีคลาสพื้นฐานของ Extender ใน Atlas ที่ Microsoft จัดเตรียมไว้ให้
ในเวลาเดียวกัน เทมเพลตโปรเจ็กต์นี้ยังได้สร้างไฟล์ JavaScript และไฟล์ C# สามไฟล์ให้เราด้วย:
ValidateUserNameBehavior.js ซึ่งเป็นส่วนหลักของ Extender ของเราและยังเป็นไฟล์ที่รองรับสคริปต์ฝั่งไคลเอ็นต์ทั้งหมดอีกด้วย เช่นเดียวกับการใช้ ASP.NET Atlas จะพัฒนาเนื้อหาของไฟล์ ValidateUserNameBehavior.js ในรูปแบบ Custom Behavior เพื่อตรวจสอบแบบเรียลไทม์ว่าชื่อผู้ใช้ได้รับการลงทะเบียนหรือไม่ ซึ่งจะมีการวิเคราะห์รายละเอียดในภายหลัง Atlas' Extender จริงๆ แล้วเป็นการสรุปพฤติกรรมฝั่งไคลเอ็นต์ ทำให้เป็นตัวควบคุมฝั่งเซิร์ฟเวอร์เพื่อลดความซับซ้อนในการทำงานของนักพัฒนาโปรแกรมเว็บไซต์เมื่อใช้งาน ในฐานะนักพัฒนาการควบคุม มันเพิ่มงานมากมาย
ValidateUserNameDesigner.cs ใช้ที่นี่เพื่อเขียนโค้ดที่ให้การสนับสนุนขณะออกแบบใน Visual Studio
ValidateUserNameExtender.cs ใช้ที่นี่เพื่อกำหนด Extender ของเรา
ValidateUserNameProperties.cs ใช้เพื่อกำหนดคุณสมบัติที่ใช้ใน Extender ของเรา ค่าของคุณสมบัติเหล่านี้จะถูกแมปกับคุณสมบัติของพฤติกรรมของลูกค้า
เริ่มจากไฟล์ ValidateUserNameBehavior.js กันก่อน เปิดไฟล์ ValidateUserNameBehavior.js เราจะพบว่า Template ได้เพิ่มโค้ดไว้ 77 บรรทัดแล้ว และมี TODO มากมายในโค้ดนี้ รหัส ขั้นตอนที่หนึ่ง:
สร้างตัวแปรท้องถิ่นเพื่อจัดเก็บค่าแอตทริบิวต์
เพิ่มตัวแปรท้องถิ่นเหล่านี้ลงใน Type Descriptor ขั้นตอนนี้คือเพื่อให้ Atlas เข้าใจชั้นเรียนของคุณ
เพิ่มตัวเข้าถึง (getters และ setters) ให้กับตัวแปรภายในเครื่อง
ก่อนที่จะเริ่มขั้นตอนที่ 1 ก่อนอื่นเราจะเปลี่ยนเนมสเปซเริ่มต้นในเทมเพลตเป็นสิ่งที่เราต้องการ ที่นี่ฉันใช้ Dflying.Atlas.ControlTookit.ValidateUserName และอัปเดตชื่อคลาสที่เกี่ยวข้องทั้งหมดที่ปรากฏในโค้ด
จากนั้นสำหรับขั้นตอนที่ 1 และขั้นตอนที่ 3 เราจะทำร่วมกัน โปรดดูที่ ValidateUserNameBehavior.js ใน Behavior แบบกำหนดเองที่ใช้ ASP.NET Atlas เพื่อพัฒนาการตรวจสอบแบบเรียลไทม์ว่าชื่อผู้ใช้ได้รับการลงทะเบียนหรือไม่ ควรเพิ่มแอตทริบิวต์ InvalidMessage ในที่นี้ฉันยกตัวอย่างเท่านั้น:
var _MethodName;
this.get_MethodName = function() {
กลับ _MethodName;
-
this.set_MethodName = ฟังก์ชั่น (ค่า) {
ถ้า (_MethodName != ค่า) {
_MethodName = ค่า;
this.raisePropertyChanged('ชื่อวิธีการ');
-
-
จากนั้นขั้นตอนที่ 2: this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(นี่คือ 'getDescriptor');
td.addProperty('CheckResultLabelID', สตริง);
td.addProperty('ชื่อบริการ', สตริง);
td.addProperty('MethodName', สตริง);
td.addProperty('ValidMessage', สตริง);
td.addProperty('ข้อความไม่ถูกต้อง', สตริง);
กลับ td;
-
สุดท้ายนี้ยังมีฟังก์ชันตัวสร้างและการวิเคราะห์ ซึ่งปรากฏใน TODO ด้วย:
this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'เริ่มต้น');
_blurHandler = Function.createDelegate(นี่, blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}
this.dispose = ฟังก์ชั่น() {
ถ้า (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = โมฆะ;
-
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'ทิ้ง');
-
รวมถึงตัวจัดการที่เรียกใช้บริการเว็บและการโทรกลับที่เกี่ยวข้อง:
this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'เริ่มต้น');
_blurHandler = Function.createDelegate(นี่, blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}
this.dispose = ฟังก์ชั่น() {
ถ้า (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = โมฆะ;
-
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'ทิ้ง');
-
นอกจากนี้ยังมีส่วนหนึ่งของโค้ดที่สร้างโดยอัตโนมัติโดยเทมเพลต ซึ่งใช้เพื่อเชื่อมต่อการโต้ตอบสถานะระหว่างเซิร์ฟเวอร์และไคลเอนต์ ในตัวอย่างนี้ เราไม่จำเป็นต้องใช้มัน แน่นอนว่าไม่มีอันตรายใด ๆ ในการรักษา:
this.getClientState = ฟังก์ชั่น () {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(นี่, 'get_ClientState');
ถ้า (ค่า == '') ค่า = null;
ค่าส่งคืน;
-
this.setClientState = ฟังก์ชั่น (ค่า) {
กลับ Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'set_ClientState', [ค่า]);
-
สิ่งสุดท้ายที่ควรทราบคือบรรทัดสุดท้ายของ JavaScript นี้:
Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
ในบรรดาสิ่งเหล่านี้ dflying แสดงถึงคำนำหน้าของการประกาศการควบคุมไคลเอนต์ที่สร้างโดย Extender ของเรา และ ValidateUserNameBehavior แสดงถึงชื่อแท็กของการควบคุมไคลเอนต์ ควรเลือกและจดจำทั้งสองชื่อนี้ และพวกเขาจะใช้ในไฟล์ CS ต่อไปนี้ด้วย
ด้วยวิธีนี้ ซอร์สโค้ด ValidateUserNameBehavior.js ที่สมบูรณ์จะเป็นดังนี้:
ValidateUserNameBehavior.js
// (c) ลิขสิทธิ์ Microsoft Corporation
// แหล่งข้อมูลนี้อยู่ภายใต้ Microsoft Permissive License
// ดูhttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx
// สงวนลิขสิทธิ์อื่นๆ ทั้งหมด
Type.registerNamespace('Dflying.Atlas.ControlTookit.ValidateUserName');
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.initializeBase(นี้);
var _blurHandler;
var _CheckResultLabelID;
var _checkResultLabel;
var_ServiceName;
var_MethodName;
var _ValidMessage = "คุณสามารถใช้ชื่อผู้ใช้นี้ได้";
var _InvalidMessage = "ชื่อผู้ใช้นี้ถูกใช้ไปแล้ว โปรดเลือกชื่ออื่น";
this.get_CheckResultLabelID = ฟังก์ชั่น () {
กลับ _CheckResultLabelID;
-
this.set_CheckResultLabelID = ฟังก์ชั่น (ค่า) {
ถ้า (_CheckResultLabelID != ค่า) {
_checkResultLabel = $(มูลค่า);
debug.assert(_checkResultLabel != null, "CheckResultLabelID ต้องถูกตั้งค่าเป็นองค์ประกอบ DOM ที่ถูกต้อง");
_CheckResultLabelID = ค่า;
this.raisePropertyChanged('CheckResultLabelID');
-
-
this.get_ServiceName = ฟังก์ชั่น () {
กลับ _ServiceName;
-
this.set_ServiceName = ฟังก์ชั่น (ค่า) {
ถ้า (_ServiceName != ค่า) {
_ServiceName = ค่า;
this.raisePropertyChanged('ชื่อบริการ');
-
-
นี้.get_MethodName = ฟังก์ชั่น() {
กลับ _MethodName;
-
this.set_MethodName = ฟังก์ชั่น (ค่า) {
ถ้า (_MethodName != ค่า) {
_MethodName = ค่า;
this.raisePropertyChanged('ชื่อวิธีการ');
-
-
this.get_ValidMessage = ฟังก์ชั่น () {
กลับ _ValidMessage;
-
this.set_ValidMessage = ฟังก์ชั่น (ค่า) {
ถ้า (_ValidMessage != ค่า) {
_ValidMessage = ค่า;
this.raisePropertyChanged('ValidMessage');
-
-
this.get_InvalidMessage = ฟังก์ชั่น () {
กลับ _InvalidMessage;
-
this.set_InvalidMessage = ฟังก์ชั่น (ค่า) {
ถ้า (_InvalidMessage != ค่า) {
_InvalidMessage = ค่า;
this.raisePropertyChanged('ข้อความไม่ถูกต้อง');
-
-
นี้.เริ่มต้น = ฟังก์ชั่น() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'เริ่มต้น');
_blurHandler = Function.createDelegate(นี่, blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
-
this.dispose = ฟังก์ชั่น () {
ถ้า (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = โมฆะ;
-
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'ทิ้ง');
-
this.getDescriptor = ฟังก์ชั่น () {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(นี่คือ 'getDescriptor');
td.addProperty('CheckResultLabelID', สตริง);
td.addProperty('ชื่อบริการ', สตริง);
td.addProperty('MethodName', สตริง);
td.addProperty('ValidMessage', สตริง);
td.addProperty('ข้อความไม่ถูกต้อง', สตริง);
กลับ td;
-
ฟังก์ชั่น blurHandler() {
ถ้า (this.control.element.value == '') {
_checkResultLabel.innerHTML = '';
กลับ;
-
Sys.Net.ServiceMethod. เรียกใช้ (
_ชื่อบริการ
_ชื่อวิธีการ
-
{ userNameCandidate : this.control.element.value},
_onMethod เสร็จสมบูรณ์
-
-
ฟังก์ชั่น _onMethodComplete (ผลลัพธ์)
-
_checkResultLabel.innerHTML = ผลลัพธ์ ? _ValidMessage : _InvalidMessage;
-
this.getClientState = ฟังก์ชั่น () {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(นี่, 'get_ClientState');
ถ้า (ค่า == '') ค่า = null;
ค่าส่งคืน;
-
this.setClientState = ฟังก์ชั่น (ค่า) {
กลับ Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod (นี่คือ 'set_ClientState', [ค่า]);
-
}
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.registerSealedClass('Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior', Microsoft.AtlasControlExtender.BehaviorBase);
Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
ณ จุดนี้ ส่วนของไคลเอ็นต์ได้เสร็จสมบูรณ์แล้ว ตามด้วยฝั่งเซิร์ฟเวอร์ ซึ่งเป็นการเตรียมการ CS ที่เหลืออีกสามรายการ ไฟล์.