توسيع التحكم في خريطة HTML باستخدام إطار عمل ASP.NET AJAX

الآن، اكتب طريقة الويب الخاصة بنا:

إليك مقتطف الاقتباس:
[طريقة ويب]
[ScriptMethod(UseHttpGet = false، ResponseFormat = ResponseFormat.Json)]
سلسلة عامة GetAreaInfo (منطقة السلسلة)
{
منطقة العودة؛
}

وفقًا لنصيحة المصادر الموثوقة، ولأسباب أمنية، نستخدم بشكل عام HttpPost (أو HttpGet= false) للوصول إلى أساليب الويب. بعد ذلك، نقوم بتكوين تنسيق البيانات التي تم إرجاعها إلى تنسيق JSON (الوضع الافتراضي هو وضع JSON).

للتبسيط، تقوم طريقة GetAreaInfo هنا بإرجاع نفس قيمة معلمة الإدخال، ولكن في التطوير الفعلي، يجب أن نستبدلها هنا لاسترداد البيانات من قاعدة البيانات.

لقد نجحنا حتى الآن في إنشاء خدمة ويب يتم استدعاؤها من العميل باستخدام AJAX.

ومع ذلك، نحتاج أيضًا إلى إجراء بعض التكوينات المناسبة للتحكم في الخادم ScriptManager في الصفحة، كما هو موضح أدناه:

ما يلي هو جزء مقتبس:
<asp:ScriptManager ID = "ScriptManager1" runat = "الخادم">
<الخدمات>
<asp:servicereference path="~/LocationService.asmx" />
</الخدمات>
</asp:ScriptManager>

هنا أضفنا مرجع خدمة فقط ضمن العقدة، ولكن ما هو دورها؟

من خلال تحليل كود مصدر HTML الذي تم إنشاؤه، سيولد التكوين أعلاه المحتوى التالي:

ما يلي هو جزء مرجعي:

<script src="LocationService .asmx /jsdebug" type="text/javascript"></script>

تشير علامة البرنامج النصي هنا إلى ملف JavaScript LocationService.asmx/jsdebug. في الواقع، هذه فئة وكيل خدمة ويب. من خلال فئة الوكيل هذه يمكننا الاتصال بخدمة الويب من جانب الخادم بشكل غير متزامن من العميل.

الأمر الأكثر إثارة للاهتمام هو أنه إذا قمت ببساطة بنسخ المسار الموضح أعلاه إلى متصفحك، فسوف ترى ملف JavaScript تم إنشاؤه بواسطة بيئة AJAX في وقت التشغيل - وهذا الملف يجعل استدعاءات خدمة البرنامج النصي متاحة. لن نناقش فئة الوكيل بعمق.

بعد ذلك، دعونا نلقي نظرة على كيفية إنشاء فئة عميل مخصصة.

4. إنشاء فئات مخصصة من جانب العميل

نحن نعلم أن أحد "الاختراعات" الرئيسية لإطار عمل ASP.NET AJAX هو أنه يقدم نموذج برمجة JavaScript موجه للكائنات. الآن، بمساعدة أنماط تصميم JavaScript، يمكننا بسهولة إنشاء قوالب أو فئات خاصة بنا، وإضافة مفاهيم الوراثة، وإنشاء واجهات وتعدادات، وما إلى ذلك.

في هذه المقالة، سنقوم بتطوير فئة العميل التي تتضمن جميع الوظائف المطلوبة في هذا المثال.

الآن، انقر بزر الماوس الأيمن على المشروع وأضف ملف JavaScript جديدًا يسمى ImageMap. في هذا الملف، سنحدد مساحة اسم جديدة MyServices؛ وستحتوي مساحة الاسم هذه على فئات العميل التي سنقوم بتطويرها. كما هو موضح أدناه:

ما يلي هو جزء من الاقتباس:
Type.registerNamespace("MyServices");

بعد ذلك، نحدد مُنشئ فئة العميل التي نريد إنشاءها:

إليك المقتطف المرجعي:

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

لا يعد مُنشئ القالب أو الفئة أكثر من وظيفة JavaScript عادية. يحتوي هذا المُنشئ على معلمتين: uiElement وuiBody.

سيتم استخدام كلا المعلمتين لوصف النافذة المنبثقة المعروضة على الصفحة. يتم استخدام المتغيرين الخاصين الآخرين _xAxis و_yAxis لوصف موضع عرض النافذة المنبثقة. عادةً، من الأفضل الإعلان عن جميع الأعضاء الخاصين في المُنشئ.

بعد ذلك، سوف نستخدم نموذج تصميم النموذج الأولي لكتابة وظائف وخصائص الأعضاء في هذه الفئة:

إليك الجزء المرجعي:

MyServices.Location.prototype =
{
get_uiElement: الوظيفة ()
{
إرجاع this._uiElement;
},
set_uiElement: الوظيفة (القيمة)
{
this._uiElement = value;
},
get_uiBody: الوظيفة ()
{
إرجاع this._uiBody;
},
set_uiBody: الوظيفة (القيمة)
{
this._uiBody = value;
},

لاحظ أن تعريف طريقة سمة عنصر واجهة المستخدم هنا يشبه إلى حد كبير نموذج التعريف بلغات مختلفة في .NET.

وظيفة العضو التالية هي محور اهتمامنا، وهي مسؤولة عن استدعاء خدمة الويب عن بعد:

ما يلي هو جزء مرجعي:
ShowPopupinfo: الوظيفة (الحدث، اسم المنطقة)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError، // وظيفة رد الاتصال المسؤولة عن معالجة الأخطاء
this.OnTimeOut); // وظيفة رد الاتصال المسؤولة عن معالجة المهلة
this._xAxis = events.clientX;
this._yAxis = events.clientY;
}

