Alkampfer's Place

Il blog di Gian Maria Ricci
posts - 600, comments - 1063, trackbacks - 84

My Links

News

Gian Maria Ricci
Mvp Logo
CCSVI in Multiple Sclerosis

English Blog

Tag Cloud

Article Categories

Archives

Post Categories

Image Galleries

I miei siti

Siti utili

jQuery tip #8 – caricare dinamicamente parti di pagina con jQuery.load()

Nei tip precedenti si è visto come comunicare con il server con la chiamata getJSON e restituiendo dalla pagina aspx un oggetto .net serializzato JSON. In molte situazioni è comunque conveniente formattare l’html direttamente lato server. Grazie a jQuery caricare parti di pagina dinamicamente è un gioco da ragazzi.

Lo script del tip 8 è il seguente.

$(function() {
    $('[id=btnGetData]').log('button').click(function() {
        var button = this;
        var code = $('[id=txtCode]').val();
        $('.result').load(
                '/Tip8/CustomerService.aspx [id=thecontent]',
                {
                    Code: code
                });
        return false;
    });
});

Come si può vedere per cambiare il contenuto del div principale non si fa altro che chiamare la funzione load(). In questo caso il primo parametro è la url che restituisce i dati seguita da uno spazio e poi da un selettore opzionale (in questo caso [id=thecontent]) che va ad individuare un elemento della pagina restituita dalla chiamata. Come si può notare in questo caso non c’è bisogno di una callback, perchè jQuery va direttamente a sostituire il contenuto restituito dalla chiamata all’elemento su cui si è invocata la funzione load. Lato server la pagina CustomerService ora è cosi fatta

<body>
    <form id="form1" runat="server">
        <div id="thecontent">
            <h1>Customer 
                <asp:Label ID="id" runat="server" Text="Label"></asp:Label></h1><br />
                <b>Name:</b><asp:Label ID="Name" runat="server" Text="Label"></asp:Label><br />
                <b>ContactName:</b><asp:Label ID="ContactName" runat="server" Text="Label"></asp:Label><br />
                <b>Address:</b><asp:Label ID="Address" runat="server" Text="Label"></asp:Label><br />
        </div>
    </form>
</body>
</html>

In questo caso ho creato un po di html, lato codice non si fa altro che popolare il contenuto delle label, il risultato è il seguente.

image

Come si può vedere il contenuto della pagina CustomerSErvice viene sostituito al div originale. Per maggiori dettagli potete leggere il mio terzo articolo su jQuery pubblicato su ugi.

Alk.

Tags:

Print | posted on lunedì 15 giugno 2009 17.21 | Filed Under [ jQuery ]

Comments have been closed on this topic.

Powered by: