Controlli in Gridview senza ricaricare pagina

**aleruta** · 14-01-2010, 11:32

Ciao,
ho una pagina aspx che contiene un gridview.
Una colonna del gridview che ha l' <edittempate> composto da
* due immagini,
* un checkbox
* un fileupload.

Vorrei, lato client, o per lo meno non ricaricando completamente la pagina effettuare le seguenti operazioni:
1. alla selezione del checkbox --> disabilitare il fileupload e deselezionare l'eventuale file selezionato in precedenza
2. alla selezione del file dal componente fileupload modificare una delle due immagini (id="img1") con l'immagine selezionata.

Come faccio?

Grazie in anticipo!

**djciko** · 14-01-2010, 16:16

Originariamente inviato da aleruta
2. alla selezione del file dal componente fileupload modificare una delle due immagini (id="img1") con l'immagine selezionata.
Come faccio?

codice:

Nell'Head:

<script language="javascript">
function seleziona() {
	document.getElementById("img1").src= document.getElementById("fileupload_img").value;
}
</script>

Nel Body:

<img id="img1" border="1" />


<input type="file" runat="server" id="fileupload_img" size="40" onchange="javascript:seleziona();">

**djciko** · 15-01-2010, 02:45

domani faccio una prova, forse durante il bound delle righe si possono aggiungere attributi con i comandi JS giusti, tutto sta ad individuare i clientID dei controlli nella riga corrente

**aleruta** · 15-01-2010, 09:56

Ciao,
per ora sono riuscito ad eseguire lato client una funzione javascript al click sul controllo checkbox del gridview.
Ho il clientID del controllo e anche quello del gridview..... ma non so come prendere quello di un algro controllo nella stessa riga che sto modificando :-(

**djciko** · 15-01-2010, 15:09

Per la tua 2a domanda:

(gv è la gridview)

codice:

    <Columns>
        <asp:BoundField DataField="x" HeaderText="x" />
        <asp:BoundField DataField="y" HeaderText="y"  />
        <asp:BoundField DataField="z" HeaderText="z"  />
    
        <asp:TemplateField>
            <ItemTemplate>
              StatoNormale
            </ItemTemplate>

            <EditItemTemplate>
                <asp:Image ID="imgAnteprima" runat="server" ImageUrl="../img/img_iniziale.png" />
		<input id="fileupload_img" name="fileupload_img" type="file" runat="server"  />
            </EditItemTemplate> 
        </asp:TemplateField>

        <asp:CommandField ButtonType="Link" EditText="Edita" ShowEditButton="true" />
    </Columns>

codice:

    Protected Sub gv_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gv.RowCreated
        If e.Row.RowState = DataControlRowState.Edit Then
            Dim img As New Image
            img = e.Row.FindControl("imgAnteprima")
            Dim idImmagine As String = img.ClientID

            Dim upload As New HtmlControls.HtmlInputFile
            upload = e.Row.FindControl("fileupload_img")
            Dim idFileUpload As String = upload.ClientID

            upload.Attributes.Add("onchange", "document.getElementById('" & idImmagine & "').src=document.getElementById('" & idFileUpload & "').value;")
        End If
    End Sub

    Protected Sub gv_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles gv.RowEditing
        gv.EditIndex = e.NewEditIndex
        bindgrid() ' Metodo che fa una query ed il Bind
    End Sub

**aleruta** · 19-01-2010, 01:20

Ciao,
io avevo pensato di collegare all'onclick del checkbox
onClick="javascript

rova(this)

Questo mi permette di eseguire la funzione lato client "prova" qualora si faccia click sul checkbox.
Ora come posso fare per ricavare il controllo fileUpload in questa funzione?

**djciko** · 19-01-2010, 13:50

codice:

<head runat="server">
		<script language="javascript">
			function disabilita_abilita_fileupload()
			{
			    if (document.form1.cbox.checked == true)
			    {
			        document.form1.fileupload_img.disabled=true;
			    }
			    
			    if (document.form1.cbox.checked == false)
			    {
			        document.form1.fileupload_img.disabled=false;
			    }
			}
		</script>
</head>



.
.
.
    <Columns>
        <asp:BoundField DataField="x" HeaderText="x" />
        <asp:BoundField DataField="y" HeaderText="y"  />
        <asp:BoundField DataField="z" HeaderText="z"  />
    
        <asp:TemplateField>
            <ItemTemplate>
              StatoNormale
            </ItemTemplate>
            <EditItemTemplate>
                <input id="cbox" type="checkbox" runat="server">

                <asp:Image ID="imgAnteprima" runat="server" ImageUrl="../img/immagine_iniziale.png" />
		<input id="fileupload_img" name="fileupload_img" type="file" runat="server" size="50"  />
            </EditItemTemplate> 
        </asp:TemplateField>
        <asp:CommandField ButtonType="Link" EditText="Edita" ShowEditButton="true" />
    </Columns>

codice:

    Protected Sub gv_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gv.RowCreated
        If e.Row.RowState = DataControlRowState.Edit Then
            Dim cbx As New HtmlControls.HtmlInputCheckBox
            cbx = e.Row.FindControl("cbox")
            cbx.Attributes.Add("OnClick", "disabilita_abilita_fileupload();")


            Dim img As New Image
            img = e.Row.FindControl("imgAnteprima")
            Dim idImmagine As String = img.ClientID

            Dim upload As New HtmlControls.HtmlInputFile
            upload = e.Row.FindControl("fileupload_img")
            Dim idFileUpload As String = upload.ClientID

            upload.Attributes.Add("onchange", "document.getElementById('" & idImmagine & "').src=document.getElementById('" & idFileUpload & "').value;")
        End If
    End Sub

**aleruta** · 19-01-2010, 15:07

gv_RowCreated a quale evento lo colleghi?

**djciko** · 19-01-2010, 16:54

"Handles gv.RowCreated"

E l'evento che si scatena alla -creazione- di ogni riga del gridview

**aleruta** · 19-01-2010, 17:22

Quindi dovrebbe succedere quanto segue:
* al primo caricamento della pagina il metodo gv_RowCreated viene chiamato per ogni riga del gridView.... anzi se non ho capito male non solo uno per riga (uno per l'itemtemplate e uno per l'edittemplate)
* viene generato codice javascript dinamicamente per il componente checkbox.
* all'evento click sul checkbox parte la funzione disabilita_abilita_fileupload()

giusto?
questa sera provo.
Grazie sei gentilissimo.

Discussione: Controlli in Gridview senza ricaricare pagina

Strumenti discussione

Ricerca discussione

Visualizza

asp .net controlli in gridview senza ricaricare pagina

Re: asp .net controlli in gridview senza ricaricare pagina

Permessi di invio