في الدروس السابقة قمنا بدراسة الأدوات القياسية والتي لابد من استخدامها في معظم تطبيقات ASP.Net، سنتناول في الدروس القادمة أدوات تحكم أكثر تخصصا وتعرف مجموعة الأدوات هذه باسم Rich controls.

في هذا الدرس ستتعلم كيف تسمح للمتصفحين بأن يرفعوا ملفاتهم على الموقع، كأن يقوموا مثلا برفع صور، ملفات فيديو ... إلخ.

رفع الملفات إلى الموقع

نستخدم أداة التحكم FileUpload لرفع الملفات إلى الموقع، ونقوم بتحديد المكان الذي سيتم تخزين ملفات المستخدمين فيه، إما مجلد داخل الموقع أو ضمن قاعدة بيانات الموقع وسنستعرض كلا الحالتين.

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

• Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
• FileBytes: للحصول على محتويات الملف كمصفوفة بايتات.
• FileContent: للحصول على محتويات الملف كمجرى stream.
• FileName: الحصول على اسم الملف.
• HasFile: تعيد True عندما يتم رفع الملف.
• PostedFile: تعيد الملف المرفوع مغلف بغرض من الصف HttpPostedFile.

كما أن أداة التحكم FileUpload تدعم الطرائق التالية:

• Focus: تسمح بوضع التركيز على هذه الأداة.
• SaveAs: تقوم بتخزين الملف (المراد رفعه) على الموقع.

تقوم الخاصية PostedFile بتغليف الملف المرفوع بغرض HttpPostedFile، هذا الأمر يسمح بالحصول على معلومات إضافية حول الملف.

خصائص الصف HttpPostedFile

• ContentLenght: لمعرفة حجم الملف بالبايتات.
• ContentType: لمعرفة نوع الملف ( اللاحقة).
• FileName: لمعرفة اسم الملف.
• InputStream: الحصول على الملف كمجرى stream.

كما أن الصف HttpPostedFile يدعم الطريقة SaveAs والتي تقوم بتخزين الملف على الموقع.

لاحظ أن الصف HttpPostedFile يقدم بعض الخصائص المتوفرة مسبقا مع أداة التحكم FileUpload والتي يمكن التعامل معها دون الحاجة للصف HttpPostedFile، على سبيل المثال للحصول على اسم الملف يمكن اتباع أحد الأسلوبين:

• FileUpload.FileName
• HttpPostedFile.FileName

كما أن الطريقة SaveAs موجودة في الصف HttpPostedFile على الرغم من توافرها مع أداة التحكم FileUpload بشكل صريح.

مثال:

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

    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.HasFile)
            {
                string path = "~/uploads/" + FileUpload1.FileName;
                FileUpload1.SaveAs(MapPath(path));
                Label1.Text = "File Uploaded successfuly...";
            }
        }
        catch (Exception ex) { }
    }

كود VB

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

        If (FileUpload1.HasFile) Then
            Dim filePath As String = "~/uploads/" & FileUpload1.FileName
            FileUpload1.SaveAs(MapPath(filePath))
        End If
    End Sub

كود الصفحة يجب أن يكون كالتالي:

كود ASP.net

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
    </div>

نفذ التطبيق السابق وحاول رفع ملف ما ( صورة مثلا)، أغلق التنفيذ. يجب أن يكون الملف قد أضيف للمجلد Upload، إن لم تره اضغط على تحديث ملفات الموقع كالتالي:

في المثال السابق يستطيع المستخدم أن يرفع أي نوع كان من الملفات، سنقوم في المثال التالي بتحديد الأنماط التي نسمح للمستخدم بأن يقوم برفعها ( فقط بعض أنواع الصور).

مثال:

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

كود #C

    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            if (FileUpload1.HasFile)
            {
                if (CheckFileType(FileUpload1.FileName))
                {
                    string path = "~/uploads/" + FileUpload1.FileName;
                    FileUpload1.SaveAs(MapPath(path));
                    Label1.Text = "File Uploaded successfuly...";
                }
            }
        }
        catch (Exception ex) { }
    }

كود VB

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

        If (FileUpload1.HasFile) Then
            If (CheckFileType(FileUpload1.FileName)) Then
                Dim filePath As String = "~/uploads/" & FileUpload1.FileName
                FileUpload1.SaveAs(MapPath(filePath))
            End If
        End If
    End Sub

قم باستدعاء فضاء الأسماء الخاص بالدخل والخرج IO، حيث نضيف الكود التالي أعلى الصفحة:

كود #C

using System.IO;

كود VB

Imports System.IO

أما الدالة CheckFileType المسؤولة عن فحص نوع الملف فهي:

كود #C

    bool CheckFileType(string fileName)
    {
        string ext = Path.GetExtension(fileName);
        switch (ext.ToLower())
        {
            case ".gif":
                return true;
            case ".png":
                return true;
            case ".jpg":
                return true;
            case ".jpeg":
                return true;
            default:
                return false;
        }
    }

كود VB

    Function CheckFileType(ByVal fileName As String) As Boolean
        Dim ext As String = Path.GetExtension(fileName)
        Select Case ext.ToLower()
            Case ".gif"
                Return True
            Case ".png"
                Return True
            Case ".jpg"
                Return True
            Case ".jpeg"
                Return True
            Case Else
                Return False
        End Select
    End Function

كود الصفحة السابقة:

كود ASP.net

    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Upload" 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
    </div>

نفذ التطبيق السابق وحاول أن ترفع ملف ما مغاير للأنواع المحددة، ستلاحظ عدم رفع الملف، أعد التجربة مع أحد أنواع الصور السابقة لترى قبول عملية الرفع.

رفع الملفات إلى قاعدة بيانات

حيث نقوم بتخزين الملفات في قاعدة بيانات عوضا عن مجلد عادي، هذا الأسلوب يسبب كبر هائل بحجم قاعدة البيانات وبالتالي صعوبة وبطء في نقلها والتعامل معها، كما أننا نحتاج لتحويل الملفات إلى بيانات ثنائية (0,1) لنتمكن من تخزينها في الجدول، الأسلوب الأفضل والمتبع في المواقع هو رفع الملفات إلى مجلد عادي وتخزين أسماء الملفات المرفوعة ضمن قاعدة البيانات مع تخزين معلومات أخرى عنها كتاريخ الرفع مثلا. على العموم لن ندخل بهذه التفاصيل الآن على اعتبار أننا لم نتطرق لموضوع قواعد البيانات، سيكون لنا عودة لمناقشة كيفية رفع الملفات بأسلوب احترافي في الدروس المتقدمة.

ملاحظة: يتم قبول رفع الملفات ذات الأحجام أصغر من 4 ميغابايت ( عد للمثال الأول وحاول رفع ملف أكبر من هذا الحجم لترى عدم قبول العملية )، ولتغيير الحجم الأقصى المسموح به لكل ملف، نفتح الملف Web.config ونضيف كود السطر الرابع:

كود XML

<configuration>
	<system.web>
		<compilation debug="true" targetFramework="4.0"/>
              <httpRuntime maxRequestLength="10240"/>
	</system.web>
</configuration>

حيث تم تحديد الحجم الأعظمي بـ 10240 كيلو بايت ( أي 10 ميغا بايت ).

قمنا في الدرس السابق من سلسلة "مدخل إلى ASP.NET" بالتعرف على كيفية إرسال بيانات النماذج إلى الخادوم بواسطة أدوات الأزرار المتنوعة. سنقوم في هذا الدرس بالتعرف على أداتين لعرض الصور في ASP.NET.

منصة عمل ASP.NET تقدم أداتين لعرض الصور وهي Image وImageMap. تقوم أداة التحكم Image بعرض الصور بأسلوب بسيط، في حين أن الأداة ImageMap تقدم مزايا أكثر تعقيدا، سنتعرف على كلا الأداتين في الفقرات التالية.

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

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

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

• AlternateText: نص بديل يتم عرضه في حال عدم عرض الصورة المحددة.
• DescriptionUrl: لتحديد رابط إلى صفحة تحتوي تفاصيل عن الصورة.
• GenerateEmptyAlternateText: إسناد سلسلة فارغة كنص بديل للصورة.
• ImageAlign: تحديد موقع الصورة بالنسبة لأدوات html أخرى ويمكن أن تأخذ إحدى القيم التالية: AbsBottom ،AbsMiddle ،Baseline ،Bottom ،Left ،Middle ،NotSet ،Right ،TextTop ،Top.
• ImageUrl: لتحديد مسار واسم الصورة التي سيتم عرضها.

مثال: سنقوم في المثال التالي بجعل أداة Image تقوم بعرض واحدة من ثلاث صور وبشكل عشوائي، أنشئ صفحة جديدة وأضف عليها أداة Image، أنشئ ضمن المشروع مجلد جديد باسم images أضف عليه ثلاث صور ولتكن أسماؤها pic1 ،pic2 ،pic3 افتح ملف الكود الخلفي أي الصفحة Default.aspx.cs وفي حدث تحميل الصفحة (Page_Load) اكتب الكود التالي:

    protected void Page_Load(object sender، EventArgs e)
    {
        Random rnd = new Random();
        switch (rnd.Next(3))
        {
            case 0:
                Image1.ImageUrl = "~/images/pic1.png";
                Image1.AlternateText = "picture1";
                break;
            case 1:
                Image1.ImageUrl = "~/images/pic2.png";
                Image1.AlternateText = "picture2";
                break;
            case 2:
                Image1.ImageUrl = "~/images/pic3.png";
                Image1.AlternateText = "picture3";
                break;
        }
    }

   Protected Sub Page_Load(ByVal sender As Object، ByVal e As EventArgs) 
    Handles  Me.Load 

    Dim rnd As New Random() 
    Select Case rnd.[Next](3) 
        Case 0 
            Image1.ImageUrl = "~/images/pic1.bmp" 
            Image1.AlternateText = "picture1" 
        Exit Select 
        Case 1 
            Image1.ImageUrl = "~/images/pic2.jpg" 
            Image1.AlternateText = "picture2" 
        Exit Select 
        Case 2 
            Image1.ImageUrl = "~/images/pic3.bmp" 
            Image1.AlternateText = "picture3" 
        Exit Select 
        End Select 
    End Sub 

    <div>
        <asp:ImageMap ID="ImageMap1" runat="server" 
                      ImageUrl="~/images/navigationBar.jpg">

        <asp:RectangleHotSpot NavigateUrl="~/page1.aspx" Left="0" Top="0" 
               Right="100" Bottom="30" AlternateText="go to page1" />

        <asp:RectangleHotSpot NavigateUrl="~/page2.aspx" Left="100" Top="0" 
               Right="200" Bottom="30" AlternateText="go to page2" />

        <asp:RectangleHotSpot NavigateUrl="~/page3.aspx" Left="200" Top="0" 
               Right="300" Bottom="30" AlternateText="go to page3" />

        </asp:ImageMap>
    </div>

    protected void ImageMap1_Click(object sender، ImageMapEventArgs e)
    {
        switch (e.PostBackValue)
        {
            case "ToUpper":
                TextBox1.Text = TextBox1.Text.ToUpper();
                break;
            case "ToLower":
                TextBox1.Text = TextBox1.Text.ToLower();
                break;
            case "Erase":
                TextBox1.Text = String.Empty;
                break;
        } 
    }

    Select Case e.PostBackValue 
        Case "ToUpper" 
            TextBox1.Text = TextBox1.Text.ToUpper() 
        Exit Select 
        Case "ToLower" 
            TextBox1.Text = TextBox1.Text.ToLower() 
        Exit Select 
        Case "Erase" 
            TextBox1.Text = [String].Empty 
        Exit Select 
    End Select 

    <div>

        <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" 
            ImageUrl="~/images/textCase.jpg" onclick="ImageMap1_Click">

        <asp:RectangleHotSpot PostBackValue="ToUpper" Left="0" Top="0" Right="100" 
                              Bottom="30" AlternateText="ToUpper" />

        <asp:RectangleHotSpot PostBackValue="ToLower" Left="100" Top="0" 
                              Right="200" Bottom="30" AlternateText="ToLower" />

        <asp:RectangleHotSpot PostBackValue="Erase" Left="200" Top="0" Right="300" 
                              Bottom="30" AlternateText="Erase" />
        </asp:ImageMap>

        <br />

        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" />
        
    </div>

    <div>

    <asp:Panel id="pnlContact" GroupingText="Contact Information" Runat="server">
        <asp:Label id="lblFirstName" Text="First Name:" 
                   AssociatedControlID="txtFirstName" Runat="server" />
        <br />
        <asp:TextBox id="txtFirstName" AutoCompleteType="FirstName" Runat="server" 
                     />
        <br /><br />
        <asp:Label id="lblLastname" Text="Last Name:" 
                   AssociatedControlID="txtLastName" Runat="server" />
        <br />
        <asp:TextBox id="txtLastName" AutoCompleteType="LastName" Runat="server" 
                     />
        <br /><br />
        <asp:Button id="btnSubmit" Text="Submit" Runat="server" />
    </asp:Panel>

    <br />
    <asp:Button ID="Button1" runat="server" Text="Visible" onclick="Button1_Click" 
                />
    </div>

    protected void Button1_Click(object sender، EventArgs e)
    {
        pnlContact.Visible = !pnlContact.Visible;
    }

    Protected Sub Button1_Click(ByVal sender As Object، ByVal e As EventArgs) 
        pnlContact.Visible = Not pnlContact.Visible 
    End Sub  

