Semplice esempio ajax per load di un DDL

martedì 06 maggio 2008 - 12.53

squilibrio Profilo | Expert

Ciao a tutti, dove posso trovare un semplice esempio per gestire questo in ajax

due DropDownList

primo pieno
secondo vuoto

alla selezione di un elemento del primo
riempio il secondo con un filtro applicato sulla selezione del primo

(il tutto con ajax per evitare il reload della pagina)


Grazie mille!

Brainkiller Profilo | Guru

>alla selezione di un elemento del primo
>riempio il secondo con un filtro applicato sulla selezione del
>primo
>(il tutto con ajax per evitare il reload della pagina)

Ci sono due modi che conosco per farlo.
O mettendo i Combo dentro un UpdatePanel Ajax.

Oppure usando l'AjaxToolkit in particolare questo controllo/esempio:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Grazie per l'aiuto!

Quale soluzione mi consigli? e quale sarebbe la piu semplice da realizzare?

Grazie

Brainkiller Profilo | Guru

>Grazie per l'aiuto!
>Quale soluzione mi consigli? e quale sarebbe la piu semplice
>da realizzare?

Secondo me, perchè c'ho più la mano, la prima quindi UpdatePanel con dentro i ComboBox.
Non so se sai come funziona, praticamente mettendo tutti i controlli dentro l'UpdatePanel diventano automaticamente Ajax-Enabled. A quel punto programmi come al solito. Ti agganci all'evento della prima DropDownList SelectedIndexChanged che scatta quando selezioni un elemento diverso e imposti l'AutoPostback a true.

A questo punto quando selezioni a runtime qualcosa dalla prima Combo l'esecuzione del codice va a finire dentro SelectedIndexChanged, da lì carichi i valori della seconda DropDownList in base alla selezione della prima, li assegni tramite DataSource e poi con DataBind() fai il Binding. E così viene riempita anche la seconda. Naturalmente il tutto senza reload di pagina quindi tutto Ajax.

Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Quindi avendo tutto già pronto in modalità NON-ajax basta metterli nell'updatepanel??

Tutto qui??

e nella mia webapplication "standard" cosa devo includere per usare Ajax?? (uso .NET 2.0 con VS2005)

Grazie

Brainkiller Profilo | Guru

>Quindi avendo tutto già pronto in modalità NON-ajax basta metterli
>nell'updatepanel??

Esatto

>Tutto qui??

Esatto

La potenza dell'AJAX Microsoft sta proprio qui.

Devi referenziare in ogni pagina dove usi AJAX l'oggetto Script Manager.

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

che è obbligatorio e poi racchiudi i controlli in un UpdatePanel.

>e nella mia webapplication "standard" cosa devo includere per
>usare Ajax?? (uso .NET 2.0 con VS2005)

Si dovresti scaricare l'Ajax 1.0:
http://www.asp.net/ajax/downloads/
c'è anche scritto quale scaricare per implementare funzionalità AJAX usando ASP.NET 2.0.
Se no passare ad ASP.NET 3.5 con VS2008.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Grazie mille, un consiglio, posso referenziare l'oggetto Script Manager nella master page e basta?

Thanks

Brainkiller Profilo | Guru

>Grazie mille, un consiglio, posso referenziare l'oggetto Script
>Manager nella master page e basta?

Cerrrtamente.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Grazie per l'aiuto!

squilibrio Profilo | Expert

Volendo gestire dei "panel" con visualizza/nascondi di determinati oggetti della pagina, potrei seguire la stessa logica?? Metto il panel (e quindi gli oggetti) in un nuovo updatepanel di ajax? (quindi nella pagina avrei piu updatepanel....). Dove posso trovare un esempio con questi nascondi/visalizza?

Grazie

Brainkiller Profilo | Guru

>Volendo gestire dei "panel" con visualizza/nascondi di determinati
>oggetti della pagina, potrei seguire la stessa logica?? Metto
>il panel (e quindi gli oggetti) in un nuovo updatepanel di ajax?
>(quindi nella pagina avrei piu updatepanel....). Dove posso trovare
>un esempio con questi nascondi/visalizza?

Anche in questo caso la risposta è sì. Si può gestire in due modi. O via AJAX agendo sul .Visible=true o false oppure via Javascript creando dei <div> e agendo sullo stile CSS, display.
display:none per nascondere display: per visuallizarli.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Sai dirmi dove posso trovare un esempio di "nascondi/visualizza" (il classico pulsante +/-)

