#1
|
||||
|
||||
الدرس الثامن والسبعون : Ajax - دورة .net 2008
بسم الله الرحمن الرحيم . السلام عليكم ورحمة الله وبركاته . في هذا الدرس الأخير حول ASP.net سنستعرض سريعاً كيفية الاستفادة من خدمات تقنية الإنترنت المعروفة باسم AJAX من خلال .net . بداية ، راجع درسي على هذا الرابط : http://www.vb4arab.com/vb/showthread.php?t=15 والآن ، سنبدأ في عمل تطبيقنا الأول ... جرب عمل مربع نص لتعرض فيه الوقت الحالي ، ايضاً قم باضافة صورة لتستطيع تمميز تحديث الصفحة ، ومن ثم قم بكتابة الكود التالي في زر الأمر : C#: كود PHP:
كود PHP:
لذا قم بداية باضافة ScroptManager من ضمن ادوات اجاكس بالشكل التالي : الآن قم بسحب UpdatePanel ، وقم بوضع مربع النص وزر الأمر بداخلها مع ترك الصورة فقط في الخارج ، سيكون كود الصفحة بالشكل التالي : كود بلغة HTML:
<%@ 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 : كود بلغة HTML:
<Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> كود PHP:
عودة لقواعد البيانات : سنعود لتطبيقنا الأخير حول قواعد البيانات ، جرب وضع صورة في الصفحة ، وجرب وضع اي قيمة في حقل السعر الأقصى وقم بالضغط على Enter . هل لاحظت ما يحدث ، ايضاً يتم تحديث الصفحة بالكامل ، في تطبيقنا التالي سنجعل التحديث يطال ال GridView فقط دون أن تتأثر باقي محتوياته . الموضوع بسيط جداً كما جربناه ، ضع update panel ، وضع فيها ال GridView ، اضف زر امر ، ومن ثم اضف ال Triggers كما تعودنا في الدرس الماضي ، سيصبح الكود الكامل بالشكل التالي : كود بلغة HTML:
<%@ 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] < @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" /> <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. والله الموفق ... والسلام عليكم ورحمة الله وبركاته .
|
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
الدرس السادس والسبعون : ASP.net - الجزء الثالث - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 10 | 04-20-2010 02:25 PM |
الدرس الخامس والسبعون : ASP.net - الجزء الثاني - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 03-11-2010 06:55 PM |
الدرس الرابع والسبعون : ASP.net - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 03-11-2010 06:44 PM |
الدرس الثاني والسبعون : مقدمة إلى Mono - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 03-11-2010 06:31 PM |
الدرس الواحد والسبعون : XML Commenting - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 03-11-2010 06:29 PM |