المحتوى عن 'imagebutton'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
    • HTML5
    • إطار عمل Bootstrap
  • CSS
    • Sass
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خوادم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • أساسيات استعمال الحاسوب
  • مقالات عامة

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 1 نتيجة

  1. قمنا في الدرس السابق من سلسلة "مدخل إلى 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: كود #C protected void LinkButton1_Click(object sender، EventArgs e) { Label1.Text = DateTime.Now.ToString("T"); } كود VB Protected Sub LinkButton1_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles LinkButton1.Click Label1.Text = DateTime.Now.ToString("T") End Sub كود الصفحة: كود ASP.net <div> <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">LinkButton</asp:LinkButton> <br /> <asp:Label ID="Label1" runat="server" Text="" /> </div> تقوم الأداة LinkButton وبشكل غير مرئي بتنفيذ كود جافا سكربت وعلى وجه التحديد يتم تنفيذ الطريقة doPostBack_ وهو المسؤول عن إرسال البيانات إلى الخادوم، في مثالنا السابق فإن الكود يبدو كالتالي: كود ASP.net <a id="LinkButton1" href="javascript:__doPostBack(‘LinkButton1’،’’)">Submit</a> خصائص أداة التحكم LinkButton AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command. CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على هذه الأداة. PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر على هذه الأداة. أداة التحكم LinkButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين: Click: يتم إطلاقه عند الضغط على هذه الأداة. Command: يتم إطلاقه عند الضغط على الأداة، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث. استخدام أداة التحكم HyperLink تعد هذه الأداة الطريقة الأكثر شيوعا ًوبساطة للتنقل بين الصفحات المختلفة، وعلى النقيض من الأداة LinkButton فهي لاتقوم بإرسال البيانات إلى السيرفر. خصائص أداة التحكم HyperLink: Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. ImageUrl: لتحديد مسار واسم صورة ليتم عرضها كرابط. NavigateUrl: تحديد عنوان URL يتم الانتقال إليه عند الضغط على هذه الأداة. Text: تحديد النص الذي يظهر على هذه الأداة. Target: تمكننا من فتح صفحة الرابط في نافذة جديدة بالمستعرض. ملاحظة : لو تم تحديد قيم للخاصيتين Text و ImageUrl معا ً، عندئذ سيتم عرض الصورة لأن أولويتها أعلى ولن يتم عرض النص المحدد بالخاصية Text. مثال: أنشئ صفحة جديدة، أضف أداة HyperLink وحدد خصائصها كالتالي: كود ASP.net <div> <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/img.png" NavigateUrl="~/Default14.aspx">Go to Page Defaul14 page </asp:HyperLink> </div> نفذ الصفحة السابقة ولاحظ عدم ظهور النص Go to Page Defaul14 page إنما ظهرت الصورة المحددة فقط. استخدام أداة التحكم ImageButton تؤدي نفس وظيفة الأداتين السابقتين حيث تقوم بإرسال بيانات النموذج إلى الخادوم وتظهر كصورة على صفحة الانترنت، لنتعرف بداية ًعلى خصائص هذه الأداة ثم نطبق مثال توضيحي. خصائص أداة التحكم ImageButton: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AlternateText: نص بديل يتم عرضه في حال عدم عرض الصورة المحددة. DescriptionUrl: لتحديد رابط إلى صفحة تحتوي تفاصيل عن الصورة. CommandArgument: تحديد متغير يتم إرساله إلى الحدث Command. CommandName: تحديد اسم الأمر الذي يتم إرساله إلى الحدث Command. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. ImageAlign: تحديد موقع الصورة بالنسبة لأدوات html أخرى ويمكن أن تأخذ إحدى القيم التالية: AbsBottom ،AbsMiddle ،Baseline ،Bottom ،Left ،Middle ،NotSet، Right ،TextTop ،Top. ImageUrl: لتحديد مسار واسم الصورة التي سيتم عرضها. OnClientClick: لتحديد كود يتم تنفيذه على جهاز المستخدم عند الضغط على هذه الأداة. PostBackUrl: للإنتقال إلى صفحة معينة بعد إرسال البيانات إلى الخادوم. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. أداة التحكم ImageButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدثين: Click: يتم إطلاقه عند الضغط على هذه الأداة. Command: يتم إطلاقه عند الضغط على الأداة، ويتم تمرير CommandArgument وCommandName إلى هذا الحدث. مثال: سنقوم في المثال التالي بتحديد إحداثيات مكان ضغط المستخدم على الأداة ImageButton. أنشئ صفحة جديدة ضع فيها أداة ImageButton واجعلها تعرض صورة ما عبر الخاصية ImageUrl ثم أضف أداتي Label، اضغط على ImageButton مرتين واكتب الكود التالي: كود #C protected void ImageButton1_Click(object sender، ImageClickEventArgs e) { Label1.Text = "X = " + e.X.ToString(); Label2.Text = "Y = " + e.Y.ToString(); } كود VB 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 كود الصفحة: كود ASP.net <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> ملاحظة: عند التعامل مع أي أداة تقوم بعرض الصور ينصح بشدة أن نستخدم الخاصية AlternateText لتقوم بعرض نص بديل فبعض المستخدمين يلغون خيار عرض الصور في المتصفح بهدف الحصول على سرعة أكبر في التصفح. إرسال البيانات عبر الصفحات بشكل افتراضي، عند الضغط على زر ما في الصفحة، يتم إرسالها إلى الخادوم ومعالجة البيانات ثم عرضها على نفس الصفحة، أي يحدث إعادة تحميل للصفحة ببيانات معدلة، الآن سنتعلم كيف نجعل الخادوم يعيدنا إلى صفحة أخرى لعرض النتائج بعد أن نضغط على زر ما في صفحة أولى. مثال: أنشئ صفحة جديدة سمها search.aspx أضف لها TextBox وButton، أعطي الخاصية PostBackUrl القيمة results.aspx وهي صفحة ثانية نقوم بإنشائها، هذه الخاصية كما رأينا سابقا تجعل الخادوم يعيد توجيه المتصفح إلى صفحة محددة عند الضغط على الزر، مانريده من مثالنا هذا أن يقوم المستخدم بإدخال نص ما في TextBox ثم الضغط على الزر ليقوم الخادوم بعرض نفس النص ولكن في صفحة أخرى، كود الصفحة search.aspx: كود ASP.net <div> <asp:TextBox ID="TxtSearch" runat="server"></asp:TextBox> <br /> <asp:Button ID="BtnSearch" runat="server" Text="search" PostBackUrl="~/results.aspx" /> </div> ننتقل الآن إلى الصفحة results.aspx ونضيف عليها فقط أداة Label لنعرض فيها النص المدخل في الصفحة الأولى حيث يكون الكود كالتالي: كود ASP.net <div> <asp:Label ID="LblSearch" runat="server" Text="" /> </div> وفي حدث تحميل الصفحة نكتب الكود التالي: كود #C 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); } } كود VB 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 تحليل الكود السابق: تستخدم الخاصية PreviousPage للحصول على مؤشر للصفحة السابقة التي سببت نقلنا إلى هذه الصفحة، الطريقة FindControl تعيد أداة تحكم محددة وبجميع خصائصها الحالية (ونحن نريد استرجاع قيمة الخاصية Text منها) المتغير الذي تم تمريره هو Id أداة التحكم المطلوبة، ننفذ الكود الصفحة search وندخل نص ما ثم نضغط على الزر لنرى آلية عمل الكود والخاصية PostBackUrl وكيف استطعنا الوصول لبيانات صفحة سابقة من صفحة تالية. ملاحظة: يوجد أساليب أكثر فاعلية لنقل البيانات بين صفحات الموقع مثل Cookies وSession وغيرهم وسنناقشهم بالتفصيل في دروس لاحقة إن شاء الله. تحديد الزر الإفتراضي تسمح هذه الخاصية يتحديد زر في الصفحة بحيث يتم تنفيذ الكود داخله بمجرد الضغط على مفتاح Enter من لوحة المفاتيح ودون الحاجة للضغط على الزر من خلال الماوس، تدعى هذه الخاصية defaultButton ويتم تحديدها كخاصية للنموذج. مثال: أنشئ صفحة جديدة، أضف عليها أداتي Button وأداة Label واحدة، في حدث النقر على الزر الأول اكتب الكود التالي: كود #C protected void Button1_Click(object sender، EventArgs e) { Label1.Text = "you click Button1 "; } كود VB Protected Sub Button1_Click(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = "you click Button1 " End Sub وفي حدث النقر على الزر الثاني: كود #C 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 الآن نأتي إلى بيت القصيد وهي تحديد الخاصية defaultButton التابعة للفورم وإعطائها كقيمة أحد الزرين السابقين كما في الكود التالي: كود ASP.net <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> حيث تم تحديد Button2 كزر افتراضي، نفذ الصفحة واضغط على Enter لترى مايحدث، أعد تنفيذ المثال بعد تعديل الخاصية السابقة وجعلها تساوي القيمة Button1. ملاحظة: يمكن استخدام الخاصية defaultButton مع أداة التحكم Panel، سنتعرف على هذه الأداة بالتفصيل في دروس قادمة. معالجة الحدث Command أدوات التحكم Buttons بأنواعهم الثلاثة يدعمون الحدثين Click و Command كما رأينا سابقا ً، الفرق بين هذين الحدثين هو أنه عند العمل مع Command فبإمكاننا تمرير اسم أمر ما ومتغير للأمر أيضاً وهذه الأمور غير مدعومة مع الحدث Click. مثال توضيحي: أنشئ صفحة جديدة، أضف عليها أداتي Button وأداة Label واحدة، أضف للأداتين Button الخصائص onCommand ،CommandName ،CommandArgument وفق التالي: الخاصية القيمة الأداة Button1 onCommand Button_Command CommandName Colors CommandArgument Red الأداة Button2 onCommand Button_Command CommandName Colors CommandArgument Blue وبالتالي يصبح كود الصفحة: كود ASP.net <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> نفتح ملف الكود الخلفي Default.aspx.cs ونكتب فيه الكود التالي: كود #C 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; } } } كود VB 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 لاحظ أن كلا الزرين يقوم باستدعاء نفس الكود Button_Commaen مع تحديد CommandName للقيمة colors والإختلاف الوحيد بينهما هو بالمتغير المرر حيث إن الزر الأول يرسل المتغير Red في حين أن الزر الثاني يرسل المتغير Blue، نفذ الصفحة لترى نتيجة العمل، إن العمل مع الحدث Command فعال عندما تؤدي مجموعة من الأزرار نفس الكود ولكن بمتغيرات مختلفة حيث يوفر علينا عناء إعادة كتابة الكود لو تم استخدام الحدث Click. قمنا في هذا الدرس بالتعرف على ثلاثة أدوات لإرسال بيانات النموذج إلى الخادوم وهي Button ،LinkButton ،ImageButton مع أمثلة لكل منها. سنتعرف في الدرس القادم على أداتين جديدتين لعرض الصور في ASP.NET.