Gridview - Modifica url imagebutton in javascript senza page_load

di il
3 risposte

Gridview - Modifica url imagebutton in javascript senza page_load

Buongiorno,
ho creato una pagina asp che contiene una gridview, con una colonna che contiene un'imagebutton:

<asp:gridview id="GvCalendarioDisponibilità" autogeneratecolumns="false"
runat="server" ShowHeader="False" Allowpaging="false"
OnRowCommand = "GvCalendarioDisponibilità_RowCommand"
ShowFooter="true" FooterStyle-CssClass="Testo" FooterStyle-HorizontalAlign="Center" >

<Columns>

...
<asp:TemplateField FooterStyle-CssClass="testo" >
<ItemTemplate>
<asp:ImageButton runat="server" ID="img"
src="https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino bianco.jpg" ImageUrl="https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino bianco.jpg" OnClientClick="return abc(this);" Width="29px" Height="29px" />
</ItemTemplate>
</asp:TemplateField>

Come clicco sull'immagine eseguo la function abc, fatta così, ad inizio del body della mia pagina:
<script language="javascript" type="text/javascript">

function abc(ImageID) {

var img = document.getElementById(ImageID.id);

if (img .src == "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino bianco.jpg")
{
img .src = "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino verde.jpg";
}
else {
img .src = "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino azzurro.jpg";
session("Immagine") = "a"
}

document.getElementById(ImageID.id).imageurl = "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino azzurro righe sottili.jpg";
//document.getElementById(ImageID.id).src = "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino azzurro righe sottili.jpg";
document.getElementById(ImageID.id).width = 25;
document.getElementById(ImageID.id).height = 25;
document.getElementById(ImageID.id).ImageAlign = ImageAlign.Middle;
document.getElementById(ImageID.id).BorderWidth = 0;

return false;

}

</script>


Ci sono un po' di problemi:
. lo script non "sente" nè l'imageurl nè l'src associato all'imagebutton "img". Quindi esegue sempre le istruzioni che caricano l'immagine "quadratino azzurro.jpg"
. si ricarica in automatico la pagina (page_load) e quindi ricarica la gridview dopo qualche secondo che ho cliccato sull'imagebutton che ho modificato, perdendo così la modifica dell'immagine da bianca ad azzurra...

Come posso fare?
grazie a tutti,
Paola

