ASP.NET caricare pagina parziale senza UpdatePanel / Con jQuery

Question

Ho una pagina ASPX .In cima io sono la visualizzazione 5 categorie (Es: Penna, Libro, scarpe, mobili, specchio) Quando clicco su una delle categorie, voglio mostrare i prodotti in quella categoria sotto l'intestazione. Non voglio ricaricare l'intera pagina per this.I vogliono mantenere la mia pagina così com'è (L'intestazione, piè di pagina e pannelli laterali sarebbe) quando un clic succede se non il posto centro dell'immagine (può essere un DIV o tabella per mostrare Prodotto). Che cosa è il modo migliore per fare questo? .Io non voglio andare per le panel.I aggiornamento ASP.NET Ajax sto già lì utilizzando jQuery nel mio project.So è comunque di fare questo con jQuery? Si prega di consulenza Ringraziamenti in anticipo

Answer 1

Come Kirtan accennato, la risposta più semplice per utilizzare un pannello di aggiornamento.

Se non si vuole seguire questa strada, quindi è possibile utilizzare jQuery per fare chiamate Ajax a un IHttpHandler che restituisce i dati necessari per popolare il pannello che si desidera aggiornare.

I passi sarebbe andato come segue:

• utilizzare jQuery per chiamare ".ashx" gestore di Ajax.
• Avere il vostro file ".ashx" generare una risposta nel vostro formato preferito. Questo potrebbe essere JSON o XML (se si desidera Javascript per analizzare la risposta e generare la lista), o il contenuto HTML in sé ad essere aggiunto alla pagina.
• jQuery riceverà la risposta dal gestore, e popolare il pannello con i dati appropriati.

Ci sono alcuni tutorial online su come utilizzare un IHttpHander. Fondamentalmente si tratta di una semplice interfaccia che di classe "Page" di ASP.NET è derivato da. E 'il peso molto più leggero rispetto alla classe Page modo da poter ottenere le prestazioni migliori di quanto si farebbe da un UpdatePanel, tuttavia, come la maggior parte delle prestazioni tecniche di aumento, si dispone di codice leggermente più complesso.

Ecco un tutorial su come utilizzare un IHttpHandler classe.

Answer 2

Mi raccomando di leggere su

• di chiamare il servizio Web utilizzando jQuery

o

• chiamata Pagina I metodi che utilizzano jQuery .

A seconda di dove l'applicazione web è in esecuzione (intranet al contrario di internet), utilizzando un UpdatePanel può essere una soluzione più veloce per implementare la funzionalità in stile AJAX.

Answer 3

Secondo me, utilizzando un UpdatePanel avvolto intorno ad un ripetitore / DataGrid / GridView sarà molto più facile da implementare approccio.

Si può essere fatto anche con jQuery. Essa consisterebbe l'invio del CateogryId utilizzando una richiesta Ajax al server, ottenendo i prodotti JSON in risposta, e riempiendo un div con i dati JSON tramite manipolazione del DOM.

EDIT: Utilizzando JSON, dati complessi può essere rappresentato in un formato di facile lettura del testo, in modo orientato agli oggetti. Date un'occhiata a questo -

var person = {
     "firstName": "John",
     "lastName": "Smith",
     "address": {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": 10021
     },
     "phoneNumbers": [
         "212 555-1234",
         "646 555-4567"
     ]
 };

person è un oggetto JSON che consiste delle seguenti proprietà: "Nome", "Cognome", ecc È possibile accedere a queste proprietà utilizzando person.firstName, person.lastName, etc

.

Questo è un esempio di JSON, è possibile utilizzare questo per creare la propria stringa JSON contenente informazioni sul prodotto e inviarlo in un array al cliente. In breve, sarà un array di oggetti simili -

var persons = [person1, person2, person3, ...]; //person1, person2, etc. are objects like the person object declared above.

È possibile utilizzare il DataContractJsonSerializer classe (in Framework 3.5) serializzare oggetto / deserializzare da e JSON. Se si utilizza Framework <3.5, è possibile utilizzare il JavaScriptSerializer classe di AjaxToolKit a fare lo stesso.

Answer 4

Si potrebbe anche prendere in considerazione una soluzione "rapida e sporca":. Nella pagina code-behind, implementare ICallbackEventHandler, e restituire un blocco di codice HTML, che roba nel vostro div o tabella

Aggiornamento: Date un'occhiata al http://msdn.microsoft.com /en-us/library/ms178208.aspx per ulteriori dettagli su ciò che è necessario implementare questo.