قمنا في الدرس السابق من سلسلة "مدخل إلى ASP.NET" بالتعرف على عناصر التحكم الأساسية المضمنة في منصة العمل ASP.NET. في هذا الدرس سنتعرف على كيفية إرسال بيانات النماذج إلى الخادوم بواسطة أدوات الأزرار المتنوعة.

تزودنا منصة عمل ASP.Net بثلاث أدوات لإرسال بيانات النموذج إلى الخادوم وهي Button ،LinkButton ،ImageButton وهم يؤدون نفس الوظيفة ولكن لكل منهم مظهر وبعض الخصائص التي تميزه عن غيره.

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

تقوم هذه الأداة عند النقر عليها بإرسال بيانات الصفحة إلى الخادوم لتتم معالجتها كما يتم تنفيذ الكود الموجود ضمن الحدث Click الخاص بهذه الأداة، يقوم المثال التالي بعرض الوقت الحالي في أداة Label عند النقر على الزر Button، أنشئ صفحة جديدة أضف لها Button وLabel اضغط على الزر مرتين واكتب الكود التالي:

كود #C

protected void Button1_Click(object sender، EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString("T");
    }

كود VB

Protected Sub Button1_Click(ByVal sender As Object، ByVal e As  
  System.EventArgs)  Handles Button1.Click
     Label1.Text = DateTime.Now.ToString("T")
End Sub

كود الصفحة كاملا ً:

كود ASP.net

    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" 
                    onclick="Button1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text="" />
    </div>

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

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

• AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة.
• CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command.
• CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command.
• Enabled: تفعيل أو إلغاء تفعيل هذه الأداة.
• OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على الزر.
• PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم.
• TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
• Text: تحديد النص الذي يظهر على هذه الأداة.
• UseSubmitBehavior: تمكننا من استخدام الجافا سكربت لإرسال بيانات النموذج.

أداة التحكم Button تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين:

• Click: يتم إطلاقه عند الضغط على الزر.
• Command: يتم إطلاقه عند الضغط على الزر، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث.

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

تؤدي نفس عمل الأداة Button ولكنها تختلف من حيث المظهر فهي تبدو كرابط وليس كزر وبالتالي يمكن تحديد صفحة للانتقال إليها عبر هذه الأداة،  لنقم بتنفيذ نفس المثال السابق ولكن نستبدل الأداة Button بالأداة LinkButton، الكود الذي يتم تنفيذه عند الضغط على LinkButton:

    protected void LinkButton1_Click(object sender، EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString("T");
    }

    Protected Sub LinkButton1_Click(ByVal sender As Object، ByVal e As 
    System.EventArgs) Handles LinkButton1.Click

        Label1.Text = DateTime.Now.ToString("T")
    End Sub

    <div>
        <asp:LinkButton ID="LinkButton1" runat="server" 
                   onclick="LinkButton1_Click">LinkButton</asp:LinkButton>
        <br />
        <asp:Label ID="Label1" runat="server" Text="" />
    </div>