3 Risposte

  • Re: Gridview - Modifica url imagebutton in javascript senza page_load

    29/07/2024 - paolagumi ha scritto:


    . lo script non "sente" nè l'imageurl nè l'src associato all'imagebutton "img". Quindi esegue sempre le istruzioni che caricano l'immagine "quadratino azzurro.jpg"

    Il controllo ImageButton non ha una proprietà “src”, solo la ImageUrl (per quanto ne so): vedi la documentazione.

    29/07/2024 - paolagumi ha scritto:


    var img = document.getElementById(ImageID.id);

    Questa operazione è inutile: il parametro ImageID in realtà non è l'ImageID, ma è l'immagine in sé, e infatti tu accedi alla proprietà “id” per risalire all'elemento, che poi è già quello che ti troveresti in “ImageID”.

    29/07/2024 - paolagumi ha scritto:


    document.getElementById(ImageID.id).imageurl = "https://applicazioniweb.tper.it/Pv.WebVestizione/Immagini/quadratino azzurro righe sottili.jpg";

    La proprietà “ImageUrl” esiste solo sul controllo lato server ImageButton, ovvero solo in ASP.NET: lato client è un pulsante, o un'immagine, con altre proprietà e altre convenzioni.

    29/07/2024 - paolagumi ha scritto:


    document.getElementById(ImageID.id).width = 25;
    document.getElementById(ImageID.id).height = 25;

    Al netto della ripetizione di document.getElementById() che è superflua (va fatta una volta sola per ottenere l'elemento e poi si lavora su quello), per modificare l'aspetto dell'elemento si lavora sulle proprietà di stile (CSS) o sugli attributi: non siamo più in ASP.NET e il paradigma è diverso così come il modello a oggetti. Tecnicamente, si usa il DOM.

    29/07/2024 - paolagumi ha scritto:


    document.getElementById(ImageID.id).ImageAlign = ImageAlign.Middle;

    Quel valore ImageAlign.Middle non è “usabile”: si tratta di un enumerativo valido per ASP.NET, ma lato client non esistono quelle proprietà.

    29/07/2024 - paolagumi ha scritto:


    . si ricarica in automatico la pagina (page_load) e quindi ricarica la gridview dopo qualche secondo che ho cliccato sull'imagebutton che ho modificato, perdendo così la modifica dell'immagine da bianca ad azzurra...

    Stai usando ASP.NET Web Forms, quindi ogni modifica che fai al client non persisterà mai, poiché quando avviene il “post back” la pagina viene ricaricata e il server non è mai stato informato di questo cambiamento dinamico avvenuto solo nel browser.

    29/07/2024 - paolagumi ha scritto:


    Come posso fare?

    Qui ci sono due cose da fare prima di procedere: studiare HTML5, CSS e un pochino di JavaScript, e poi capire meglio come lavora ASP.NET e come funziona il ciclo di vita della pagina (Web Form) e i controlli che stanno al suo interno (HTML Controls e Web Controls), qual è la distinzione tra client e server e come “integrare” la parte server con ciò che avviene sul client (oppure - preferibile - abbandonare totalmente Web Forms, visto che è una tecnologia deprecata da più di 10 anni, passando ad ASP.NET MVC o a un'applicazione frontend/backend fatta con React, Angular, Vue o affini, che comunque non prescindono dalle conoscenze di base indicate sopra).

  • Re: Gridview - Modifica url imagebutton in javascript senza page_load

    il controllo ImageButton non ha una proprietà “src”, solo la ImageUrl (per quanto ne so): vedi la documentazione.

    E' vero infatti, però con .Imageurl non funziona, invece con .src sì, l'immagine si modifica correttamente

    Quel valore ImageAlign.Middle non è “usabile”: si tratta di un enumerativo valido per ASP.NET, ma lato client non esistono quelle proprietà.

    Non mi occorre qui questo infatti e l'ho spostato lato code behind.

    Per quanto riguarda queste note:

    Al netto della ripetizione di document.getElementById() che è superflua (va fatta una volta sola per ottenere l'elemento e poi si lavora su quello), per modificare l'aspetto dell'elemento si lavora sulle proprietà di stile (CSS) o sugli attributi: non siamo più in ASP.NET e il paradigma è diverso così come il modello a oggetti. Tecnicamente, si usa il DOM.

    Qui ci sono due cose da fare prima di procedere: studiare HTML5, CSS e un pochino di JavaScript, e poi capire meglio come lavora ASP.NET e come funziona il ciclo di vita della pagina (Web Form) e i controlli che stanno al suo interno (HTML Controls e Web Controls), qual è la distinzione tra client e server e come “integrare” la parte server con ciò che avviene sul client (oppure - preferibile - abbandonare totalmente Web Forms, visto che è una tecnologia deprecata da più di 10 anni, passando ad ASP.NET MVC o a un'applicazione frontend/backend fatta con React, Angular, Vue o affini, che comunque non prescindono dalle conoscenze di base indicate sopra).

    Io ho la bella età di quasi 60 anni e faccio questo lavoro da quasi 40. Detto questo, di tecnologie, linguaggi e varie ne ho passate veramente di ogni, e buona grazia se lavoro così, visto anche che dove lavoro la formazione è un optional: si fa tutto da sé, sono quasi l'unica che si sbatte a cercare di studiare di tutto su web, devo correre dietro alle emergenze in continuazione ed avere responsabilità di sviluppare oggetti che ricadono su migliaia di persone e loro dati personali…

    Quello che vorrei evitare è ricaricare la pagina col page_load, perché come hai giustamente detto tu lato server non passa quello che fa il client e così perdo le modifiche delle immagini. Sono riuscita invece a richiamare una function del mio code behind dalla function in javascript (col PageMethods), perchè così speravo di evitare il page_load, e invece no….rimando sempre al discorso del ciclo di vita di una pagina che purtroppo conosco poco.

    Mi farò bastare il mio code behind al posto del javascript, perché devo comunque aggiornare db e variabili di sessione,

    grazie,

    Paola

  • Re: Gridview - Modifica url imagebutton in javascript senza page_load

    30/07/2024 - paolagumi ha scritto:


    E' vero infatti, però con .Imageurl non funziona, invece con .src sì, l'immagine si modifica correttamente

    Probabilmente perché l'attributo viene riportato “così com'è” nella pagina, ed essendo il pulsante realizzato con una immagine, quell'attributo ha senso (solo sul client), ma è un escamotage e ha i suoi rischi (es. lato server quella proprietà non è disponibile nel codice, perché è un “barbatrucco” messo solo sull'HTML).

    30/07/2024 - paolagumi ha scritto:


    Io ho la bella età di quasi 60 anni e faccio questo lavoro da quasi 40. Detto questo, di tecnologie, linguaggi e varie ne ho passate veramente di ogni, e buona grazia se lavoro così, visto anche che dove lavoro la formazione è un optional: si fa tutto da sé, sono quasi l'unica che si sbatte a cercare di studiare di tutto su web, devo correre dietro alle emergenze in continuazione ed avere responsabilità di sviluppare oggetti che ricadono su migliaia di persone e loro dati personali…

    Tutta la mia comprensione, ma purtroppo se si vogliono utilizzare delle tecnologie, queste vanno usate nel modo corretto.

    Anche mio padre che fa l'idraulico rifiuta di sentirsi dire che deve formarsi dopo 60 anni che aggiusta caldaie, ma se vuole montare delle Buderus fiammanti con interfaccia digitale e connessioni IoT per la domotica, o queste cose si conoscono, oppure non si possono nemmeno utilizzare, figuriamoci installare, figuriamoci ancora di più costruirle. :)

    30/07/2024 - paolagumi ha scritto:


    Mi farò bastare il mio code behind al posto del javascript, perché devo comunque aggiornare db e variabili di sessione,

    La soluzione più rapida, data l'impossibilità di approfondire a livello formativo questi nuovi scenari, non rimane altro che affidarsi alle cose che funzionano e si conoscono meglio, pur dovendo sacrificare purtroppo qualche “automatismo” o “novità tecnologica”, perché se non viene utilizzata come si deve, la prima strada quantomeno garantisce (nei limiti) un prodotto utilizzabile, la seconda (come abbiamo visto) invece no. :|

    Un saluto!

Devi accedere o registrarti per scrivere nel forum
3 risposte