AJAX ASP.Net veebirakendustes (Veebistuudiumi materjalist)

Järgnev jutt on jällegi pärit "Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio 2008 ja SQL Server 2008 baasil" õppematerjalist (lk 415-417)

AJAX

AJAX - Asynchronous JavaScript And Xml on raamistik, mis võimaldab asünkroonset andmevahetust kliendi e. veebisirvija ja serveri vahel. Kui AJAX-it ei kasuta siis iga serveri poole pöördumisega renderdatakse terve lehekülg uuesti ning laetakse terve lehekülg uuesti ka veebisirvijasse. Seda protsessi on veebilehte kasutades hästi näha sest iga klõpsu peale veebivormil lehekülg korraks vilksatab ning laetakse uuesti. Kasutades ajaksit värskendatakse lehekülge osaliselt. See saavutatakse tänu ASP.NET ja JavaScripti koostööle, kus andmevahetus käib XML vormingus. Java võimaldab lehekülje osalist muutmist kasutades DHTMLi ning ASP.NETi on lisatud võimalus lehekülje osaliseks renderdamiseks.

AJAX on sisse ehitatud .NET raamistik 3.5e ning saadaval ka eraldi .NET raamistik 2.0 tarbeks.

AJAXi kasutamine

Kõik AJAXiga seotud vahendid paiknevad Visual Studio Tööriistades (Toolbox) AJAX Extension kategoorias.

AJAXi kasutamiseks tuleb igale lehele lisada üks ja ainult üks ScriptManager. ScriptManageri ülesandeks on kasutaja browserisse vajalike JavasCriptide üleslaadimine ning andmevahetuse korraldamine veebisirvija ja serveri vahel.

    <asp:ScriptManager ID="sm" runat="server" />

Kõik osad, veebivormist, mis vajavad osalist uuendamist tuleb paigutada UpdatePanel plokkidesse. Selliseid elemente võib lehel olla mitu ning iga UpdatePanel plokki on võimalik värskendada vastavalt vajadusele.

Värskendamise ajal on võimalik kuvada informatiivseid teated UpdateProgress elemendi abil. Timer element võimaldab sooritada ajastatud tegevusi.

Järgnevalt väike näide veebilehest, mis kasutab AJAX funktsionaalsust GridViews olevate andmete filtreerimiseks.

<asp:ScriptManager ID="sm" runat="server" />
<p>Staatus:
<asp:UpdatePanel ID="u1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddl1" runat="server"
 AutoPostBack="True">
            <asp:ListItem Value="True">Tehtud</asp:ListItem>
            <asp:ListItem Selected="True" Value="False">
Tegemata</asp:ListItem>
        </asp:DropDownList>
    </ContentTemplate> 
</asp:UpdatePanel></p>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>Uuendan andmeid .....</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="u2" runat="server">
    <ContentTemplate>
       <asp:GridView ID="GridView1" runat="server"
            DataKeyNames="Kood" DataSourceID="sds1" 
            AllowSorting="True" >
            <Columns>
                <asp:CommandField ShowEditButton="True" />
            </Columns>
        </asp:GridView>
<asp:SqlDataSource ID="sds1" runat="server" 
     ConnectionString="<%$ ConnectionStrings:toodConn %>" 
     SelectCommand="SELECT [Kood], [Nimi], [Tehtud] FROM
[tooderegister] WHERE Tehtud = @Tehtud" 
    UpdateCommand="UPDATE [tooderegister] 
SET [Nimi] = @Nimi, [Tehtud] = @Tehtud WHERE [Kood] = @Kood">
<SelectParameters>
    <asp:ControlParameter ControlID="ddl1" Name="Tehtud" 
         PropertyName="SelectedValue" Type="Boolean" />
    </SelectParameters>
    <UpdateParameters>
         <asp:Parameter Name="Nimi" Type="String" />
         <asp:Parameter Name="Tehtud" Type="Boolean" />
         <asp:Parameter Name="Kood" Type="Int32" />
    </UpdateParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>

AJAX Control Toolkit

Kui standardsetest vahenditest jääb väheseks siis saate lisaks laadida endale AJAX Control Toolkit’i. http://www.asp.net/ajax/ajaxcontroltoolkit

Juhendi Control Toolkiti paigaldamiseks leiate aadressilt http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Walkthrough/Setup.aspx Samal leheküljel on ka näiteid kõigi Toolkiti koosseisu kuuluvate elementide kasutamise kohta.