تطوير التحكم في الموسع من جانب الخادم ASP.NET Atlas - كتابة السلوك من جانب العميل

المؤلف: Dflying Chen ( http://dflying.cnblogs.com/ )
بعد فهم المفاهيم الأساسية واستكمال المتطلبات الأساسية (يرجى الرجوع إلى: تطوير عنصر تحكم موسع جانب خادم ASP.NET Atlas - المفاهيم الأساسية والمتطلبات الأساسية)، يمكننا البدء في تطوير ValidateUserNameExtender.

أولاً، قم بإنشاء مشروع تحكم Atlas جديد في Visual Studio وقم بتسميته ValidateUserName. بعد الإنشاء، يجب أن يبدو الحل كما في الصورة التالية:

كما ترون، تتم الإشارة تلقائيًا إلى التجميع التالي لنا في قالب المشروع:

Microsoft.Web.Atlas.dll، وهو التجميع الأساسي لـ Atlas وسيتم استخدامه بواسطة Microsoft.AtlasControlExtender.dll التالي.
Microsoft.AtlasControlExtender.dll، هذا هو التجميع الذي توجد فيه الفئة الأساسية للموسع في Atlas الذي توفره Microsoft. ترث العديد من الفئات الضرورية في الموسع المخصص لدينا من الفئة الأساسية المتوفرة في هذا التجميع.
في الوقت نفسه، أنشأ قالب المشروع هذا أيضًا ملف JavaScript وثلاثة ملفات C# لنا:

ValidateUserNameBehavior.js، وهو الجزء الأساسي من الموسع الخاص بنا وهو أيضًا الملف الذي يستوعب جميع البرامج النصية من جانب العميل والمحتوى بشكل أساسي كما هو الحال مع استخدام ASP.NET Atlas، يقوم بتطوير محتوى ملف ValidateUserNameBehavior.js في السلوك المخصص للتحقق في الوقت الفعلي مما إذا كان اسم المستخدم مسجلاً، والذي سيتم تحليله بالتفصيل لاحقًا. يعد Atlas' Extender في الواقع تغليفًا لهذا السلوك من جانب العميل، مما يجعله تحكمًا من جانب الخادم لتبسيط عمل مطوري برامج مواقع الويب عند استخدامه. كمطور تحكم، فإنه يضيف الكثير من العمل.
ValidateUserNameDesigner.cs، يُستخدم هنا لكتابة التعليمات البرمجية التي توفر دعم وقت التصميم في Visual Studio.
ValidateUserNameExtender.cs، يُستخدم هنا لتعريف الموسع الخاص بنا.
يتم استخدام ValidateUserNameProperties.cs لتحديد الخصائص المستخدمة في الموسع الخاص بنا وسيتم تعيين قيم هذه الخصائص لخصائص سلوك العميل.
لنبدأ بملف ValidateUserNameBehavior.js JavaScript. افتح ملف ValidateUserNameBehavior.js، وسنجد أن القالب قد أضاف لنا 77 سطرًا من التعليمات البرمجية، وهناك العديد من المهام في التعليمات البرمجية، وهناك 3 أخرى في قسم "اقرأني". الكود الخطوة الأولى:

إنشاء متغيرات محلية لتخزين قيم السمات.
أضف هذه المتغيرات المحلية إلى واصف النوع. تهدف هذه الخطوة إلى السماح لـ Atlas بفهم صفك.
إضافة أدوات الوصول (الحروف والمحددات) إلى المتغيرات المحلية.
قبل البدء في الخطوة 1، نقوم أولاً بتغيير مساحة الاسم الافتراضية في القالب إلى ما نحتاج إليه. هنا أستخدم Dflying.Atlas.ControlTookit.ValidateUserName، وقم بتحديث جميع أسماء الفئات ذات الصلة التي تظهر في الكود.

ثم بالنسبة للخطوة 1 والخطوة 3، نقوم بذلك معًا بالرجوع إلى ValidateUserNameBehavior.js في السلوك المخصص الذي يستخدم ASP.NET Atlas لتطوير التحقق في الوقت الحقيقي مما إذا كان اسم المستخدم مسجلاً أم لا، واسم الخدمة، واسم الطريقة، وValidMessage يجب إضافة سمات InvalidMessage، هنا سأعطي مثالاً فقط:

var _MethodName;

this.get_MethodName = function() {
إرجاع _MethodName؛
}
this.set_MethodName = الوظيفة(القيمة) {
إذا (_MethodName != القيمة) {
_MethodName = value;
this.raisePropertyChanged('MethodName');
}
}

ثم الخطوة 2: this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('ServiceName', String);
td.addProperty('MethodName', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

عودة الدفتيريا؛
}
أخيرًا، هناك دالة البناء والتحليل، والتي تظهر أيضًا في TODO:

this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'initialize');

_blurHandler = Function.createDelegate(this,blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}