<a id="LinkButton1" href="javascript:__doPostBack(‘LinkButton1’،’’)">Submit</a>

    <div>
        <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/img.png" 
                       NavigateUrl="~/Default14.aspx">Go to Page Defaul14 page 
        </asp:HyperLink>
    </div>

    protected void ImageButton1_Click(object sender، ImageClickEventArgs e)
    {
        Label1.Text = "X = " + e.X.ToString();
        Label2.Text = "Y = " + e.Y.ToString();
    }

      Protected Sub ImageButton1_Click(ByVal sender As Object، ByVal e As 
     System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click

        Label1.Text = "X = " + e.X.ToString()
        Label2.Text = "Y = " + e.Y.ToString()
    End Sub

    <div>
        <asp:ImageButton ID="ImageButton1" runat="server"
              ImageUrl="~/images/img.png" 
            onclick="ImageButton1_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""/>
        <asp:Label ID="Label2" runat="server" Text=""/>
    </div>

    <div>
        <asp:TextBox ID="TxtSearch" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="BtnSearch" runat="server" Text="search" 

                    PostBackUrl="~/results.aspx" />
    </div>

    <div>
        <asp:Label ID="LblSearch" runat="server" Text="" />
    </div>

    protected void Page_Load(object sender، EventArgs e)
    {
        if (PreviousPage != null)
        {
            TextBox txtSearch = (TextBox)PreviousPage.FindControl("TxtSearch");
            LblSearch.Text = String.Format("Search for: {0}"، txtSearch.Text);
        }
    }

    Protected Sub Page_Load(ByVal sender As Object، ByVal e As System.EventArgs)   
    Handles Me.Load 

        If PreviousPage IsNot Nothing Then 
            Dim txtSearch As TextBox = 
            DirectCast(PreviousPage.FindControl("TxtSearch")، TextBox) 
            LblSearch.Text = [String].Format("Search for: {0}"، txtSearch.Text) 
        End If 
    End Sub 

    protected void Button1_Click(object sender، EventArgs e)
    {
        Label1.Text = "you click Button1 ";
    }

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

        Label1.Text = "you click Button1 " 
    End Sub 

    protected void Button2_Click(object sender، EventArgs e)
    {
        Label1.Text = "you click Button2 ";
    }

    Protected Sub Button2_Click(ByVal sender As Object، ByVal e As 
    System.EventArgs) Handles Button2.Click 

        Label1.Text = "you click Button2 " 
    End Sub 

    <form id="form1" runat="server" defaultbutton="Button2">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" 
                    onclick="Button1_Click" />
        <br />
        <asp:Button ID="Button2" runat="server" Text="Button" 
                    onclick="Button2_Click" />
        <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    </form>

    <div>
        <asp:Button ID="Button1" runat="server" Text="Red" 
            oncommand="Button_Command" 
            CommandName="colors"
            CommandArgument="Red"/>
        <asp:Button ID="Button2" runat="server" Text="Blue" 
            oncommand="Button_Command"
            CommandName="colors"
            CommandArgument="Blue"/>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>

    protected void Button_Command(object sender، CommandEventArgs e)
    {
        if (e.CommandName == "colors")
        {
            switch (e.CommandArgument.ToString())
            {
                case "Red":
                    Label1.Text = "RED";
                    break;
                case "Blue":
                    Label1.Text = "BLUE";
                    break;
            }
        }
    }

    Protected Sub Button_Command(ByVal sender As Object، ByVal e As   
    CommandEventArgs) 

    If e.CommandName = "colors" Then 
        Select Case e.CommandArgument.ToString() 
            Case "Red" 
                Label1.Text = "RED" 
            Exit Select 
            Case "Blue" 
                Label1.Text = "BLUE" 
            Exit Select 
        End Select 
    End If  
    End Sub  

هذا أول درس من سلسلة "مدخل إلى 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 من الكود السابق ونفذ وجرب أن تختار أكثر من لون.