يوضح الكود أعلاه طريقة نموذجية جدًا لاستدعاء خدمة ويب من العميل:

1) النموذج ملائم تمامًا مثل استدعاء طريقة محلية عادية؛

2) تعد وظيفة Function.createDelegate مهمة للغاية في تطوير عميل ASP.NET AJAX عالميًا وظيفة. كان أحد الأغراض الأصلية لإنشاء هذه الوظيفة هو حل مشكلة هذه الكلمة الأساسية. في معالج الأحداث الذي يتم تشغيله بواسطة عنصر DOM، تشير الكلمة الأساسية this دائمًا إلى عنصر DOM بدلاً من الفئة نفسها. ولكن هنا، السبب وراء استخدامنا لهذه الوظيفة هو أن بيئة AJAX تستدعي وظيفة رد الاتصال عند النجاح في نفس مثيل الفئة الذي أدى إلى تشغيل خدمة الويب. يعد هذا أمرًا مهمًا للغاية عندما تحتاج إلى الرجوع إلى خصائص وأساليب فئات العملاء. باختصار، استخدام هذه الوظيفة سيجعل الوصول إلى خصائص وأساليب فئة العميل التي تستدعي خدمة الويب آمنًا ودقيقًا. بخلاف ذلك، فإن مثيل فئة العميل الذي يجري المكالمة غير المتزامنة سيكون خاليًا لأن استجابة خدمة الويب يتم تنفيذها في سياق مختلف - لم يعد هذا السياق مكافئًا للسياق الذي تم فيه إجراء طلب مكالمة الويب غير المتزامن.

3) ومن المثير للاهتمام أن طريقة GetAreaInfo هنا ليست تلك الموجودة في خدمة الويب التي أنشأناها سابقًا، ولكنها تنتمي إلى فئة وكيل خدمة الويب التي تم إنشاؤها في وقت التشغيل - تعمل فئة الوكيل هذه كوكيل عميل للوصول إلى خدمة ASMX Web على جانب الخادم .

في السطرين الأخيرين من التعليمات البرمجية في وظيفة ShowPopupInfo أعلاه، يتم استخدام معلمات الإدخال للحدث لتعيين قيم المتغيرين الخاصين xAxis وyAxis. هدفنا هنا هو عرض النافذة المنبثقة في أقرب مكان ممكن من المكان الذي نقر عليه المستخدم.

ما يلي هو رمز التنفيذ لوظيفة رد الاتصال المقابلة عندما يكون الاستدعاء ناجحًا:

فيما يلي جزء مرجعي:

OnCompleted: function(result, userContext,methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
إذا (uiBody! = فارغة)
{
var textNode = uiBody.firstChild;
إذا (!textNode)
{
textNode = document.createTextNode(result);
uiBody.appendChild(textNode);
}
آخر
{
textNode.nodeValue = result;
}
إذا (uiElement! = فارغ)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

المحتوى بسيط للغاية - اضبط البيانات التي يتم إرجاعها من الخادم على محتوى العرض للنافذة المنبثقة وتأكد من عرض هذه النافذة وفقًا للموقف.

في نهاية إنشاء فئة العميل، علينا أيضًا أن نخبر إطار عمل AJAX بتسجيله من جانب العميل بحيث يمكن الوصول إليه من العميل:

إليك مقتطف الاقتباس:
MyServices.Location.registerClass("MyServices.Location");

عند هذه النقطة، تم إنشاء فئة العميل MyServices.Location بنجاح. لذا، كيفية استخدامه

أولاً، نحتاج إلى تحديد مثيل جديد لفئة العميل عند تحميل الصفحة. للقيام بذلك، نحتاج إلى البرمجة في وظيفة pageLoad:

إليك مقتطف الاقتباس:
موقع فار = فارغ؛
وظيفة تحميل الصفحة (المرسل، الحجج) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

يقوم الكود أعلاه ببساطة بإنشاء مثيل جديد لفئة MyServices.Location. ثم قم باستدعاء إحدى وظائف الأعضاء في فئة العميل لإخفاء النافذة المنبثقة في الصفحة. لماذا نقوم بإنشاء مثيل لفئة العميل في وظيفة pageLoad؟ والسبب هو أنه عندما يصل تدفق التحكم في بيئة AJAX إلى وظيفة pageLoad، يتم تحميل جميع عملاء AJAX ورمز JavaScript المحدد بنجاح. لذلك، يمكننا في هذه اللحظة الوصول بأمان إلى أي كود جافا سكريبت محدد بواسطة المستخدم أو النظام.

العديد من وظائف الأداة الأخرى بسيطة نسبيًا ولن يتم وصفها بالتفصيل هنا.

5. الملخص

في هذه المقالة، أوضحت لك كيفية توسيع التحكم في خريطة HTML عن طريق إنشاء خدمة AJAX وإنشاء فئة العميل المخصصة الخاصة بك. في عنصر التحكم الموسع، عند النقر فوق منطقة معينة في الصورة، يمكننا تقديم معلومات تفصيلية ذات صلة من خلال طريقة AJAX جديدة دون الحاجة إلى تحديث صفحة الويب بأكملها. على الرغم من أننا نادرًا ما نستخدم عنصر تحكم الخريطة هذا في معظم تطبيقات الويب (ربما يتم حذفه من شريط أدوات VS2005 لهذا السبب)، إلا أنه إذا قمنا بتطوير تطبيقات ويب تتعلق بعدد كبير من الصور والصور وعمليات الخرائط، فإن الخريطة بعد تحويل AJAX استنادًا إلى هذه المقالة، ستجعل عناصر التحكم بالتأكيد تطبيق الويب الخاص بك أكثر سخونة.

[مرفق] بيئة تصحيح أخطاء التعليمات البرمجية المصدر في هذه المقالة: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.