JavaScripthttp://blog.shareoffice.it/ivangentile/category/118.aspxScript da utilizzare su ASP.Net con framework 2.0Ivan Gentileit-IT.Text Version 0.95.2004.102Ivan GentileId associato agli ASP Control client-side in ASP.Net 2.0http://blog.shareoffice.it/ivangentile/archive/2006/03/16/4376.aspxThu, 16 Mar 2006 11:54:00 GMThttp://blog.shareoffice.it/ivangentile/archive/2006/03/16/4376.aspxhttp://blog.shareoffice.it/ivangentile/comments/4376.aspxhttp://blog.shareoffice.it/ivangentile/archive/2006/03/16/4376.aspx#Feedback0http://blog.shareoffice.it/ivangentile/comments/commentRss/4376.aspxhttp://blog.shareoffice.it/ivangentile/services/trackbacks/4376.aspx<p><font face="Verdana" color="#000080" size="2">Quando lavoriamo con ASP.Net 2.0 e le <strong>Master Pages</strong> accade un qualcosa di particolare.</font></p> <p><font face="Verdana" color="#000080" size="2">ASP.Net rinomina automaticamente tutti gli <em>ASP Controls</em> inseriti all'interno della <strong>Master Page</strong> per evitare problemi di replicazione dei nomi.</font></p> <p><font face="Verdana" color="#ff0000" size="2">Vi garantisco che è impossibile assegnare ad un ASP Control un <strong>ID</strong>, dal momento che in automatico ASP genererà un nuovo <strong>ID</strong>, addirittura aggiungendolo al preesistente.</font></p> <p><font face="Verdana" color="#000080" size="2">Ovviamente esiste un metodo per risolvere questo problema!!!</font></p> <p><font face="Verdana" color="#000080" size="2">Possiamo utilizzare il metodo <em><strong>MioControllo.ClientID</strong></em> che restituisce l'<strong>ID</strong> che ASP ha assegnato al nostro controllo client side.</font></p> <p><font face="Verdana" color="#000080" size="2">Facciamo un esempio!</font></p> <p><font face="Verdana" color="#000080" size="2">Supponiamo di aver inserito in una nostra pagina web un controllo <em><font color="#0000ff">asp:TextBox</font></em>  con <font color="#0000ff"><em>ID='Testo'</em></font>. Avremo cioè:</font></p> <p align="center"><font color="#000080"><font color="#0000ff"><em><font face="Verdana" size="2">&lt;</font><font face="Verdana"><font size="2">asp:TextBox ID='Testo' runat="server" /&gt;</font></font></em></font></font></p> <p><font face="Verdana" color="#000080" size="2">e di voler generare una funzioncina in javascript che ci permetta di modificare il testo contenuto nella casella. Cioè:</font></p> <p><font color="#0000ff"><em><font face="Verdana" size="2">&lt;</font><font face="Verdana"><font size="2">script language=javascript type="text/javascript"&gt;</font></font></em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>                // Associamo a DocOut l'ID associato al nostro </em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>                // controllo dal client</em></font></p> <p><font color="#0000ff"><em><font face="Verdana" size="2">                var</font><font face="Verdana"><font size="2"> DocOut="&lt;%=Testo.ClientID%&gt;";</font></font></em></font></p> <p><font size="2"><font color="#0000ff"><em><font face="Verdana">                function</font><font face="Verdana"> SettaTesto() </font></em></font></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>                {</em></font></p> <p><font face="Verdana"><font color="#0000ff" size="2"><em>                                var doc=document.getElementById(DocOut);</em></font></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>                                doc.value='CIAOOOOO!!!!';</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>                }</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>&lt;/script&gt;</em></font></p> <p><font face="Verdana" color="#000080" size="2">Ovviamente dobbiamo richiamare questa funzione collegandola ad esempio alla pressione di un tasto, come:</font></p> <p align="center"><font face="Verdana"><font color="#000080" size="2"><font color="#0000ff"><em>&lt;input type="button" language="javascript" onclick="SettaImmagine()" /&gt;</em></font> </font></font></p> <p><font face="Verdana" color="#000080" size="2">Il gioco è fatto!!!</font></p> <p><font face="Verdana" color="#000080" size="2">Ciao</font></p> <p><font face="Verdana" color="#000080" size="2">Ivan</font></p><img src ="http://blog.shareoffice.it/ivangentile/aggbug/4376.aspx" width = "1" height = "1" />

Quando lavoriamo con ASP.Net 2.0 e le Master Pages accade un qualcosa di particolare.

ASP.Net rinomina automaticamente tutti gli ASP Controls inseriti all'interno della Master Page per evitare problemi di replicazione dei nomi.

Vi garantisco che è impossibile assegnare ad un ASP Control un ID, dal momento che in automatico ASP genererà un nuovo ID, addirittura aggiungendolo al preesistente.

Ovviamente esiste un metodo per risolvere questo problema!!!

Possiamo utilizzare il metodo MioControllo.ClientID che restituisce l'ID che ASP ha assegnato al nostro controllo client side.

Facciamo un esempio!

Supponiamo di aver inserito in una nostra pagina web un controllo asp:TextBox  con ID='Testo'. Avremo cioè:

<asp:TextBox ID='Testo' runat="server" />

e di voler generare una funzioncina in javascript che ci permetta di modificare il testo contenuto nella casella. Cioè:

<script language=javascript type="text/javascript">

                // Associamo a DocOut l'ID associato al nostro

                // controllo dal client

                var DocOut="<%=Testo.ClientID%>";

                function SettaTesto()

                {

                                var doc=document.getElementById(DocOut);

                                doc.value='CIAOOOOO!!!!';

                }

