TextBox come visualizzatori di informazioni

Spesso utiliziamo i textbox come semplici visualizzatori di informazioni inserite dall'utente in qualche altro modo. Pensa ad un calendario in cui selezionaniamo una data oppure ad una popup di input. Non volendo che l'utente possa inserire manualmente informazioni nella textbox settiamo l'attributo ReadOnly="True" oppure Enable="false", ma se vogliamo leggere questo valore lato server abbiamo una brutta sorpresa: il valore non è stato modificato.

Creaiamo un esempio abbastanza semplice:

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
        function InsertNewValue()
        {
            var answer=prompt("Inserisci il nuovo valore", "Nuovo Valore");
            document.getElementById("txtNormale").value = answer;
            document.getElementById("txtReadOnly").value = answer;
            document.getElementById("txtReadOnlyAddAttribute").value = answer;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Textbox Normale:<asp:TextBox ID="txtNormale" runat="server" Text="Valore originale"></asp:TextBox><br />
        TextBox con ReadOnly:<asp:TextBox ID="txtReadOnly" runat="server" Text="Valore originale" Readonly="true"></asp:TextBox><br />
        TextBox con Add Attribute ReadOnly<asp:TextBox ID="txtReadOnlyAddAttribute" runat="server" Text="Valore originale"></asp:TextBox><br />
        <input value="Modifica" type="button" onclick="InsertNewValue();" /><br />
        <asp:Button ID="btnPostBack" runat="server" Text="DoPostBack" /><br />
        <asp:Label ID="lblResult" Text="" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

   1:  public partial class _Default : System.Web.UI.Page 
   2:  {
   3:      protected override void OnInit(EventArgs e)
   4:      {
   5:          base.OnInit(e);
   6:          btnPostBack.Click += new EventHandler(btnPostBack_Click);//Agganciare l'evento del pulsante
   7:          //txtReadOnlyAddAttribute.Attributes.Add("disabled", "disabled");
   8:          txtReadOnlyAddAttribute.Attributes.Add("readonly", "readonly");
   9:      }
  10:   
  11:      void btnPostBack_Click(object sender, EventArgs e)
  12:      {
  13:          string lblTest = @"Risultati inseriti:<br/>
  14:              txtNormale = '{0}'<br/> 
  15:              txtReadOnly = '{1}'<br/>
  16:              txtReadOnlyAddAttribute = '{2}'<br/>
  17:          ";
  18:          lblResult.Text = string.Format(lblTest, txtNormale.Text, txtReadOnly.Text, txtReadOnlyAddAttribute.Text);
  19:      }
  20:  }

Abbiamo 3 TextBox che vengono modificate assieme dalla funzione Javascript InsertNewValue con un semplice prompt alla pressione di "Modifica". In più abbiamo un pulsante che esegue il postback e scrive i 3 valori modificati in una label. La prima textbox serve per vedere il comportamento standard, la secoda il comportamento con readonly attivo ed infine la soluzione al problema.

Modificando il valore  ed eseguendo l postback otteniamo questo risultato:

Risultati inserito:
txtNormale = 'Nuovo Valore'
txtReadOnly = 'Valore originale'
txtReadOnlyAddAttribute = 'Nuovo Valore'

Spiegazione:

Perchè otteniamo questa differenza? Perchè l'uso dell'Attributes.Add(string, string) inserisce l'attributo così com'è nel tag html, ma non influenza in nessun modo il controllo server. L'attributo Readonly invece cambia il comportamento del controllo che ignora le modifiche perchè è "readonly".

Nota su Disable:

L'attributo "disable" non funziona come readonly: Il valore infatti non subisce modifiche. Per fare una prova commentate la riga 8 e decommentate la riga 7.

Scarica il Codice dell'Esempio:

 

Technorati Tag:
«maggio»
domlunmarmergiovensab
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567