مدخل إلى asp.net ASP.NET: استخدام أدوات التحكم القياسية

هذا أول درس من سلسلة "مدخل إلى ASP.net"، والتي سنحاول من خلالها تقريب منصة العمل ASP.net الخاصة بشركة Microsoft إلى المبتدئين، وهي مفصلّة إلى دروس، كل درس يتكلم عن موضوع معين، في هذا الدرس (الأول) سنتعلم كيف نستخدم عناصر التحكم الأساسية المضمنة في منصة العمل ASP.NET والتي لابد منها لإنشاء تطبيقات الانترنت، حيث سنتعلم كيف نعرض المعلومات باستخدام الأداتين Label ،Literal، وكيف نقبل ونتعامل مع دخل المستخدم من خلال الأدوات TextBox ،CheckBox ،RadioButton.

عرض المعلومات

منصة عمل ASP.NET تدعم أداتين لعرض البيانات النصية Label ،Literal ففي حين أن الأداة Literal تعرض البيانات بأسلوب بسيط، فإن الأداة Label تقدم العديد من المزايا والتنسيقات الإضافية.

استخدام أداة التحكم Label

نستخدم أدوات عرض المعلومات حتى نتمكن من تعديل النص المعروض على الصفحة وقت التنفيذ حيث نستطيع ببساطة أن نحدد النص المراد عرضه من خلال إسناده للخاصية Text لأداة Label، كما يمكن أن نستخدم تنسيقات html لتقوم هذه الأداة بتفسيرهم وتوليد الخرج المطلوب، وبشكل افتراضي تقوم هذه الأداة بإحاطة النص بالوسم <span>، في الكود التالي نعرض أساليب مختلفة لإسناد المعلومات لأدوات Label:

كود ASP.net

    <div>
        <asp:Label ID="Label1" runat="server" Text="Hi i'm Label1" ></asp:Label>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Label">
        Hi i'm Label2
        </asp:Label>
        <br />
        <asp:Label ID="Label3" runat="server" Text="<b><i>Hi i'm Label3</i></b>">
        </asp:Label>
    </div>

    <div>
        <asp:Literal ID="L1" runat="server" Mode="PassThrough" Text="<hr />"/>
        <asp:Literal ID="L2" runat="server" Mode="Encode" Text="<hr />"/>
        <asp:Literal ID="L3" runat="server" Mode="Transform" Text="<hr />"/>
    </div>

 عند تنفيذ الصفحة السابقة تقوم Literal1 بعرض خط أفقي، Literal2 تعرض النص </hr> في حين أن Literal3 تفحص الجهاز الطالب للصفحة فإن كان يدعم هذا الوسم فإنه يعرض خط أفقي وإلا فسيتم عرض النص كما هو </ hr>.

قبول دخل المستخدم

تتضمن منصة عمل ASP.NET أدوات تسمح للمستخدم بإدخال وتحديد اختياراته في الموقع، حيث تقدم ثلاث أدوات أساسية هي TextBox ،CheckBox ،RadioButton و سنتعرف عليهم في الفقرات التالية بالتفصيل.

استخدام أداة التحكم TextBox

تسمح هذه الأداة للمستخدم بإدخال نص وفقا ً لثلاثة أنماط تحددها قيمة الخاصية TextMode وهم:

• SingleLine: قبول الدخل كسطر واحد فقط.
• MultiLine: قبول الدخول بأسطر عديدة.
• Password: حيث يظهر دخل المستخدم كرموز ( نجوم *** أو غيره ).

كود ASP.net

    <div>
        <asp:TextBox ID="TextBox1" runat="server" TextMode="SingleLine"/>
        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" />
        <asp:TextBox ID="TextBox3" runat="server" TextMode="Password" />
    </div>

خصائص الأداة TextBox:

• AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. 
• AutoCompleteType: تحديد نمط الإكمال التلقائي حيث يكفي أن يدخل المستخدم بضعة حروف حتى يتم إظهار كلمات مطابقة تم إدخالها مسبقاً، يمكن إلغاء تفعيل هذه الخاصية بإسناد القيمة Disabled لها.
• AutoPostBack: إرسال المحتويات إلى السيرفر بشكل فوري عند أي تغير بالنص المدخل.
• Columns: تحديد عدد الأعمدة التي ستظهر.
• Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
• MaxLength: تحديد العدد الأعظمي من المحارف التي يمكن إدخالها ( لاتعمل مع MulitLine).
• ReadOnly: لمنع المستخدم من تغيير القيمة الموجودة بـ TextBox.
• Rows: تحديد عدد الأسطر التي ستظهر.
• TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
• Warp: لتحديد إمكانية الالتفاف التلقائي للنص مع النمط MultiLine.

أداة التحكم TextBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدث TextChanged والذي يُطلق عندما تتغير محتويات هذه الأداة.

لتوضيح آلية عمل الخاصية  AutoPostBack أنشئ صفحة جديدة أضف لها TextBox1 وأعطي الخاصية السابقة القيمة True ثم أضف Lable1 ماسنقوم به هو أنه عند كتابة نص ما فإنه سيعرض في الأداة Label1 بمجرد نقل التركيز خارج TextBox1 وهو دليل على عمل postBack آلي للصفحة، أي إرسالها للسيرفر وإعادة النتائج:

    <div>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
            ontextchanged="TextBox1_TextChanged"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>

    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        Label1.Text = TextBox1.Text;
    }

