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.
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: jQuery