2. استخدم مكون ASP.NET DataGrid لعرض البيانات
مقدمة المحتوى ذات الصلة:
يأتي ASP.NET مزودًا بالعديد من مكونات الويب لتسريع عملية تحرير صفحات الويب. دعونا نستخدم مثال البرنامج التعليمي العالمي الذي يأتي مع Dreamwaver MX، لتوضيح كيفية استخدام هذا المكون لعرض البيانات في قاعدة البيانات.
1. ربط قاعدة البيانات وعرض البيانات باستخدام DataGrid
توجد قاعدة البيانات global.mdb لهذا المثيل في الأصول الموجودة في دليل صفحة الويب. هدفنا هو إخراج بيانات المناطق المختلفة بناءً على قيمة Region_id في جدول الموقع في قاعدة البيانات هذه. (يمكنك استخدام Access لفتح قاعدة البيانات هذه)
يمكننا إعادة تسمية الملف location3.htm إلى location3.aspx (لاحقة ملف نافذة الويب الخاص بـ ASP.NET هي aspx) ثم تحريره.
[الشكل 2-1 الصفحات التي تحتاج إلى تغيير]
دعونا نحذف الجزء الثابت البسيط في المنتصف ونستخدم DataGrid الخاص بـ ASP.NET لتنفيذ وظائفه.
[الشكل 2-2 حذف الجزء الثابت من الصفحة]
الخطوة التالية هي الارتباط بقاعدة البيانات. انقر فوق لوحة التطبيق على اليمين، وحدد قاعدة البيانات، وانقر فوق علامة +.
حدد اتصال OLE DB.
[الشكل 2-3 لوحة التطبيق]
ثم أدخل مربع الحوار اتصال OLE DB. هنا يمكنك كتابة رمز قاعدة بيانات الارتباط بخط اليد، أو إنشاء الرمز تلقائيًا. قم بتسمية موقع اسم الاتصال، وانقر فوق "إنشاء"، وسيتم إنشاء الرمز تلقائيًا من خلال المعالج.
[الشكل 2-4 مربع حوار اتصال OLE DB]
بعد الدخول إلى صفحة خصائص ارتباط البيانات، حدد الموفر لتعيين محرك قاعدة البيانات.
المذهل أدناه هو أنه يدعم 21 طريقة اتصال بقاعدة البيانات بما في ذلك خادم SQL وOracle وما إلى ذلك.
[الشكل 2-5 الصفحة المقدمة لمحرك قاعدة البيانات]
يعد هذا أحد الأشياء الرائعة في .NET، حيث يدعم قواعد بيانات متعددة. ويستخدم ADO.NET. بعد فترة من الوقت، تتم كتابة سلسلة الاتصال التي قمنا بإنشائها باستخدام هذا المعالج وفقًا لـ ADO.NET.
نظرًا لأن قاعدة البيانات التي سنقوم بالارتباط بها هي قاعدة بيانات Access2000، فإننا نختار Microsoft Jet 4.0 OLE DB Provider ثم انقر فوق Next (التالي).
انقر فوق الزر الموجود بجوار 1. حدد أو أدخل اسم قاعدة البيانات لتحديد قاعدة البيانات التي تريد الارتباط بها.
قم بإلغاء اسم المستخدم وكلمة المرور في 2.أدخل المعلومات لتسجيل الدخول إلى قاعدة البيانات
[رابط الإعداد الشكل 2-6]
قم بتعيين أذونات القراءة في خيارات متقدمة. حدد "قراءة" و"قراءة وكتابة" و"كتابة" ثم انقر فوق "موافق".
[الشكل 2-7 إعدادات الأذونات]
أضف اسم اتصال وانقر فوق اختبار لاختبار ارتباط قاعدة البيانات. إذا كان ارتباط قاعدة البيانات ناجحًا، فانقر فوق موافق. تهانينا،
لقد قمت بربط قاعدة البيانات بموقعك. يجب أن تكون الخطوة التالية هي عرضه باستخدام DataGrid
في لوحة التطبيق أيضًا، حدد سلوكيات الخادم.
أكمل الإعدادات أولاً، وانقر فوق نشر، وسيقوم البرنامج تلقائيًا بنشر الموقع ونسخ مجلدات DreamweaverCtrls.dll وweb.config و_mmServerScripts إلى دليل الموقع، وهي ملفات ضرورية لاستخدام Dreamweaver MX لإنشاء صفحات ويب ASP.net.
[الشكل 2-8 موقع النشر]
وفي الوقت نفسه، يجب عليك أولاً إنشاء مجلد bin في الدليل الجذر لموقع الويب ونسخ ملف DreamweaverCtrls.dll إلى هذا المجلد.
انقر فوق علامة + لإنشاء DataSet جديدة أولاً.
[الشكل 2-9 إضافة مجموعة بيانات]
يتم استخدام الاتصال لتحديد مصدر البيانات، والجدول لتحديد الجدول، والعمود لتحديد العنصر، ويتم استخدام عامل التصفية لتصفية البيانات نظرًا لأن هذه الصفحة تعرض بيانات من أوروبا، يتم تعيين القيمة المدخلة=3. في حالة الفشل، يتم استخدام Go To لمعالجة الصفحة التي تنتقل إليها عند وجود خطأ في قراءة البيانات.
[الشكل 2-10 إنشاء مجموعة بيانات]
بعد إنشاء DataSet بنجاح، يمكنك إنشاء DataGrid. انقر فوق علامة + وحدد DataGrid
[الشكل 2-11 إضافة DataGrid]
حدد مجموعة السجلات المطلوبة في مجموعة البيانات، وقم بتعيين ما إذا كنت تريد استخدام عرض الترحيل وعدد السجلات لكل صفحة المعروضة في الترحيل، وتعيين طريقة شريط التنقل في التنقل، وإضافة أو حذف العناصر المعروضة في الأعمدة.
[الشكل 2-12 إعداد DataGrid]
انقر فوق "تحرير" لتعيين عنوان الرأس. بعد إدخال العنوان، انقر فوق "موافق" للتأكيد.
[الشكل 2-13 عنوان الإعداد]
انقر فوق موافق لإضافة DataGrid.
[الشكل 2-14 صفحة المعاينة]
في صفحة المعاينة، يمكنك رؤية المنطقة التي تمت إضافة DataGrid إليها، اضغط على F12 لمعاينة الصفحة.
أدناه هي الصفحة بعد التشغيل.
[الشكل 2-15 الصفحة بعد التشغيل]
2. تغيير خصائص DataGrid
مقدمة المحتوى ذات الصلة:
عندما ترى هذا المكون، هل تعتقد أن اللون لا يبدو جميلًا جدًا، فلنغيره؟ يحتوي مكون DataGrid على العديد من الخصائص التي يمكنك من خلالها تغيير نمط DataGrid.
تحليل الكود
هذا هو الكود الذي تم إنشاؤه بواسطة Dreamwaver MX ويمكن تعديله بناءً على خصائصه.
وضع PagerStyle
يمكنك ضبط تنسيق عرض الترحيل. يتم عرض NumericPages في ترحيل رقمي، ويتم عرض NextPrev في العلامات "<" ">".
HeaderStyle
ضبط نمط الرأس. يمكنك تعيين HorizontalAlign (محاذاة أفقية)، BackColor (لون الخلفية)، ForeColor (لون المقدمة)، اسم الخط (الخط)، Font-Bold (سواء كان غامقًا)، حجم الخط (حجم الخط)
ItemStyle
قم بتعيين نمط كل عنصر بيانات، حيث تكون الخصائص هي نفسها المذكورة أعلاه
AlternatingItemStyle
إذا كنت بحاجة إلى تبديل لون عناصر البيانات، فيمكنك إضافة هذا العنصر والخصائص هي نفسها المذكورة أعلاه.
نمط التذييل
ضبط نمط التذييل
بيجر ستايل
النمط السفلي
يحتوي Dreamwaver MX أيضًا على مربع حوار يمكنه تغيير نمط DataGrid.
حدد DataGrid الذي تم إنشاؤه وانقر فوق "تحرير الأعمدة" في لوحة الخصائص الخاصة به.
[الشكل 2-16 لوحة خصائص DataGrid]
عند الدخول إلى صفحة تعديل السمات، يمكننا استخدام "+" و"-" لزيادة أو تقليل الأعمدة المطلوبة، وفي الوقت نفسه، يمكننا النقر فوق "تحرير" لتعيين عناصر البيانات المقابلة لكل عنصر، بالإضافة إلى اسم عنوان. انقر فوق تغيير العمود لتعيين نوع كل عنصر، بما في ذلك النموذج الحر (قم بتعيين البيانات الموجودة في كل عمود بحرية، ويمكنك إضافة المحتوى الخاص بك)، والارتباط التشعبي (تعيينه كارتباط تشعبي)، وأزرار التحرير، والتحديث، والإلغاء (يمكن أن تكون يستخدم لإنشاء صفحات الإدارة بسرعة)، زر الحذف (حذف السجلات)
[الشكل 2-17 خاصية عمود DataGrid]
[الشكل 2-18 تغيير سمة نوع العمود]
أعتقد أنه من خلال هذه الخصائص يمكنك تعيين DataGrid الذي تريده.