الدرس الخامس والسبعون : ASP.net - الجزء الثاني - دورة .net 2008
بسم الله الرحمن الرحيم . السلام عليكم ورحمة الله وبركاته . نعود اليوم لنواصل سلسلة دروسنا مع ASP.net ، موعدنا في درس اليوم مع أدوات ASP.net . كما لاحظنا سابقا، فإن تعريف أي اداة من أدوات ASP.net يتم من خلال HTML مكتوب في *.aspx ، وفيما عدا ذلك فهي شديدة الشبه بالأدوات العادية في تطبيقاتنا من ناحية المظهر وتعاملك معها كمبرمج ، إلا انها تختلف في الأداء وما وراء الكود بشكل قطعي . وكذا الأمر بالنسبة للأحداث ايضاً والتي تم عمل ضغط لها لتتناسب مع عالم الويب ، ومع اي Event يتم نقل البيانات إلى السيرفر مباشرة . خاصية AutoPostBack : تتيح لك هذه الخاصية النقل إلى السيرفر مباشرة مع اي تحديث فيها ، تجد هذه الخاصية في مربعات النص Text Box وادوات الاختيار والتحديد Check Box & Radio Buttons والقوائم بانواعها List Box و Combo Box ، والقيمة الافتراضية لها هي false . الخصائص الأساسية لأدوات الويب . تشتق جميع أدوات الويب من الفئة System.Web.UI.Control والتي نجد لها الخصائص والدوال التالية : Controls : تعيد جميع الأدوات الأبناء لهذه الأداة . HasControls() : تعيد قيمة منطقية بوجود أو عدم وجود أدوات داخل هذه الأداة . ID : الاسم الموحد لكل اداة - لا يمكن تكراره - . Page : تعود بمتغير على الصفحة التي تحتوي هذه الاداة . Parent : الأداة الحاضنة لهذه الأداة . Visible : ظهور او اختفاء هذه الاداة . كما تقدم الفئة System.Web.UI.WebControls.WebControl للأدوات المشتقة منها بعض الخصائص المتعلقة بالمظهر والعرض ، منها : BackColor : لون الخلفية . BorderColor : لون الحدود . BorderStyle : ستايل الحدود . BorderWidth : عرض الحدود . Enabled : تفعيل او عدم تفعيل الأداة . CssClass : ال class الخاص بال styles لهذه الأداة . Font : معلومات الخط من الحجم والاسم وخلافه لهذه الاداة . ForeColor : لون خط الأداة . Height, Width : العرض والارتفاع . TabIndex : موقعها من التنقل باستخدام Tab . ToolTip : في حالة وجود Tips للاداة . مثال : استعراض اسماء جميع الأدوات في الفورم : باستخدام ال Collection الناتج عن الخاصيةControls اضافة للدالة HasControls() لمعرفة وجود أدوات من عدمه ، يمكنك كتابة الكود التالي : C#: كود PHP:
كود PHP:
C#: كود PHP:
كود PHP:
أقسام الأدوات في ASP.net : تنقسم الأدوات الموجودة في ASP.net لعدة أنواع رئيسية : Simple controls : الأدوات التي تتبع ASP.net ولكنها من عناصر HTML اساساً مثل مربعات النص TextBox والعنوان Label وأزرار الأمر Buttons وخلافه . Rich controls : مجموعة من أدوات ASP.net العادية ولكنها اكثر تشعباً وخصائص ، من امثلتها اداة التقويم Calendar واداة عرض الشجرة TreeView والقوائم Menu وخلافه . Data controls : هي ادوات تعتمد على الربط بقاعدة البيانات ، من اشهر امثلتها GridView . Validation controls : ادوات التحقق ، هي ادوات سيرفر ولكن يتم تنفيذها عند العميل ، حيث يتم تطبيق محتويات ********** فيها لتنفيذ بعض عمليات التحقق . Login Controls : مجموعة من الادوات المتكاملة لتسجيل الدخول وخلافه . Web part controls : مجموعة ادوات مخصصة لاتاحة الفرصة لمستخدم موقعك للتحكم في لون وخصائص اجزاء الصفحة . هناك بالطبع HTML Controls والتي تحدثنا عنها سابقا . سنحاول ضمن الدروس القادمة التعرف على بعض هذه الأدوات الخاصة التي ستمر علينا للمرة الأولى ما عدا ال GridView والتي سنؤجل الحديث عنها حتى قسم ال ASP.net + قواعد البيانات . MasterPages : لعلك تلاحظ في عدد كبير من المواقع ان جزءاً ثابتاً من الموقع لا يتم تغييره في كل الصفحات ، حيث يبدو كجزء من الصفحة ويتفاعل معها ولكنه يبدو مكرراً في كل الصفحات . في الواقع هذا الجزء ليس موجوداً في كل الصفحات ، لتتخيل ان الموقع به 100 صفحة وقمت بعمل نفس الجزء في كل مرة ، ثم رغبت في تغيير احد خصائصه ، فستضطر للتعديل في ال 100 صفحة كاملة . من هنا ظهر مبدأ ال include في ASP والذي كان يتيح لك عمل Include لصفحة بعينها في اي جزء من صفحتك ، ومع ASP.net ظهرت لنا ال Master Pages والتي تجعل من صفحة ما صفحة رئيسية لكل الصفحات . سنجرب هذا المبدأ سوية ، قم باضافة New Item واختر Master Page بالشكل التالي : http://vb4arab.com/vb/uploaded/3/01219836350.jpg بعد انشاءك لها ، اول ملا تلاحظه في صفحة الكود هو وجود العنصر الجديد التالي : كود بلغة HTML:
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> ليس هذا فقط ، اي أن كتابة الكود فوق وتحت الوسم لا يعني انها ستظل فوق وتحت الصفحة فقط ، في المثال التالي سنجعل الصفحة الرئيسية تظهر في مربع صغير فقط وسط الصفحة فيما ال 9 مربعات الاخرى تحتوي على بيانات ما ، بالصورة التالية مثلاً : http://vb4arab.com/vb/uploaded/3/11219836350.jpg الكود الخاص بهذه الصفحة سيكون بالشكل التالي : كود بلغة HTML:
<%@ Master ********="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> http://vb4arab.com/vb/uploaded/3/21219836350.jpg لاحقاً سيطلب منك تحديدها في شاشة اخرى ، والآن مع اي صفحة ترغب في حصولها على نفس الشكل ستقوم باعطاءها نفس القيمة ، حتى لو كانت صفحة قديمة يمكنك تعديل الخاصية التالي في Page : http://vb4arab.com/vb/uploaded/3/31219836350.jpg ومراعاة وجود هذا الوسم تحديداً : كود بلغة HTML:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> *** اي تغيير في ال Master Page سيغير في كل الصفحات . التعامل مع Sitemap . من خلال تعاملك مع كائن ال SiteMap والتي تتيح لك تعريف محتويات موقعك وترتيبها ، تستطيع لاحقاً تشكيل قوائم وعرض شجري لصفحات موقعك ، لنبدء اولاً باضافة sitemap بالشكل التالي : http://vb4arab.com/vb/uploaded/3/01219838606.jpg ستجد الكود التالي افتراضياً : كود بلغة HTML:
<?xml version="1.0" encoding="utf-8" ?> كود بلغة HTML:
<?xml version="1.0" encoding="utf-8" ?> http://vb4arab.com/vb/uploaded/3/11219838606.jpg في الخطوة التالية سيطلب منك تحديد نوع ال DataSource ، اختر Site map : http://vb4arab.com/vb/uploaded/3/21219838606.jpg الآن ، جرب تشغيل موقعك والذي سيكون بالشكل التالي : http://vb4arab.com/vb/uploaded/3/31219838606.jpg SiteMapPath : أداة اخرى تتبع نفس المجموعة ، مهمتها تحديد المكان لك بالشكل التالي مثلاً : http://vb4arab.com/vb/uploaded/3/01219838886.jpg قم بوضعها في ال masterpage ، وستعمل مع كامل صفحاتك بصورة طبيعية . أدوات التحقق : هي مجموعة من ادوات التحقق من المدخلات يعمل اغلبها جهة العميل Client Side ، وتحتوي على الأدوات التالية : CompareValidator : مقارنة المدخلات في جهة بمدخلات أخرى ، تفيد مثلاً في حالة اعادة تأكيد كلمة المرور ، ربط هذه الأداة كافي لتطبيق هذا التحقق . RangeValidator : للتأكد من ان المدخلات تقع ضمن نطاق معين يتم تحديده . RequiredFieldValidator : للتأكد من أن المستخدم قام بادخال بيانات . RegularExpressionValidator : يمكنك تحديد نوع من التحقق بناء على Reqular Expression ، تفيدك مثلاً في حالة التحقق من صحة موقع أو بريد الكتروني او رقم هاتف ، لمعرفة المزيد عن ال Reqular Expressions يمكنك مراجعة هذا الدرس : http://www.arabteam2000-forum.com/in...howtopic=77787 ايضاً يمكنك الاستفادة من هذين الموقعين لاستخراج اي RegularExpression ترغب به : http://regexlib.com/DisplayPatterns.aspx http://www.regular-expressions.info/ CustomValidator : تتيح لك بناء اجراءات التحقق الخاصة بك . ValidationSummary : تعرض موجز عمليات التحقق التي تمت في هذا الفورم . تحتوي هذه المجموعة على الخصائص التالية : ControlToValidate : أداة الادخال المطلوب التحقق منها . Display : العرض في حالة حدوث الخطأ . ErrorMessage : رسالة الخطأ . ForeColor : لون رسالة الخطأ . الآن لتجربة هذه المجموعة ، سنقوم بتصميم فورم تسجيل بيانات بسيطة ، تحتوي على الاسم ، ورقم المرور وتأكيد كلمة المرور ، والبريد الالكتروني والعمر . - الاسم لا يمكن ان يكون خالياً : RequiredFieldValidator . - كلمة المرور وتأكيدها لا بد ان يكونوا منطبقين: CompareValidator - الايميل لا بد ان يكون صحيحاً : RegularExpressionValidator - العمر لا بد أن يكون بين 10 و 50 : RangeValidator - وفي النهاية سنعرض نتائج التحقق جميعها ... قم بتصميم الفورم ، وضع كل اداة بجانب الحقل الخاص بها ليكون الشكل التالي : http://vb4arab.com/vb/uploaded/3/01219840601.jpg والكود : كود بلغة HTML:
<%@ Page ********="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %> ال RegularExpression اللازم لعملية الايميل لو لم تكن قد راجعت بعض الدروس السابقة هو : رمز: ^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$ وبالنسبة للمقارنة ، فهناك خاصية ControlToCompare اضافة لخاصية ControlToValidate ، وفي ال Range خصائص Minimum Value و Maximum Value . والآن جرب ارتكاب الاخطاء خطأ وراء الآخر ، وشاهد النتيجة : http://vb4arab.com/vb/uploaded/3/11219840601.jpg نقاط سريعة : - يمكنك معرفة المزيد عن Web Parts من هنا : http://msdn.microsoft.com/en-us/library/e0s9t4ck.aspx - كما ترى فالتصاميم التي نقوم بها حتى اللحظة بدائية جداً ، هناك طريقين لتحسين تصاميمك ، الحل القديم يعتمد على استخدام لل CSS ، وهذه يمكنك معرفة المزيد عنها هنا : http://www.w3.org/Style/CSS/learning الحل الجديد ابتداء من ASP.net هو استخدام ما يعرف باسم Themes ، يمكنك البدء فيها من هنا : http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx - درسنا القادم سيكون عن نقاط اضافية في ASP.net ، بعدها سنأخذ جولة سريعة مع قواعد البيانات ومع AJAX . والله الموفق ... والسلام عليكم ورحمة الله وبركاته . |
الساعة الآن 06:39 AM. |
Powered by vBulletin® v3.8.4, Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. , TranZ By
Almuhajir
النسخة الفضية