المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الدرس الثامن والسبعون : Ajax - دورة .net 2008


khaledbelal
03-11-2010, 07:44 PM
بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .

في هذا الدرس الأخير حول 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 ، وقم بوضع مربع النص وزر الأمر بداخلها مع ترك الصورة فقط في الخارج ، سيكون كود الصفحة بالشكل التالي :


<%@ Page ********="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<****>
<form id="form1" runat="server">
<div>
<img src="images/food.jpg" />
<asp:UpdatePanel runat="server"><ContentTemplate>

<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="ShowTime" />
</ContentTemplate></asp:UpdatePanel>

</div>
</form>
</****>
</html>

والآن جرب ، هل لاحظت الفارق فعلاً ؟؟

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

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

<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>

ليصبح الكود كاملاً بالشكل التالي :

<%@ Page ********="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<****>

<form id="form1" runat="server">
<asp:******Manager ID="******Manager1" runat="server">
</asp:******Manager>
<div>
<img src="images/food.jpg" />
<asp:UpdatePanel runat="server"><ContentTemplate>

<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="ShowTime" />
</div>
</form>
</****>
</html>

هل لاحظت الفارق مرة أخرى ؟

عودة لقواعد البيانات :

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


<%@ Page ********="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<****>
<form id="form1" runat="server">
<center>
<div>

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

</div>
</center>
</form>
</****>
</html>

الآن فقط قم بتجربة الصفحة ، ولاحظ الفارق .

:

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

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