تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الدرس الثامن والسبعون - Ajax
#1
كاتب الموضوع : أحمد جمال

بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .

في هذا الدرس الأخير حول ASP.net سنستعرض سريعاً كيفية الاستفادة من خدمات تقنية الإنترنت المعروفة باسم AJAX من خلال .net .
بداية ، راجع درسي على هذا الرابط :
http://www.vb4arab.com/vb/showthread.php?t=15

والآن ، سنبدأ في عمل تطبيقنا الأول ...

جرب عمل مربع نص لتعرض فيه الوقت الحالي ، ايضاً قم باضافة صورة لتستطيع تمميز تحديث الصفحة ، ومن ثم قم بكتابة الكود التالي في زر الأمر :
C#:

كود :
TextBox1.Text = DateTime.Now.ToString();
vb.net:

كود :
TextBox1.Text = DateTime.Now.ToString()
هل لاحظت ما يحدث ، بالفعل يتم تحديث الصفحة بالكامل ، الآن سنحاول تطبيق نفس المبدء بحيث لا يتم التأثير سوى على الجزء الذي سيتم التعديل فيه .
لذا قم بداية باضافة ScroptManager من ضمن ادوات اجاكس بالشكل التالي :


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


كود :
[color=#000080]<%@ Page Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"Default6.aspx.cs"[/color] Inherits=[color=#0000ff]"Default6"[/color] %>[/COLOR]
[color=#000080]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#000080]<html xmlns=[COLOR=#0000ff]"http://www.w3.org/1999/xhtml"[/color]>[/COLOR]
[color=#000080]<head runat=[COLOR=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<title>[/color]Untitled Page[color=#000080]</title>[/color]
[color=#000080]</head>[/color]
[color=#000080]<body>[/color]
[color=#ff8000]<form id=[COLOR=#0000ff]"form1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<div>[/color]
[color=#800080]<img src=[COLOR=#0000ff]"images/food.jpg"[/color] />[/COLOR]
[color=#000080]<asp:UpdatePanel runat=[COLOR=#0000ff]"server"[/color]>[/COLOR][color=#000080]<ContentTemplate>[/color]

[color=#000080]<br />[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:TextBox ID=[COLOR=#0000ff]"TextBox1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR][color=#000080]</asp:TextBox>[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:Button ID=[COLOR=#0000ff]"Button1"[/color] runat=[color=#0000ff]"server"[/color] onclick=[color=#0000ff]"Button1_Click"[/color]
Text=[color=#0000ff]"ShowTime"[/color] />[/COLOR]
[color=#000080]</ContentTemplate>[/color][color=#000080]</asp:UpdatePanel>[/color]

[color=#000080]</div>[/color]
[color=#ff8000]</form>[/color]
[color=#000080]</body>[/color]
[color=#000080]</html>[/color]
والآن جرب ، هل لاحظت الفارق فعلاً ؟؟

جميل ، الآن سنحاول تطبيق موضوع آخر ماذا لو افترضنا اننا نريد وضع زر الامر خارج ال update panel بحيث لا يتم تحديثه ، هذا ممكن .

فقط اسحب زر الأمر خارج ال update Panel ، وقم بكتابة الكود التالي داخل ال update panel :

كود :
[color=#000080]<Triggers>[/color]
[color=#000080]<asp:AsyncPostBackTrigger ControlID=[COLOR=#0000ff]"Button1"[/color] EventName=[color=#0000ff]"Click"[/color] />[/COLOR]
[color=#000080]</Triggers>[/color]
ليصبح الكود كاملاً بالشكل التالي :

كود :
[color=#000080]<%@ Page Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"Default6.aspx.cs"[/color] Inherits=[color=#0000ff]"Default6"[/color] %>[/COLOR]
[color=#000080]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#000080]<html xmlns=[COLOR=#0000ff]"http://www.w3.org/1999/xhtml"[/color]>[/COLOR]
[color=#000080]<head runat=[COLOR=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<title>[/color]Untitled Page[color=#000080]</title>[/color]
[color=#000080]</head>[/color]
[color=#000080]<body>[/color]

[color=#ff8000]<form id=[COLOR=#0000ff]"form1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<asp:ScriptManager ID=[COLOR=#0000ff]"ScriptManager1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]</asp:ScriptManager>[/color]
[color=#000080]<div>[/color]
[color=#800080]<img src=[COLOR=#0000ff]"images/food.jpg"[/color] />[/COLOR]
[color=#000080]<asp:UpdatePanel runat=[COLOR=#0000ff]"server"[/color]>[/COLOR][color=#000080]<ContentTemplate>[/color]

[color=#000080]<br />[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:TextBox ID=[COLOR=#0000ff]"TextBox1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR][color=#000080]</asp:TextBox>[/color]
[color=#000080]<br />[/color]

[color=#000080]</ContentTemplate>[/color]
[color=#000080]<Triggers>[/color]
[color=#000080]<asp:AsyncPostBackTrigger ControlID=[COLOR=#0000ff]"Button1"[/color] EventName=[color=#0000ff]"Click"[/color] />[/COLOR]
[color=#000080]</Triggers>[/color]
[color=#000080]</asp:UpdatePanel>[/color]
[color=#000080]<asp:Button ID=[COLOR=#0000ff]"Button1"[/color] runat=[color=#0000ff]"server"[/color] onclick=[color=#0000ff]"Button1_Click"[/color]
Text=[color=#0000ff]"ShowTime"[/color] />[/COLOR]
[color=#000080]</div>[/color]
[color=#ff8000]</form>[/color]
[color=#000080]</body>[/color]
[color=#000080]</html>[/color]
هل لاحظت الفارق مرة أخرى ؟
}}}
تم الشكر بواسطة:
#2
عودة لقواعد البيانات :

سنعود لتطبيقنا الأخير حول قواعد البيانات ، جرب وضع صورة في الصفحة ، وجرب وضع اي قيمة في حقل السعر الأقصى وقم بالضغط على Enter .
هل لاحظت ما يحدث ، ايضاً يتم تحديث الصفحة بالكامل ، في تطبيقنا التالي سنجعل التحديث يطال ال GridView فقط دون أن تتأثر باقي محتوياته .
الموضوع بسيط جداً كما جربناه ، ضع update panel ، وضع فيها ال GridView ، اضف زر امر ، ومن ثم اضف ال Triggers كما تعودنا في الدرس الماضي ، سيصبح الكود الكامل بالشكل التالي :


كود :
[color=#000080]<%@ Page Language=[COLOR=#0000ff]"C#"[/color] AutoEventWireup=[color=#0000ff]"true"[/color] CodeFile=[color=#0000ff]"Default5.aspx.cs"[/color] Inherits=[color=#0000ff]"Default5"[/color] %>[/COLOR]
[color=#000080]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#000080]<html xmlns=[COLOR=#0000ff]"http://www.w3.org/1999/xhtml"[/color]>[/COLOR]
[color=#000080]<head runat=[COLOR=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<title>[/color]Untitled Page[color=#000080]</title>[/color]
[color=#000080]</head>[/color]
[color=#000080]<body>[/color]
[color=#ff8000]<form id=[COLOR=#0000ff]"form1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]
[color=#000080]<center>[/color]
[color=#000080]<div>[/color]

[color=#000080]<asp:SqlDataSource ID=[COLOR=#0000ff]"SqlDataSource1"[/color] runat=[color=#0000ff]"server"[/color]
ConnectionString=[color=#0000ff]"<%$ ConnectionStrings:ItemsConnectionString %>"[/color]
SelectCommand=[color=#0000ff]"SELECT * FROM [Items] WHERE ([ItemPrice] [b][i]&lt;[/i][/b] @ItemPrice)"[/color]>[/COLOR]
[color=#000080]<SelectParameters>[/color]
[color=#000080]<asp:ControlParameter ControlID=[COLOR=#0000ff]"TextBox1"[/color] DefaultValue=[color=#0000ff]"0"[/color] Name=[color=#0000ff]"ItemPrice"[/color]
PropertyName=[color=#0000ff]"Text"[/color] Type=[color=#0000ff]"Int64"[/color] />[/COLOR]
[color=#000080]</SelectParameters>[/color]
[color=#000080]</asp:SqlDataSource>[/color]
[color=#000080]<br />[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:Button ID=[COLOR=#0000ff]"Button1"[/color] runat=[color=#0000ff]"server"[/color] Text=[color=#0000ff]"Button"[/color] />[/COLOR]
[b][i]&nbsp;[/i][/b][color=#000080]<asp:TextBox ID=[COLOR=#0000ff]"TextBox1"[/color] runat=[color=#0000ff]"server"[/color]>[/COLOR]1000[color=#000080]</asp:TextBox>[/color]
[color=#000080]<asp:Label ID=[COLOR=#0000ff]"Label1"[/color] runat=[color=#0000ff]"server"[/color] Text=[color=#0000ff]"البحث عن البضائع تحت سعر"[/color]>[/COLOR][color=#000080]</asp:Label>[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:ScriptManager ID=[COLOR=#0000ff]"ScriptManager1"[/color] runat=[color=#0000ff]"server"[/color] EnablePartialRendering=[color=#0000ff]"true"[/color]>[/COLOR]
[color=#000080]</asp:ScriptManager>[/color]
[color=#000080]<br />[/color]
[color=#000080]<asp:UpdatePanel ID=[COLOR=#0000ff]"UpdatePanel1"[/color] runat=[color=#0000ff]"server"[/color] >[/COLOR]
[color=#000080]<ContentTemplate>[/color]
[color=#000080]<asp:GridView ID=[COLOR=#0000ff]"GridView1"[/color] runat=[color=#0000ff]"server"[/color] AutoGenerateColumns=[color=#0000ff]"False"[/color]
DataKeyNames=[color=#0000ff]"ID"[/color] DataSourceID=[color=#0000ff]"SqlDataSource1"[/color] AllowPaging=[color=#0000ff]"True"[/color] AllowSorting=[color=#0000ff]"True"[/color]
AutoGenerateDeleteButton=[color=#0000ff]"True"[/color] AutoGenerateEditButton=[color=#0000ff]"True"[/color]
AutoGenerateSelectButton=[color=#0000ff]"True"[/color] BackColor=[color=#0000ff]"White"[/color] BorderColor=[color=#0000ff]"#E7E7FF"[/color]
BorderStyle=[color=#0000ff]"None"[/color] BorderWidth=[color=#0000ff]"1px"[/color] CellPadding=[color=#0000ff]"3"[/color] GridLines=[color=#0000ff]"Horizontal"[/color]
onselectedindexchanged=[color=#0000ff]"GridView1_SelectedIndexChanged"[/color]>[/COLOR]
[color=#000080]<FooterStyle BackColor=[COLOR=#0000ff]"#B5C7DE"[/color] ForeColor=[color=#0000ff]"#4A3C8C"[/color] />[/COLOR]
[color=#000080]<RowStyle BackColor=[COLOR=#0000ff]"#E7E7FF"[/color] ForeColor=[color=#0000ff]"#4A3C8C"[/color] />[/COLOR]
[color=#000080]<Columns>[/color]
[color=#000080]<asp:CommandField ShowSelectButton=[COLOR=#0000ff]"True"[/color] />[/COLOR]
[color=#000080]<asp:BoundField DataField=[COLOR=#0000ff]"ID"[/color] HeaderText=[color=#0000ff]"ID"[/color] InsertVisible=[color=#0000ff]"False"[/color]
ReadOnly=[color=#0000ff]"True"[/color] SortExpression=[color=#0000ff]"ID"[/color] />[/COLOR]
[color=#000080]<asp:BoundField DataField=[COLOR=#0000ff]"ItemName"[/color] HeaderText=[color=#0000ff]"ItemName"[/color]
SortExpression=[color=#0000ff]"ItemName"[/color] />[/COLOR]
[color=#000080]<asp:BoundField DataField=[COLOR=#0000ff]"ItemPrice"[/color] HeaderText=[color=#0000ff]"ItemPrice"[/color]
SortExpression=[color=#0000ff]"ItemPrice"[/color] />[/COLOR]
[color=#000080]<asp:BoundField DataField=[COLOR=#0000ff]"ItemPicture"[/color] HeaderText=[color=#0000ff]"ItemPicture"[/color]
SortExpression=[color=#0000ff]"ItemPicture"[/color] />[/COLOR]
[color=#000080]</Columns>[/color]
[color=#000080]<PagerStyle BackColor=[COLOR=#0000ff]"#E7E7FF"[/color] ForeColor=[color=#0000ff]"#4A3C8C"[/color]
HorizontalAlign=[color=#0000ff]"Right"[/color] />[/COLOR]
[color=#000080]<SelectedRowStyle BackColor=[COLOR=#0000ff]"#738A9C"[/color] Font-Bold="True"
ForeColor=[color=#0000ff]"#F7F7F7"[/color] />[/COLOR]
[color=#000080]<HeaderStyle BackColor=[COLOR=#0000ff]"#4A3C8C"[/color] Font-Bold="True"
ForeColor=[color=#0000ff]"#F7F7F7"[/color] />[/COLOR]
[color=#000080]<AlternatingRowStyle BackColor=[COLOR=#0000ff]"#F7F7F7"[/color] />[/COLOR]
[color=#000080]</asp:GridView>[/color]
[color=#000080]</ContentTemplate>[/color]
[color=#000080]<Triggers>[/color]
[color=#000080]<asp:AsyncPostBackTrigger EventName=[COLOR=#0000ff]"Click"[/color] ControlID=[color=#0000ff]"Button1"[/color] />[/COLOR]
[color=#000080]</Triggers>[/color]
[color=#000080]</asp:UpdatePanel>[/color]
[color=#000080]<br />[/color]
[color=#000080]<br />[/color]
[color=#000080]<br />[/color]

[color=#000080]</div>[/color]
[color=#000080]</center>[/color]
[color=#ff8000]</form>[/color]
[color=#000080]</body>[/color]
[color=#000080]</html>[/color]
الآن فقط قم بتجربة الصفحة ، ولاحظ الفارق .
}}}
تم الشكر بواسطة:
#3
AJAX Toolkit :

توفر مايكروسوفت مجموعة جميلة من الأدوات التي تساعدك على تطبيق مبادئ AJAX ، يمكنك استعراض الادوات المقدمة هنا :
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
يمكنك معرفة كل شيء عن اي واحدة فيهم عن طريق الفيديوهات التعليمية ، تجدها هنا :
http://www.asp.net/ajax/ajaxcontroltoolkit/
فقط ، كان هذا درسنا الاخير حول ASP.net.

والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .
}}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم