منتدى رياض الجنة - Riad Al-Ganah

منتدى رياض الجنة - Riad Al-Ganah (https://montada.khaledbelal.com/index.php)
-   دورة .NET 2008 من منتدى فيجوال بيسك للعرب (https://montada.khaledbelal.com/forumdisplay.php?f=57)
-   -   الدرس الخامس والسبعون : ASP.net - الجزء الثاني - دورة .net 2008 (https://montada.khaledbelal.com/showthread.php?t=706)

khaledbelal 03-11-2010 06:55 PM

الدرس الخامس والسبعون : 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:

string Information="";
if(
myPanel.HasControls())
{
foreach (
Control c in PanelName.Controls)
{
if (!
object.ReferenceEquals(c.GetType(),typeof(System.Web.UI.LiteralControl)))
{
Information+= string.Format("Control Name: {0} <br/>"c.ToString());
Information+= string.Format("ID: {0} <br/>"c.ID);
Information+= string.Format("Control Visible: {0} <br/>"c.Visible);
Information+= string.Format("ViewState: {0} <br/>"c.EnableViewState);
Information+= "<br/><hr/><br/>";
Response.Wite(Information);
}
}


vb.net:
كود PHP:

Dim Information As String "" 
If myPanel.HasControls() Then 
    
    
For Each c As Control In PanelName.Controls 
        
If Not Object.ReferenceEquals(c.[GetType](), GetType(System.Web.UI.LiteralControl)) Then 
            Information 
+= String.Format("Control Name: {0} <br/>"c.ToString()) 
            
Information += String.Format("ID: {0} <br/>"c.ID
            
Information += String.Format("Control Visible: {0} <br/>"c.Visible
            
Information += String.Format("ViewState: {0} <br/>"c.EnableViewState
            
Information += "<br/><hr/><br/>" 
            
Response.Wite(Information
            
        
End If 
    
Next 
End 
If 

مثال : انشاء أدوات وقت التصميم :

C#:
كود PHP:

TextBox t1 = new TextBox();
t1.ID string.Format("dynamict1");
myPanel.Controls.Add(t1); 

vb.net:
كود PHP:

Dim t1 As New TextBox() 
t1.ID String.Format("dynamict1"
myPanel.Controls.Add(t1


أقسام الأدوات في 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">
       
        </asp:ContentPlaceHolder>

يمثل هذين الوسمين الصفحة التي سيتم عمل Master Page لها ، قم بوضع اكوادك المختلفة قبل وبعد هذه المنطقة ، اما هذه المنطقة فسيتم عرض الصفحة الرئيسية فيها .

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

http://vb4arab.com/vb/uploaded/3/11219836350.jpg

الكود الخاص بهذه الصفحة سيكون بالشكل التالي :

كود بلغة HTML:

<%@ Master ********="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<****>
    <form id="form1" runat="server">
    <div>
    <center>
    <table border="1" width=80%>
    <tr>
    <td>hiiii, i am here</td>
    <td><img src="http://vb4arab.com/vb/attachments/logo.jpg" /></td>
    <td>any thing</td>
    </tr>
   
    <tr>
    <td>hii again</td>
    <td>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
        </td>
        <td><input type="button" /></td>
    </tr>
    <tr>
    <td colspan=2>large TD :)</td>
    <td>bye</td>
    </tr>
    </table>
    </center>
    </div>
    </form>
</****>
</html>

وطبعاً يمكن تصميمها من خلال ال Designer وليس من الكود فقط ، بعد الانتهاء من التصميم قم بانشاء صفحة جديدة ، وفي شاشة طلب Master Page قم بتحديدها له بالشكل التالي :

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">
</asp:Content>

لكن لا تنس ان لا تحتوي على تكرارات مثل ال head ووسم html .
*** اي تغيير في ال Master Page سيغير في كل الصفحات .

التعامل مع Sitemap .

من خلال تعاملك مع كائن ال SiteMap والتي تتيح لك تعريف محتويات موقعك وترتيبها ، تستطيع لاحقاً تشكيل قوائم وعرض شجري لصفحات موقعك ، لنبدء اولاً باضافة sitemap بالشكل التالي :

http://vb4arab.com/vb/uploaded/3/01219838606.jpg

ستجد الكود التالي افتراضياً :
كود بلغة HTML:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  de******ion="">
        <siteMapNode url="" title=""  de******ion="" />
        <siteMapNode url="" title=""  de******ion="" />
    </siteMapNode>
</siteMap>

الآن مهمتنا لتعريف هذه ال Nodes ، لنفترض مثلاً صفحة البداية وتحتها صفحتين مختلفتين :

كود بلغة HTML:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="Default1.aspx" title="صفحة البداية"  de******ion="">
        <siteMapNode url="Default2.aspx" title="صفحة لوجو الياهوو !"  de******ion="" />
        <siteMapNode url="Default3.aspx" title="صفحة لوجو المنتدى"  de******ion="" />
    </siteMapNode>
</siteMap>

الآن سنحاول الاستفادة من هذه المعلومات ، سننتقل إلى ال MasterPage الخاصة بنا وسنقوم باضافة Menu وتحديد ال DataSource لها ليكون هذا ال sitemap :

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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<****>
    <form id="form1" runat="server">
    <div>
   
        Name:<br />
&nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" ErrorMessage="you must eneter Name">
</asp:RequiredFieldValidator>
        <br />
        <br />
        Age:<br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:RangeValidator ID="RangeValidator1" runat="server"
            ControlToValidate="TextBox2" ErrorMessage="Age must be between 10 and 50"
            MaximumValue="50" MinimumValue="10">
</asp:RangeValidator>
        <br />
        <br />
        Password:<br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        <br />
        <br />
        Retype Password:<br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToCompare="TextBox3" ControlToValidate="TextBox4"
            ErrorMessage="The passwords must be the same">
</asp:CompareValidator>
        <br />
        <br />
        E-mail:<br />
&nbsp;<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
            ControlToValidate="TextBox5" ErrorMessage="invalid email address"
            ValidationExpression="^((?&gt;[a-zA-Z\d!#$%&amp;'*+\-/=?^_`{|}~]+\x20*|&quot;((?=[\x01-\x7f])[^&quot;\\]|\\[\x01-\x7f])*&quot;\x20*)*(?&lt;angle&gt;&lt;))?((?!\.)(?&gt;\.?[a-zA-Z\d!#$%&amp;'*+\-/=?^_`{|}~]+)+|&quot;((?=[\x01-\x7f])[^&quot;\\]|\\[\x01-\x7f])*&quot;)@(((?!-)[a-zA-Z\d\-]+(?&lt;!-)\.)+[a-zA-Z]{2,}|\[(((?(?&lt;!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)&gt;)$">
</asp:RegularExpressionValidator>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Go On" />
        <br />
        <br />
        Summery:r />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
   
    </div>
    </form>
</****>
</html>

طبعاً قمت بتغيير Error Message لكل منهم ، وقمت بتحديد ال ControlToValidate لكل واحدة فيهم .
ال 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 .

والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .


الساعة الآن 08:33 PM.

Powered by vBulletin® v3.8.4, Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. , TranZ By Almuhajir
النسخة الفضية

Ads Management Version 3.0.1 by Saeed Al-Atwi

a.d - i.s.s.w