Share via

الإرشادات التفصيلية: إنشاء موقع ويب Ajax

  • Article

الإرشادات التفصيلية: إنشاء موقع ويب Ajax

<هذه مقاطع من مواضيع أعجبتني من مكتبة تعليمات فيجوال ستوديو 2010, أرجو أن تنال إعجابكم. المقالة الأساسية موجودة هنا>

 

هذه الإرشادات التفصيلية بإنشاء موقع ويب ASP.NET أساسية مع صفحة ويب يوضح بعض ميزات مكتبة AJAX ASP.NET المضمنة في Visual Studio سيتم إنشاء تطبيق عرض صفحات ببيانات الموظفين من قاعدة بيانات نموذج AdventureWorks. يستخدم التطبيقUpdatePanel تحكم لتحديث جزء فقط من الصفحة التي تم تغييرها، بدون فلاش الصفحة التي تحدث مع إعادة النشر. ويشار إلى ذلك باسم تحديث الصفحةجزئياً. يستخدم التطبيق عينة أيضاً UpdateProgress عنصر تحكم لعرض رسالة حالة أثناء معالجة تحديث الصفحة جزئياً.

المتطلبات الأساسية

لتنفيذ الإجراءات في بيئة التطوير الخاصة بك التي تحتاجها:

  • Microsoft Visual Studio 2005 أو Microsoft Visual Web Developer Express.
  • قاعدة بيانات نموذج AdventureWorks. يمكن تحميل قاعدة بيانات AdventureWorks وتثبيتها من مركز التنزيل لـ Microsoft.

إنشاء موقع ويب

إذا كنت قد قمت بالفعل بإنشاء موقع ويب في Visual Web Developer (على سبيل المثال، وذلك باتباع الخطوات المذكورة في الإرشادات التفصيلية: إنشاء صفحة ويب أساسية في ‏‫Visual Web Developer) ، يمكنك استخدام هذا الموقع ثم انتقل إلى الجزء التالي إنشاء صفحة رئيسية. وإلا، إنشاء موقع ويب جديد أو صفحة باتباع الخطوات التالية.

لإنشاء موقع ويب نظام الملفات

  1. فتحVisual Web Developer
  2. من قائمة Fileاختر New Web Site

يظهر مربع الحوار New Website  

  1. ضمنتثبيت Visual Studio القوالب, click موقع ويب ASP.NET.
  2. في Location، أدخل اسم المجلد حيث تريد الحفاظ على صفحات موقع ويب الخاص بك.

على سبيل المثال، اكتب اسم المجلد C:\WebSites.

  1. في Language ، انقر فوق لغة البرمجة التي كنت تفضل العمل.
  2. انقر فوق Ok

Visual Web Developer إنشاء صفحة جديدة باسم Default.aspx

إضافة عنصر تحكم UpdatePanel بصفحة ويب ASP.NET

بعد إنشاء موقع ويب إنشاء صفحة ويب ASP.NET اتصال يتضمن UpdatePanel عنصر التحكم. قبل إضافة UpdatePanel التحكم إلى الصفحة, يجب عليك إضافة ScriptManager عنصر التحكم. The UpdatePanel عنصر تحكم يستند ScriptManager تحكم لإدارة التحديثات الصفحة جزئياً.

لإنشاء صفحة ويب ASP.NET الجديدة

  1. في "Solution explorer" انقر بزر الماوس الأيمن فوق اسم الموقع ومن ثم انقر فوق Add new item.

يتم عرض مربع الحوار Add New Item

  1. ضمنVisual Studio installed templates, اختر WebForm
  2. اسم صفحة جديدة Employees.aspx وامسح Place code in separate file خانة الاختيار.
  3. حدد اللغة التي تريد استخدامها.
  4. انقر فوق Add.
  5. التبديل إلى طريقة العرض "تصميم".
  6. في AJAX Extensions انقر نقراً مزدوجاً فوق علامة التبويب الأدوات، ScriptManager تحكم لإضافته إلى الصفحة.

  1. اسحبUpdatePanel التحكم في مربع الأدوات وأسقطه أسفل ScriptManager عنصر التحكم.

إضافة محتوى إلى عنصر تحكم UpdatePanel

The UpdatePanel عنصر تحكم يقوم بإجراء تحديثات صفحات الجزئي ويعرّف المحتوى الذي يتم تحديثه بشكل مستقل عن باقي الصفحة. في هذا الجزء من الإرشادات التفصيلية تتم إضافة عنصر تحكم ربط البيانات التي تعرض البيانات من قاعدة بيانات AdventureWorks.

لإضافة محتوى إلى عنصر تحكم UpdatePanel

  1. من Data اسحب علامة تبويب الأدوات، GridView التحكم في منطقة قابلة للتحرير UpdatePanel عنصر التحكم.
  2. في GridView Tasks القائمة انقر فوق Auto Format  
  3. في Auto Format لوحة ضمن Select a scheme , Colorful ثم انقر فوقOK.
  4. في GridView Tasks القائمة حدد <New data source> من قائمة Choose Data Source .