Thanks

Brainkiller Profilo | Guru

>Sai dirmi dove posso trovare un esempio di "nascondi/visualizza"
>(il classico pulsante +/-)

Copia e incolla in una pagina .html aprila con il browser e studia l'esempio.

<html> <head> <script type="text/javascript"> function toggle(e) { var ob=document.getElementById(e); if (ob.style.display=='block') ob.style.display='none'; else ob.style.display='block'; return; } </script> <body> <div id="test" style="display:none"> ciao </div> <a href="javascript:toggle('test')">Visualizza/nascondi</a> </body> </html>

Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Grazie mille David, è perfetto. Il mio problema è che vorrei gestirlo lato server (quindi ajax) e non JS perchè vorrei gestire la visualizzazione (si/no) anche tramite code behind al verificarsi di specifiche condizioni.

Ecco perchè sto provando Ajax Toolkit (vedi mio post)

Grazie

Brainkiller Profilo | Guru

>Grazie mille David, è perfetto. Il mio problema è che vorrei
>gestirlo lato server (quindi ajax) e non JS perchè vorrei gestire
>la visualizzazione (si/no) anche tramite code behind al verificarsi
>di specifiche condizioni.

Ok.
Se vuoi passare dall'Ajax Toolkit c'è un controllo ad hoc che è il CollapsiblePanel.
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx

Ti può andare bene ?

Se vuoi una cosa tua è sufficiente mettere un Button dentro un UpdatePanel e sotto per esempio un PlaceHolder con dentro altri controllo. Se nell'evento Click del Button tu inserisci:

PlaceHolder1.Visible=false;

Ti nasconde tutti i controlli contenuti nel PlaceHolder senza refresh di pagina.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

La tua soluzione l'ho capita... .anche la seconda, il problema è che la pagina vieme sempre ricaricata

(stesso discorso utilizzando l'esempio, come avevo già fatto, CollapsiblePanel)

quindi riassumendo:

con

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:PlaceHolder id="PlaceHolder1" runat="server">
dsafdsfds sdfs
sdfdsa
sdfafdsaf fsdfds

sdfdsafs
</asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>

nasconde ma la pagina viene ricaricata



Inserendo, nel mio progetto, una pagina con il CollapsiblePanel, non viene nascosto nulla, anche se la pagina viene caricata


Sembra che ajax non venga eseguito correttamente

in compilazione non ho errori
ho referenziato ajax tool kit
ho anche inserito la dll ajaxtoolkit nella bin

cosa sbaglio??

Grazie infinite

Brainkiller Profilo | Guru

>in compilazione non ho errori
>ho referenziato ajax tool kit
>ho anche inserito la dll ajaxtoolkit nella bin
>cosa sbaglio??

Fai queste 2 prove.

Se apri il sito con IE verifica se ci sono errori di script javascript in basso a sinistra nella statusbar.

Poi apri il codice della pagina HTML. Localizza i punti in cui ci sono gli script Javascript esempio:

<script src="/WebResource.axd

copia il link quindi da /WebResource.axd fino alla fine e incollalo nel Browser premi invio e vedi se genera uno script Javascript. Se lo genera la configurazione è fatta correttamente diversamente no.
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Forse ci sono... nel web.config mancavano alcuni elementi

ora ho un ultimo problema... :-))))

Se nella mia master page non metto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


non funziona la parte ajax della pagina

se invece lo tolgo non mi fuziona il mio bel menu (che fa uso di JavaScript e CSS)

esiste un compromesso per risolvere il problema (senza cambiare menu ovviamente )

Brainkiller Profilo | Guru

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>se invece lo tolgo non mi fuziona il mio bel menu (che fa uso
>di JavaScript e CSS)

Evidentemente hai scritto Javascript non compliant con gli standard web del W3C.
Quindi dovresti adattarlo
Ciao

David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/

squilibrio Profilo | Expert

Non è il mio il JS :(

come posso risolvere il problema in altro modo?

Brainkiller Profilo | Guru

>Non è il mio il JS :(
>come posso risolvere il problema in altro modo?

Sei sicuro ? Io non lo sono :)
Oppure sono i CSS usati in modo errato.

Provalo con Firefox che in genere interpreta in modo abbastanza corretto gli Standard. Se non si vede bene hai sbagliato qualcosa. Se prima usavi il <html> evidentemente non facevi uso di nessuno standard.


David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5