البحث في الموقع

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