هذا.التخلص = الوظيفة() {

إذا (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = null;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
بالإضافة إلى المعالج الذي يستدعي خدمة الويب وCallBack المقابلة:

this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'initialize');

_blurHandler = Function.createDelegate(this,blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}

هذا.التخلص = الوظيفة() {

إذا (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = null;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}
هناك أيضًا جزء من التعليمات البرمجية يتم إنشاؤه تلقائيًا بواسطة القالب، والذي يستخدم لربط تفاعل الحالة بين الخادم والعميل، وفي هذا المثال لا نحتاج إلى استخدامه بالطبع، ولا ضرر من الاحتفاظ به:

this.getClientState = function() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
إذا (القيمة == '') value = null;
قيمة الإرجاع؛
}

this.setClientState = function(value) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
آخر شيء يجب ملاحظته هو السطر الأخير من JavaScript:

Sys.TypeDescriptor.addType('dflying', 'ValidateUserNameBehavior', Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior);
من بينها، يمثل dflying بادئة إعلان التحكم في العميل الذي تم إنشاؤه بواسطة الموسع الخاص بنا، ويمثل ValidateUserNameBehavior اسم العلامة لعنصر تحكم العميل، ويجب اختيار هذين الاسمين وتذكرهما، وسيتم استخدامهما أيضًا في ملفات CS التالية.

بهذه الطريقة، يكون الكود المصدري الكامل لـ ValidateUserNameBehavior.js كما يلي:

ValidateUserNameBehavior.js
// (ج) حقوق الطبع والنشر لشركة Microsoft.
// يخضع هذا المصدر لترخيص Microsoft المسموح به.
// راجعhttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx .
// جميع الحقوق الأخرى محفوظة.

Type.registerNamespace('Dflying.Atlas.ControlTookit.ValidateUserName')

;
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.initializeBase(this);

var _blurHandler;

var _CheckResultLabelID;
var _checkResultLabel;
var_ServiceName;
var_MethodName;
var _ValidMessage = "يمكنك استخدام اسم المستخدم هذا.";
var _InvalidMessage = "تم استخدام اسم المستخدم هذا بالفعل، يرجى اختيار اسم آخر.";

this.get_CheckResultLabelID = function() {
إرجاع _CheckResultLabelID؛
}
this.set_CheckResultLabelID = الوظيفة(القيمة) {
إذا (_CheckResultLabelID != القيمة) {
_checkResultLabel = $(value);
debug.assert(_checkResultLabel != null, "يجب تعيين CheckResultLabelID على عنصر DOM صالح.");
_CheckResultLabelID = value;
this.raisePropertyChanged('CheckResultLabelID');
}
}
this.get_ServiceName = function() {
إرجاع _ServiceName؛
}
this.set_ServiceName = الوظيفة(القيمة) {
إذا (_اسم الخدمة! = القيمة) {
_اسم الخدمة = القيمة؛
this.raisePropertyChanged('ServiceName');
}
}
this.get_MethodName = function() {
إرجاع _MethodName؛
}
this.set_MethodName = الوظيفة(القيمة) {
إذا (_MethodName != القيمة) {
_MethodName = value;
this.raisePropertyChanged('MethodName');
}
}
this.get_ValidMessage = function() {
إرجاع _ValidMessage؛
}
this.set_ValidMessage = الوظيفة(القيمة) {
إذا (_ValidMessage != القيمة) {
_ValidMessage = value;
this.raisePropertyChanged('ValidMessage');
}
}
this.get_InvalidMessage = function() {
إرجاع _InvalidMessage؛
}
this.set_InvalidMessage = الوظيفة(القيمة) {
إذا (_InvalidMessage != القيمة) {
_InvalidMessage = value;
this.raisePropertyChanged('InvalidMessage');
}
}

this.initialize = function() {
Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'initialize');

_blurHandler = Function.createDelegate(this,blurHandler);
this.control.element.attachEvent('onblur', _blurHandler);
}

هذا.التخلص = وظيفة () {

إذا (_blurHandler) {
this.control.element.detachEvent('onblur', _blurHandler);
_blurHandler = null;
}

Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'dispose');
}

this.getDescriptor = function() {
var td = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'getDescriptor');

td.addProperty('CheckResultLabelID', String);
td.addProperty('ServiceName', String);
td.addProperty('MethodName', String);
td.addProperty('ValidMessage', String);
td.addProperty('InvalidMessage', String);

عودة الدفتيريا؛
}

وظيفة طمس هاندلر () {
إذا (this.control.element.value == '') {
_checkResultLabel.innerHTML = '';
يعود؛
}

Sys.Net.ServiceMethod.invoc(
_اسم الخدمة،
_اسم الأسلوب،
''،
{ اسم المستخدم: this.control.element.value}،
_onMethodComplete
);
}

الدالة _onMethodComplete (النتيجة)
{
_checkResultLabel.innerHTML = النتيجة ? _ValidMessage : _InvalidMessage;
}

this.getClientState = function() {
var value = Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'get_ClientState');
إذا (القيمة == '') value = null;
قيمة الإرجاع؛
}

this.setClientState = function(value) {
return Dflying.Atlas.ControlTookit.ValidateUserName.ValidateUserNameBehavior.callBaseMethod(this, 'set_ClientState',[value]);
}
}

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 ملفات.