DotVVM - التواصل بين العميل والخادم

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

هذه المقالة مخصصة لهذه المشكلة بالإضافة إلى تحسين حركة المرور.

ستفحص هذه المقالة بمزيد من التفصيل الاتصال بين العميل والخادم.
يمكنك أخذ مثال من مقال سابق مع قائمة المهام. في الطلب المكتوب هناك ، كان من الممكن إضافة حالات جديدة ووضع علامة عليها على أنها تمت.

التواصل

عند طلب الصفحة ، يتم تحليل عنوان URL ويبحث DotVVM عنها في DotVVMStartup.cs ، حيث يوجد في جدول التوجيه مسار إلى ملف .dothtml ، حيث يوجد ، بدوره ، توجيه إلى ViewModel.

يتم إجراء تسلسل في ViewModel في json وهذا يفرض قواعد معينة على ViewModel. جميع الأساليب العامة والممتلكات العامة (سلسلة ، إرشادات ، منطقية ، int ، أنواع رقمية أخرى ، DateTime ، مجموعات (صفيف ، قائمة) تقع في json. في حالة List ، يمكن أن تكون مجموعة من نفس الأنواع البسيطة ، أو الكائنات التي تستخدمها هذه الأنواع .

عند العمل مع DotVVM في المشاريع الحقيقية ، تم الكشف عن عدة قواعد لهندسة ViewModel ، والتي نحاول الالتزام بها.

• لا تستخدم Entity Framework DbContext مباشرة في ViewModel
• لا تُظهر الكيانات النظيفة في طريقة العرض ، ولكن استخدم DTO (كائنات نقل البيانات)
• لمزيد من التحكم في ViewModel ، يجب أن ترث DotvvmViewModelBase

لنفترض أن ViewModel تم تجميعه بنجاح في json ، فقد تم إنشاء جميع روابط الواجهة الأمامية في View وتحميل الصفحة. بدلاً من ذلك ، تم تمرير الأساليب الموروثة من DotvvmViewModelBase: Init () و Load () و PreRender (). عند تحميل الصفحة لأول مرة ، قد يكون تجاوز هذه الوظائف مفيدًا ، ولكن أولاً وقبل كل شيء.



أضف حالة جديدة مع قائمة.

1. يتم إرسال AJAX POST إلى الخادم من json الخاص بـ ViewModel المعدل
2. يتم إلغاء تحميل نفس ViewModel في ذاكرة الخادم ، ولكن دون تغيير
3. بواسطة Init ()
4. تتم مقارنة خادم ViewModel الذي لم يتغير مع ما جاء من العميل
5. إنتاج Load ()
6. يتم تنفيذ الطريقة نفسها.
7. بواسطة PreRender ()
8. بعد المقارنة ، يتم إرسال التغييرات إلى العميل.

عندما يرث ViewModel DotvvmViewModelBase ، يمكنك الوصول إلى Init () و Load () و PreRender (). جميع الطرق الثلاثة مجردة ويمكن توسيعها وتعديلها.

أيضا ، في DotvvmViewModelBase هناك خاصية سياق سياق الطلب ، من حيث يوجد الوصول إلى كائن الطلب ، إلى خاصية IsPostBack ، إلى معلمات URL ، وأكثر من ذلك بكثير .

عند الإرسال مع كل عملية إعادة نشر ، فإن ViewModel ليس فعالًا للغاية. من أجل تقليل كمية البيانات المرسلة بطريقة أو بأخرى ، يوجد في DotVVM عدة طرق.

السمة ربط

تتيح لك السمة Bind إخبار المترجم بكيفية التعامل مع الخصائص في ViewModel.

• [Bind (Direction.Both)] - الإعداد الافتراضي. يتم إرسال البيانات في كل طلب.
• [Bind (Direction.None)] - يتم استخدامه بشكل أساسي للخدمات والواجهات التي لا تخضع لعملية تسلسل ، ولكن يتم استخدامها في ViewModel لتحميل هذا أو حفظه.
• [Bind (Direction.ServerToClient)] - يتم إرسال البيانات في اتجاه واحد فقط ، من الخادم إلى العميل. هذا يعني فقط عند تحميل الصفحة ، ولكن ليس مع إعادة النشر.
• [Bind (Direction.ServerToClientFirstRequest)] - مثالي للبيانات الثابتة. على سبيل المثال خيارات في مربع التحرير والسرد
• [Bind (Direction.ClientToServer)] - يتم إرسال البيانات في اتجاه واحد فقط ، مع إعادة النشر ، من العميل إلى الخادم.

أوامر ثابتة

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

في مثالنا ، يوجد مكان يمكنك فيه تطبيق أوامر ثابتة. عندما نضع علامة على الحالة على أنها منتهية. ليس من الضروري إرسال ViewModel بالكامل إلى الخادم.
يمكنك إعادة كتابة طريقة MarkAsDone (عنصر ToDoItem) إلى الطريقة الثابتة عن طريق نقلها إلى فئة ثابتة منفصلة وإضافة السمة [AllowStaticCommand] إلى الطريقة.

namespace FirstDotvvmApp { public static class ToDoItemValidator { [AllowStaticCommand] public static bool IsDone() => true; } } 

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

 @import FirstDotvvmApp 

لن يستخدم الزر الأمر فقط ، ولكن ستاتيكومكوماند.

 <dot:Button Validation.Enabled="false" Visible="{value: !IsDone}" Text="Mark as done" Click="{staticCommand: IsDone = ToDoItemValidator.IsDone()}"> </dot:Button> 

للمقارنة ، يمكنك رؤية مقدار حركة المرور التي قمنا بحفظها.



عادة ، يتم استخدام مزيج من كلا النهجين لتوفير حركة المرور عند التواصل في مشاريع حقيقية.

المراجع

يمكن العثور على مزيد من الأمثلة حول استخدام الميزات الجديدة هنا .

أيضا في الآونة الأخيرة كان هناك تيار (Eng.) على DotVVM 2.0 ، حيث تحدثوا عن الابتكارات الرئيسية والميزات الجديدة.