Struttura dinamica di Accordion con Pane editabili

Question

Ciao a tutti,
dovrei realizzare una struttura di riepilogo (con possibilità di modifica dati) che assomigli il più possibile a questa immagine:

Avevo pensato ad una serie di Accordion, uno per ogni "Iniziativa" che viene rintracciata nel database (e quindi il numero è dinamico).
Il titolo dell'accordion stesso deve poter racchiudere le informazioni principali (tipicamente il nome dell'iniziativa), in modo da capire subito di cosa si tratta.
Espanso uno di questi accordion si aprirebbero alcuni Pane (di numero prefissato, nella figura sono 4) che contengono i dettagli di questa iniziativa selezionata.
All'interno di ognuno di essi ci sono dei campi, che appaiono prima in semplice visualizzazione possono essere cambiato se l'utente clicca sul LinkButton Modifica.

Lo so, è una struttura un po' complessa.

Qualcuno ha qualche consiglio da darmi su come procedere?
Il layout deve rispondere (ahimè) il più possibile all'immagine.

L

Answer 1

Ma cosa vuoi sapere di preciso? :)

Intanto se il problema è l'Accordion.. bè se non hai delle direttive precise sul progetto hai parecchia scelta, chessò puoi usare JQuery

http://docs.jquery.com/UI/Accordion

oppure se usi il Ajax Toolkit di Microsoft puoi usare l'accordion presente in esse

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx

Per il resto ti basta qualche controllo Asp.Net... dov'è il problema di preciso? :)

---

Orchard Mango Theme

Answer 2

Grazie per i consigli. Alla fine poi ho cambiato strada. L'Accordion dell'Ajax Control Toolkit (quello jQuery non lo conosco) è carino fino a che lo si usa nelle sue funzioni basi, e comunque sapendo già anticipo di quanti Pane sarà composto e cosa questi conterranno. Troppo complicato (ma forse tecnicamente possibile) creare Accordion dinamicamente, sia come loro numerosità sia come loro contenuto (per altro poi editabile).
Ho seguito la consueta strada GridView + FormView, cercando di dare loro un layout il più possibile simile a come voleva l'utente (e infatti molto tempo l'ho perso giostrando coi CSS e con l'Html).

L

Answer 3

Grazie per i consigli. Alla fine poi ho cambiato strada. L'Accordion dell'Ajax Control Toolkit (quello jQuery non lo conosco) è carino fino a che lo si usa nelle sue funzioni basi, e comunque sapendo già anticipo di quanti Pane sarà composto e cosa questi conterranno. Troppo complicato (ma forse tecnicamente possibile) creare Accordion dinamicamente, sia come loro numerosità sia come loro contenuto (per altro poi editabile).
Ho seguito la consueta strada GridView + FormView, cercando di dare loro un layout il più possibile simile a come voleva l'utente (e infatti molto tempo l'ho perso giostrando coi CSS e con l'Html).

L

In generale quando usi WebForm e quindi WebControl un po' sei sempre limitato da quello che ti permette di fare il controllo.. (puoi sempre scriverne di custom) cmq.. non mi pare che l'accordion dell'Ajax Toolkit sia statico

http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-vb

http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-cs

Cmq.. era solo per precisare sull'accordion ;) mi fa piacere che abbia risolto ugualmente.

---

Orchard Mango Theme

Answer 4

Con ASP.NET MVC ti trovi sicuramente meglio a realizzare questo tipo di cose. Anche io devo realizzare dei report simili (anche se non complessi come il tuo). Il markup generato è molto più chiaro e pulito. Se hai tempo dacci un occhiata ;)