</script>

Ovviamente dobbiamo richiamare questa funzione collegandola ad esempio alla pressione di un tasto, come:

<input type="button" language="javascript" onclick="SettaImmagine()" />

Il gioco è fatto!!!

Ciao

Ivan

Ivan GentilePreview immagine prima di farne l'upload in Javascript con ASP.Nethttp://blog.shareoffice.it/ivangentile/archive/2006/03/15/4367.aspxWed, 15 Mar 2006 17:32:00 GMThttp://blog.shareoffice.it/ivangentile/archive/2006/03/15/4367.aspxhttp://blog.shareoffice.it/ivangentile/comments/4367.aspxhttp://blog.shareoffice.it/ivangentile/archive/2006/03/15/4367.aspx#Feedback0http://blog.shareoffice.it/ivangentile/comments/commentRss/4367.aspxhttp://blog.shareoffice.it/ivangentile/services/trackbacks/4367.aspx<p><font face="Verdana" color="#000080" size="2">Di seguito vi riporto uno <strong>script (client-side)</strong> per effettuare la <strong>preview </strong>di un immagine prima di farne l'upload sul server.</font></p> <p><font face="Verdana" color="#000080" size="2">Garantisco che non è stato facile, quindi eccola:</font></p> <p><font face="Verdana" color="#000080" size="2"></font> </p> <p><font face="Verdana" color="#0000ff" size="2"><em>&lt;script language=javascript type="text/javascript"&gt;<br />var maxLarghezza=100;<br />var maxAltezza=100;<br />var TipiFile=["bmp","gif","png","jpg","jpeg"];<br />var Output="img";<br />var FotoMom;</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>    function ApplicaModifica()<br />    {<br />        var Campo=document.getElementById(Output);<br />        var x=parseInt(FotoMom.width);<br />        var y=parseInt(FotoMom.height);<br />        if (x&gt;maxLarghezza) <br />        {<br />            y*=maxLarghezza/x;<br />            x=maxLarghezza;<br />        }<br />        if (y&gt;maxAltezza) <br />        {<br />            x*=maxAltezza/y;<br />            y=maxAltezza;<br />        }<br />        Campo.style.display=(x&lt;1 || y&lt;1)?"none":"";<br />        Campo.src=FotoMom.src;<br />        Campo.width=x;<br />        Campo.height=y;<br />    }</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>    function SettaImmagine() <br />    {<br />        var source=document.getElementById('file').value;<br />        var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();<br />        for (var i=0; i&lt;TipiFile.length; i++) if (TipiFile[i]==ext) break;<br />        if (i&lt;TipiFile.length) <br />        {<br />            xxx='file://localhost/' + source;<br />            xxx=xxx.toLowerCase();<br />            FotoMom=new Image()<br />            FotoMom.src=xxx;<br />            setTimeout("ApplicaModifica()",200);<br />        }<br />        else <br />        {<br />            alert('FORMATO NON VALIDO!!\n');<br />        }<br />    }<br />&lt;/script&gt;</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>......</em></font></p> <p><font face="Verdana" color="#0000ff" size="2"><em>......</em></font></p> <p><br /><font face="Verdana" color="#0000ff" size="2"><em>&lt;BODY&gt;<br />&lt;br&gt;<br />&lt;input type="file" id="file" onchange="SettaImmagine()"&gt;<br />&lt;br&gt;<br />&lt;img id="img" src=""&gt;<br />&lt;br&gt; <br />&lt;/BODY&gt;</em></font></p> <p><font face="Verdana" color="#000080" size="2"></font> </p> <p><font face="Verdana" color="#000080" size="2">Ciao</font></p> <p><font face="Verdana" color="#000080" size="2">Ivan</font></p><img src ="http://blog.shareoffice.it/ivangentile/aggbug/4367.aspx" width = "1" height = "1" />

Di seguito vi riporto uno script (client-side) per effettuare la preview di un immagine prima di farne l'upload sul server.

Garantisco che non è stato facile, quindi eccola:

 

<script language=javascript type="text/javascript">
var maxLarghezza=100;
var maxAltezza=100;
var TipiFile=["bmp","gif","png","jpg","jpeg"];
var Output="img";
var FotoMom;

    function ApplicaModifica()
    {
        var Campo=document.getElementById(Output);
        var x=parseInt(FotoMom.width);
        var y=parseInt(FotoMom.height);
        if (x>maxLarghezza)
        {
            y*=maxLarghezza/x;
            x=maxLarghezza;
        }
        if (y>maxAltezza)
        {
            x*=maxAltezza/y;
            y=maxAltezza;
        }
        Campo.style.display=(x<1 || y<1)?"none":"";
        Campo.src=FotoMom.src;
        Campo.width=x;
        Campo.height=y;
    }

    function SettaImmagine()
    {
        var source=document.getElementById('file').value;
        var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
        for (var i=0; i<TipiFile.length; i++) if (TipiFile[i]==ext) break;
        if (i<TipiFile.length)
        {
            xxx='file://localhost/' + source;
            xxx=xxx.toLowerCase();
            FotoMom=new Image()
            FotoMom.src=xxx;
            setTimeout("ApplicaModifica()",200);
        }
        else
        {
            alert('FORMATO NON VALIDO!!\n');
        }
    }
</script>

......

......


<BODY>
<br>
<input type="file" id="file" onchange="SettaImmagine()">
<br>
<img id="img" src="">
<br>
</BODY>

 

Ciao

Ivan