ASP.NET: عرض الصور

قمنا في الدرس السابق من سلسلة "مدخل إلى 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) اكتب الكود التالي:

كود #C

    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;
        }
    }

كود VB

   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

نفذ الصفحة السابقة ليتم عرض إحدى الصور الثلاث، اضغط على زر تحديث الصفحة (أو F5) ليتم عرض صورة أخرى وبشكل عشوائي. مماسبق نلاحظ مدى بساطة التعامل مع أداة التحكم Image، في الفقرة التالية سنتعرف على أداة تستخدم أيضا لعرض الصور ولكن بخيارات ومزايا أكثر تنوعا ً.

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

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

أداة التحكم ImageMap ترتبط تلقائيا مع صف HotSpot class والذي يسمح بتحديد مناطق قابلة للنقر على الأداة ImageMap، منصة العمل ASP.Net تقدم ثلاثة صفوف من النمط HotSpot بإمكاننا التعامل معها وهي:

CircleHotSpot: تمكننا من تحديد منطقة دائرية على خريطة الصورة.
PolygonHotSpot: تمكننا من تحديد شكل غير منتظم على خريطة الصورة.
RectangleHotSpot: تمكننا من تحديد منطقة مستطيلة على خريطة الصورة.

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

AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة.
AlternateText: نص بديل يتم عرضه في حال عدم عرض الصورة المحددة.
DescriptionUrl: لتحديد رابط إلى صفحة تحتوي تفاصيل عن الصورة.
GenerateEmptyAlternateText: إسناد سلسلة فارغة كنص بديل للصورة.
HotSpotMode: تحديد السلوك الذي سيتم تنفيذه عند الضغط على منطقة من الصورة وتأخذ إحدى القيم التالية: Inactive ،Navigate ،NotSet ،PostBack.
HotSpots: تكمننا من الحصول على جميع النقاط الساخنة (HotSpots) الموجودة ضمن أداة التحكم ImageMap.
ImageAlign: تحديد موقع الصورة بالنسبة لأدوات html أخرى ويمكن أن تأخذ إحدى القيم التالية: AbsBottom ،AbsMiddle ،Baseline ،Bottom ،Left ،Middle ،NotSet، Right ،TextTop ،Top.
ImageUrl: لتحديد مسار واسم الصورة التي سيتم عرضها.
TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab.
Target: تسمح لنا بفتح الصفحة في نافذة جديدة.

أداة التحكم ImageMap تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدث Click والذي يتم إطلاقه عند الضغط على منطقة من هذه الأداة وكانت الخاصية HotSpotMode تأخذ القيمة PostBack.

مثال: سنقوم في المثال بعرض كيفية استخدام أحد جوانب أداة التحكم ImageMap، حيث سنقوم بإنشاء قائمة للتنقل بين صفحات مختلفة، أنشئ مشروع جديد وأضف أربع صفحات ولتكن أسماؤها Dafault، page1 ،page2 ،page3. أضف على الصفحة Default أداة ImageMap واجعلها تعرض صورة مناسبة للغرض السابق.

حيث سنقوم بتقسيم أداة الصورة السابقة إلى ثلاث مناطق وكل منطقة تنقلنا إلى صفحة محددة.

كود صفحة Default.aspx:

كود ASP.net

    <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>

نلاحظ من الكود السابق أن للخاصية RectangleHotSpot الخصائص الفرعية Left ،Right ،Top ،Bottom لنحدد إحداثيات المنطقة (حجم الصورة في المثال 300x30). وكل منطقة تم ربطها بصفحة معينة عبر الخاصية NavigateUrl ليتم نقل المتصفح إليها عند النقر على تلك المنطقة.

مثال آخر: بعد أن تعرفنا على كيفية استخدام الأداة ImageMap للتنقل بين الصفحات المختلفة، سنعرض هنا آلية العمل مع PostBack أي البقاء ضمن نفس الصفحة، أضف صفحة جديدة وأضف عليها TextBox وImageMap، الصورة المطلوبة ليتم عرضها.

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

كود #C

    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;
        } 
    }

كود VB

    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

في الكود السابق استقبلنا الخاصية PostBackVlaue والتي يتم تحديد قيمتها بحسب المنطقة التي يتم الضغط عليها في الأداة ImageMap كما سنرى، كود الصفحة:

كود ASP.net

    <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>

نلاحظ في الكود السابق تحديد الخاصية HotSpotMode إلى القيمة PostBack، وفي كل منطقة ساخنة تم تحديد قيمة مختلفة للخاصية PostBackValue لتمييز المنطقة التي تم النقر عليها.

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

تمكننا هذه الأداة من التعامل مع مجموعة أدوات ASP.Net دفعة واحدة، حيث يتم تطبيق سلوك ما على جميع أدوات التحكم الموجودة ضمن أداة Panel، على سبيل المثال لو تم إخفاء أداة التحكم هذه فسيختفي معها جميع الأدوات المحتوات ضمنها وكذلك لو تم إلغاء تفعيل أداة Panel فسيتم إلغاء تفعيل جميع أدوات التحكم الموجودة ضمنها وهكذا.

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

DefaultButton: تمكننا هذه الخاصية من تحديد زر افتراضي ضمن الأداة Panel بيحث يتم تنفيذ الكود داخله بمجرد الضغط على مفتاح Enter من لوحة المفاتيح.
Direction: تحديد اتجاه النص والأدوات ضمن Panel يمكن أن تأخذ إحدى القيم التالية NotSet ،LeftToRight ،RightToLeft.
GroupingText: تحديد عنوان لأداة Panel.
HorizontalAlign: تحديد المحاذاة الأفقية لمحتويات أداة Panel ويمكن أن تأخذ إحدى القيم التالية NotSet ،Justify ،Left ،Center ،Right.
ScrollBars: تمكننا من إظهار شريط تمرير أفقي أو عمودي (أو كلاهما) لأداة Panel وتأخذ إحدى القيم التالية None ،Horizontal ،Vertical ،Both ،Auto.

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

كود ASP.net

    <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>

أما الكود الذي يتم إضافته لحدث الضغط على الزر Button1 فهو:

كود #C

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

كود VB

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

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

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