الدرس الخامس والسبعون - ASP.net - الجزء الثاني - نسخة قابلة للطباعة +- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb) +-- قسم : الأقسام التعليمية - المنتدى القديم (http://vb4arb.com/vb/forumdisplay.php?fid=90) +--- قسم : قسم دورات المنتدى (http://vb4arb.com/vb/forumdisplay.php?fid=113) +---- قسم : دورة .net 2008 . لنبدأ سوياً (http://vb4arb.com/vb/forumdisplay.php?fid=138) +---- الموضوع : الدرس الخامس والسبعون - ASP.net - الجزء الثاني (/showthread.php?tid=5673) |
الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 كاتب الموضوع : أحمد جمال
بسم الله الرحمن الرحيم .السلام عليكم ورحمة الله وبركاته . نعود اليوم لنواصل سلسلة دروسنا مع 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#: كود : [SIZE=3]string Information="";[/SIZE] vb.net: كود : [SIZE=3]Dim Information As String = "" [/SIZE] مثال : انشاء أدوات وقت التصميم : C#: كود : TextBox t1 = new TextBox(); vb.net: كود : [SIZE=3]Dim t1 As New TextBox() الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 أقسام الأدوات في ASP.net : تنقسم الأدوات الموجودة في ASP.net لعدة أنواع رئيسية : Simple controls : الأدوات التي تتبع ASP.net ولكنها من عناصر HTML اساساً مثل مربعات النص TextBox والعنوان Label وأزرار الأمر Buttons وخلافه . Rich controls : مجموعة من أدوات ASP.net العادية ولكنها اكثر تشعباً وخصائص ، من امثلتها اداة التقويم Calendar واداة عرض الشجرة TreeView والقوائم Menu وخلافه . Data controls : هي ادوات تعتمد على الربط بقاعدة البيانات ، من اشهر امثلتها GridView . Validation controls : ادوات التحقق ، هي ادوات سيرفر ولكن يتم تنفيذها عند العميل ، حيث يتم تطبيق محتويات JavaScript فيها لتنفيذ بعض عمليات التحقق . Login Controls : مجموعة من الادوات المتكاملة لتسجيل الدخول وخلافه . Web part controls : مجموعة ادوات مخصصة لاتاحة الفرصة لمستخدم موقعك للتحكم في لون وخصائص اجزاء الصفحة . هناك بالطبع HTML Controls والتي تحدثنا عنها سابقا . سنحاول ضمن الدروس القادمة التعرف على بعض هذه الأدوات الخاصة التي ستمر علينا للمرة الأولى ما عدا ال GridView والتي سنؤجل الحديث عنها حتى قسم ال ASP.net + قواعد البيانات . الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 MasterPages : لعلك تلاحظ في عدد كبير من المواقع ان جزءاً ثابتاً من الموقع لا يتم تغييره في كل الصفحات ، حيث يبدو كجزء من الصفحة ويتفاعل معها ولكنه يبدو مكرراً في كل الصفحات . في الواقع هذا الجزء ليس موجوداً في كل الصفحات ، لتتخيل ان الموقع به 100 صفحة وقمت بعمل نفس الجزء في كل مرة ، ثم رغبت في تغيير احد خصائصه ، فستضطر للتعديل في ال 100 صفحة كاملة . من هنا ظهر مبدأ ال include في ASP والذي كان يتيح لك عمل Include لصفحة بعينها في اي جزء من صفحتك ، ومع ASP.net ظهرت لنا ال Master Pages والتي تجعل من صفحة ما صفحة رئيسية لكل الصفحات . سنجرب هذا المبدأ سوية ، قم باضافة New Item واختر Master Page بالشكل التالي : بعد انشاءك لها ، اول ملا تلاحظه في صفحة الكود هو وجود العنصر الجديد التالي : كود : [color=#000080]<asp:ContentPlaceHolder id=[COLOR=#0000ff]"ContentPlaceHolder1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR] يمثل هذين الوسمين الصفحة التي سيتم عمل Master Page لها ، قم بوضع اكوادك المختلفة قبل وبعد هذه المنطقة ، اما هذه المنطقة فسيتم عرض الصفحة الرئيسية فيها . ليس هذا فقط ، اي أن كتابة الكود فوق وتحت الوسم لا يعني انها ستظل فوق وتحت الصفحة فقط ، في المثال التالي سنجعل الصفحة الرئيسية تظهر في مربع صغير فقط وسط الصفحة فيما ال 9 مربعات الاخرى تحتوي على بيانات ما ، بالصورة التالية مثلاً : الكود الخاص بهذه الصفحة سيكون بالشكل التالي : كود : [color=#000080]<%@ Master Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"MasterPage.master.cs"[/color] Inherits=[color=#0000ff]"MasterPage"[/color] %>[/COLOR] وطبعاً يمكن تصميمها من خلال ال Designer وليس من الكود فقط ، بعد الانتهاء من التصميم قم بانشاء صفحة جديدة ، وفي شاشة طلب Master Page قم بتحديدها له بالشكل التالي : لاحقاً سيطلب منك تحديدها في شاشة اخرى ، والآن مع اي صفحة ترغب في حصولها على نفس الشكل ستقوم باعطاءها نفس القيمة ، حتى لو كانت صفحة قديمة يمكنك تعديل الخاصية التالي في Page : ومراعاة وجود هذا الوسم تحديداً : كود : [color=#000080]<asp:Content ID=[COLOR=#0000ff]"Content2"[/color] ContentPlaceHolderID=[color=#0000ff]"ContentPlaceHolder1"[/color] Runat=[color=#0000ff]"Server"[/color]>[/COLOR] لكن لا تنس ان لا تحتوي على تكرارات مثل ال head ووسم html . *** اي تغيير في ال Master Page سيغير في كل الصفحات . الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 التعامل مع Sitemap . من خلال تعاملك مع كائن ال SiteMap والتي تتيح لك تعريف محتويات موقعك وترتيبها ، تستطيع لاحقاً تشكيل قوائم وعرض شجري لصفحات موقعك ، لنبدء اولاً باضافة sitemap بالشكل التالي : ستجد الكود التالي افتراضياً : كود : [color=#000080]<?xml version=[COLOR=#0000ff]"1.0"[/color] encoding=[color=#0000ff]"utf-8"[/color] ?>[/COLOR] الآن مهمتنا لتعريف هذه ال Nodes ، لنفترض مثلاً صفحة البداية وتحتها صفحتين مختلفتين : كود : [color=#000080]<?xml version=[COLOR=#0000ff]"1.0"[/color] encoding=[color=#0000ff]"utf-8"[/color] ?>[/COLOR] الآن سنحاول الاستفادة من هذه المعلومات ، سننتقل إلى ال MasterPage الخاصة بنا وسنقوم باضافة Menu وتحديد ال DataSource لها ليكون هذا ال sitemap : في الخطوة التالية سيطلب منك تحديد نوع ال DataSource ، اختر Site map : الآن ، جرب تشغيل موقعك والذي سيكون بالشكل التالي : SiteMapPath :
أداة اخرى تتبع نفس المجموعة ، مهمتها تحديد المكان لك بالشكل التالي مثلاً :
قم بوضعها في ال masterpage ، وستعمل مع كامل صفحاتك بصورة طبيعية .
الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 أدوات التحقق : هي مجموعة من ادوات التحقق من المدخلات يعمل اغلبها جهة العميل Client Side ، وتحتوي على الأدوات التالية : CompareValidator : مقارنة المدخلات في جهة بمدخلات أخرى ، تفيد مثلاً في حالة اعادة تأكيد كلمة المرور ، ربط هذه الأداة كافي لتطبيق هذا التحقق . RangeValidator : للتأكد من ان المدخلات تقع ضمن نطاق معين يتم تحديده . RequiredFieldValidator : للتأكد من أن المستخدم قام بادخال بيانات . RegularExpressionValidator : يمكنك تحديد نوع من التحقق بناء على Reqular Expression ، تفيدك مثلاً في حالة التحقق من صحة موقع أو بريد الكتروني او رقم هاتف ، لمعرفة المزيد عن ال Reqular Expressions يمكنك مراجعة هذا الدرس : http://www.arabteam2000-forum.com/index.php?showtopic=77787 ايضاً يمكنك الاستفادة من هذين الموقعين لاستخراج اي RegularExpression ترغب به : http://regexlib.com/DisplayPatterns.aspx http://www.regular-expressions.info/ CustomValidator : تتيح لك بناء اجراءات التحقق الخاصة بك . ValidationSummary : تعرض موجز عمليات التحقق التي تمت في هذا الفورم . تحتوي هذه المجموعة على الخصائص التالية : ControlToValidate : أداة الادخال المطلوب التحقق منها . Display : العرض في حالة حدوث الخطأ . ErrorMessage : رسالة الخطأ . ForeColor : لون رسالة الخطأ . الآن لتجربة هذه المجموعة ، سنقوم بتصميم فورم تسجيل بيانات بسيطة ، تحتوي على الاسم ، ورقم المرور وتأكيد كلمة المرور ، والبريد الالكتروني والعمر . - الاسم لا يمكن ان يكون خالياً : RequiredFieldValidator . - كلمة المرور وتأكيدها لا بد ان يكونوا منطبقين: CompareValidator - الايميل لا بد ان يكون صحيحاً : RegularExpressionValidator - العمر لا بد أن يكون بين 10 و 50 : RangeValidator - وفي النهاية سنعرض نتائج التحقق جميعها ... قم بتصميم الفورم ، وضع كل اداة بجانب الحقل الخاص بها ليكون الشكل التالي : والكود : كود : [color=#000080]<%@ Page Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"Default4.aspx.cs"[/color] Inherits=[color=#0000ff]"Default4"[/color] %>[/COLOR] ال RegularExpression اللازم لعملية الايميل لو لم تكن قد راجعت بعض الدروس السابقة هو : كود : ^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"[url=file://]://[/x01-/x7f])*%22/x20*)*(?%3Cangle%3E%3C))?((?!\.)(?%3E\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)]\\]|\\[\x01-\x7f])*"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[/url][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)>)$ والآن جرب ارتكاب الاخطاء خطأ وراء الآخر ، وشاهد النتيجة : الدرس الخامس والسبعون - ASP.net - الجزء الثاني - RaggiTech - 14-10-12 نقاط سريعة : - يمكنك معرفة المزيد عن 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 . والله الموفق ... والسلام عليكم ورحمة الله وبركاته . |