كود VB

    Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As
    System.EventArgs) Handles TextBox1.TextChanged

        Label1.Text = TextBox1.Text
    End Sub

نفذ الصفحة واكتب ماتريد في TextBox1 ثم اضغط على المفتاح Tab من لوحة المفاتيح وشاهد النتيجة، أغلق المستعرض ثم أعد التنفيذ مرة أخرى وقم بكتابة أول حرف من القيمة التي أدخلتها بالتنفيذ الأول لترى كيف تتم عملية الإكمال التلقائي، ألغي تفعيل خاصية الإكمال التلقائي كما هو موضح بالأعلى ثم أعد التنفيذ وأعد كتابة نفس الكلمة لتلاحظ توقف عمل الإكمال التلقائي.

استخدام أداة التحكم CheckBox

تسمح هذه الأداة للمستخدم أن يحدد قبوله أو رفضه لأمر ما، أي أنها تعتبر كسؤال يطرح على المستخدم والإجابة حتما ً إما نعم أو لا، مثلا موقع فيسبوك يسألنا إن كنا نريد استقبال رسائل على بريدنا الإلكتروني أم لا، حيث إن الخاصية Checked هي التي تمكننا من معرفة خيار المستخدم كما سنرى بعد قليل.

خصائص أداة التحكم CheckBox:

• AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة.
• AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته.
• Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه.
• Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
• TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
• Text: تحديد النص الذي يظهر بجانب هذه الأداة ( السؤال المطروح ).
• TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right.

أداة التحكم CheckBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره سواءاً بالرفض أو القبول.

مثال بسيط: أنشئ صفحة جديدة أضف لها الأدوات CheckBox1 ،Button1 ،Label1 أنقر على الزر Button1 مرتين واكتب الكود التالي:

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = CheckBox1.Checked.ToString();
    }

كود VB

   Protected Sub Button1_Click1(ByVal sender As Object، ByVal e As  
    System.EventArgs) Handles Button1.Click 

        Label1.Text = CheckBox1.Checked.ToString() 
    End Sub 

نفذ وقم تحديد خيار CheckBox ثم اضغط على الزر، سترى أن الخاصية Checked أعادت True، ألغي تفعيل الخيار واضغط على الزر مرة أخرى. ماهي النتيجة الآن ؟

كود الصفحة بعد إجراء تعديلات بسيطة بالخصائص كالتالي:

كود ASP.net

<div>
        <asp:CheckBox ID="CheckBox1" runat="server" Text="استقبال رسائل على الجوال ؟  "
                      TextAlign="Left"/><br />
        <asp:Button ID="Button1" runat="server" Text=" ok "
                    onclick="Button1_Click" /><br />
        <asp:Label ID="Label1" runat="server" Text="" />
    </div>

ملاحظة: منصة عمل ASP.Net تدعم الأداة CheckBoxList والتي تتيح إماكانية عمل قائمة عناصرها عبارة عن أدوات CheckBox كما سنرى في درس لاحق.

استخدام أداة التحكم RadioButton

لا تظهر هذه الأداة منفردة لوحدها إنما تكون دائما ً ضمن مجموعة حيث بإمكان المستخدم تحديد خيار واحد فقط من ضمن أدوات مجموعة ما.

خصائص أداة التحكم RadioButton:

• AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة.
• AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته.
• Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه.
• Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
• GroupName: لضم أداة RadioButton إلى مجموعة، من كل مجموعة لايمكن تحديد سوى خيار واحد فقط من أدوات RadionButton الموجودة فيها.
• TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
• Text: تحديد النص الذي يظهر بجانب هذه الأداة ( الخيار المطروح ).
• TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right.

أداة التحكم RadioButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره.

سنقوم بالمثال التالي بعرض بسيط لكيفية عمل هذه الأداة، أنشئ صفحة جديدة أضف عليها الأدوات التالية: RadioButton عدد 3، button ،Label، نعدل الخاصية Text لأدوات RadioButton بحيث تعرض كل أداة لون معين، كما يجب ( وهذا هام جدا) أن تأخذ الأدوات الثلاث السابقة نفس قيمة الـ GroupName، نضغط على الزر مرتين ونكتب الكود التالي:

كود #C

    protected void Button1_Click(object sender, EventArgs e)
    {
        string color = "";
        if (RadioButton1.Checked)
            color = RadioButton1.Text;
        if (RadioButton2.Checked)
            color = RadioButton2.Text;
        if (RadioButton3.Checked)
            color = RadioButton3.Text;
        Label1.Text = "Your Favorite color is: " + color;
    }

كود VB

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As 
    System.EventArgs) Handles Button1.Click

        Dim color As String = ""
        If RadioButton1.Checked Then
            color = RadioButton1.Text
        End If
        If RadioButton2.Checked Then
            color = RadioButton2.Text
        End If
        If RadioButton3.Checked Then
            color = RadioButton3.Text
        End If
        Label1.Text = "Your Favorite color is: " + color
    End Sub

أما كود الصفحة فهو كالتالي:

كود ASP.net

    <div>
    Favorite color ?<br />
        <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" 
            GroupName="colors"/><br />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="Green" 
            GroupName="colors"/><br />
        <asp:RadioButton ID="RadioButton3" runat="server" Text="Blue" 
            GroupName="colors"/><br />
        <asp:Button ID="Button1" runat="server" Text=" ok " 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
    </div>

قم بحذف الخاصية GroupName من الكود السابق ونفذ وجرب أن تختار أكثر من لون.