يتم عرض معالج Data Source Configuration

  1. ضمنWhere will the application get data from, اختر Database ثم انقر فوق OK
  2. في Configure Data Source معالج Choose Your Data Connection الخطوة، بتكوين اتصال بقاعدة بيانات AdventureWorks ثم انقر فوق Next 
  3. للحصول على Configure the Select Statement الخطوة Specify a custom SQL statement or stored procedure ثم انقر فوقNext.
  4. في SELECT التبويب Define Custom Statement or Stored Procedures الخطوة قم بإدخال عبارة SQL التالية:

SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

  1. انقر فوق Next.
  2. انقر فوق Finish.
  3. في GridView Tasks لقائمة حددخانة الاختيار Enable paging
  4. حفظ التغييرات ومن ثم اضغط CTRL + F5 لعرض الصفحة في مستعرض.

لاحظ وجود لا وميض على الصفحة عند تحديد صفحات مختلفة من البيانات. وهذا لأن الصفحة لا تنفيذ إلى إعادة النشر ويتم تحديث الصفحة بالكامل في كل مرة.

إضافة عنصر تحكم UpdateProgress إلى صفحة

The UpdateProgress يعرض عنصر التحكم رسالة حالة أثناء محتوى جديد UpdatePanel يتم الآن طلب التحكم.

لإضافة عنصر تحكم UpdateProgress إلى الصفحة

  1. من ملحقات AJAX اسحب علامة تبويب الأدوات، UpdateProgress التحكم إلى الصفحة وقم بإفلاته أسفل UpdatePanel عنصر التحكم.
  2. حددUpdateProgress التحكم في ثم في الإطار "خصائص" بتعيين AssociatedUpdatePanelID خاصية UpdatePanel1.

وهذا يقوم بربط UpdateProgress التحكم مع UpdatePanel عنصر التحكم الذي قمت بإضافته سابقاً.

  1. في المنطقة القابلة للتحرير UpdateProgress عنصر تحكم نوع الحصول على الموظفين ... .
  2. حفظ التغييرات ومن ثم اضغط CTRL + F5 لعرض الصفحة في مستعرض.

إذا كان هناك أي تأخير بينما يتم تشغيل استعلام SQL الصفحة كما تقوم بإرجاع البيانات UpdateProgress يعرض الرسالة التي قمت بإدخالها في عنصر التحكم UpdateProgress عنصر التحكم.

إضافة تأخير إلى تطبيق نموذج

إذا كان التطبيق الخاص بك يقوم بتحديث كل صفحة من البيانات بسرعة, قد لا تشاهد المحتوى UpdateProgress التحكم في الصفحة. The UpdateProgress يعتمد التحكم DisplayAfter يتم عرض الخصائص التي تتيح لك تعيين مهلة قبل عنصر التحكم. يؤدي ذلك إلى منع عنصر التحكم يومض في المستعرض في حالة حدوث التحديث لف سريع جداً. بشكل افتراضي، يتم تعيين التأخير إلى 500 ميلي ثانية (.5 ثانية) ، مما يعني التي UpdateProgress لن يتم عرض عنصر التحكم إذا كان التحديث وقتًا أقل من نصف ثانية.

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

لإضافة تأخير التطبيق عينة

  1. داخلUpdatePanel عنصر تحكم حدد GridView عنصر التحكم.
  2. في الإطار "خصائص" ، انقر فوق الزر. Update  
  3. انقر نقراً مزدوجاً فوق PageIndexChanged حدث إنشاء معالج أحداث.
  4. قم بإضافة التعليمة البرمجية التالية إلى PageIndexChanged لإنشاء تأخير الثانية ثلاثة artificially معالج الأحداث:

Visual Basic

 

//Include three second delay for example only.

System.Threading.Thread.Sleep(3000);

ملاحظة

معالج الخاص PageIndexChanged يقدم الحدث عن قصد تأخير هذه الإرشادات التفصيلية. في التدريب العملي عدم تقديم تأخير. بدلاً من ذلك، ستكون التأخير الناتج من حركة مرور الملقم أو رمز الخادم وقتاً طويلاً معالجة مثل استعلام قاعدة بيانات تشغيلها لفترة طويلة.
  1. حفظ التغييرات ومن ثم اضغط CTRL + F5 لعرض الصفحة في مستعرض.

بسبب وجود الآن تأخير الثانية ثلاثة كل مرة يتم فيها الانتقال إلى صفحة جديدة من البيانات, ستكون قادراً على مشاهدة UpdateProgress عنصر التحكم.

Comments

  • Anonymous
    July 27, 2015
    مقال رائع جدا عن تصميم وتطوير المواقع