الدرس الثامن والسبعون : Ajax - دورة .net 2008 - منتدى رياض الجنة - Riad Al-Ganah

khaledbelal · #1 03-11-2010, 07:44 PM

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

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

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

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

كود PHP:


			
TextBox1.Text = DateTime.Now.ToString();

vb.net:

كود PHP:


			
TextBox1.Text = DateTime.Now.ToString()

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


			
<%@ 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 كما تعودنا في الدرس الماضي ، سيصبح الكود الكامل بالشكل التالي :

كود بلغة 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] &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.

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الدرس السادس والسبعون : 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