ASP:TextBox Value disappears in postback only when password

Question

I have an asp.net textbox like this:

 <asp:TextBox ID="PINPad" runat="server" Columns="6" MaxLength="4" 
      CssClass="PINTextClass"></asp:TextBox>

It is, as you might have guessed, the text box from an on screen PIN pad. Javascript fills in the values. The page is posted back every five seconds (using an update panel if that matters) to update various other unrelated items on the screen. This works just fine.

However, when I convert it to a password text box, like this:

  <asp:TextBox ID="PINPad" runat="server" Columns="6" MaxLength="4" 
       CssClass="PINTextClass" TextMode="Password"></asp:TextBox>

Then whenever the page posts back, the text box is cleared out on the screen and the textbox is empty (though during the timer event, the value does make it back to the server.)

Any suggestions how to fix this, so that it retains its value during postback?

Univalve

There is article on how to solve this more securely (if not perfectly) at codeproject.com/Articles/18927/… – Herrenvolk

Answer 1

As a security feature, ASP.NET tries to disallow you from sending the password value back to the client. If you're okay with the security issues (i.e. it's either not really secure information or you're sure that the connection is secure), you can manually set the "value" attribute of the control, rather than using its Text property. It might look something like this:

this.PINPad.Attributes.Add("value", this.PINPad.Text);

Yelmene

Answer 2

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
  {
        if (!(String.IsNullOrEmpty(txtPwd.Text.Trim())))
        {
             txtPwd.Attributes["value"]= txtPwd.Text;              
        }
        if (!(String.IsNullOrEmpty(txtConfirmPwd.Text.Trim())))
        {
            txtConfirmPwd.Attributes["value"] = txtConfirmPwd.Text;
        }
  }
}

Haman

Answer 3

here is another way to do it:-

using System;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebControlLibrary
{
    public class PWDTextBox : TextBox
    {
        public PWDTextBox()
        {
            this.TextMode = TextBoxMode.Password;
        }

        public string Password
        {
            get
            {
                string val = (string)ViewState["pwd"];
                if (string.IsNullOrEmpty(val))
                {
                    return "";
                }
                else
                {
                    return val;
                }
            }
            set
            {
                ViewState["pwd"] = value;
            }
        }

        public override string Text
        {
            get
            {
                return Password;
            }
            set
            {
                Password = value;
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            this.Text = Password;
        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            base.AddAttributesToRender(writer);
            writer.AddAttribute(HtmlTextWriterAttribute.Value, this.Password);
        }
    }
}

Retrochoir

Answer 4

The problem of losing the password in the postback can be avoid making use of Asynchronous JavaScript calls, lets describe a typical scenario for a Login page:

Lets say we have a Login page which allows the user to change the language of its labels when the user choose a language with a dropdownlist

a solution would be to invoke selectedIndexChanged event of the dropdownlist, make a postback which goes to the server and picks up the labels in the chosen language.

in this scenario the field password will be lost due to the security feature of ASP.NET which makes passwords fields not persisted between a postbacks.

This scenario can be solved if the postback is avoided making use of Asynchronous JavaScript Technology and XML (Ajax) calls.

Add a javascript function which will be invoked from the dropdownlist control, in this case this function is assigned to the Command property of the dropdownlist in code behind:

function ValueChanged(div) 
            {
                var table = div.getElementsByTagName("table");
                if (table && table.length > 0) 
                {
                    var t = table[0].getAttribute('type'); 
                    if (t != null && (t == "DropDown"))
                    {
                        var inputs = div.getElementsByTagName("input");
                        if (inputs && inputs.length == 2) 
                        {

                            {
                                Translate(inputs[1].value);
                            }
                        }
                    }
                }
            }

The Translate function takes as parameter the selected option language in the dropdown control and performs the asynchronous call as shown bellow.

function Translate(lang)
            {
                var request = null;
                if (window.XMLHttpRequest) 
                {
                    request = new XMLHttpRequest();
                    if (request.overrideMimeType)
                    {                        
                        request.overrideMimeType('text/xml');
                    }
                }
                else if (window.ActiveXObject)
                {
                    request = new ActiveXObject("Msxml2.XMLHTTP");
                }
                if (request == null)
                {
                    return;
                }
                var url = "GetLoginTranslations.aspx";               
                request.open('GET', url +'?lang=' + lang, true);
                request.setRequestHeader("Cache-Control", "no-cache");
                request.setRequestHeader("Pragma", "no-cache");
                request.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
                request.onreadystatechange = function () { TranslateLabels(request); };
                request.send(null);
            }

the function Translate shown above performs the call and get the results in the specified .aspx page (in this case "GetLoginTranslations.aspx")

when the request is completed and the request.onreadystatechange is set to the function TranslateLabels this function will be executed.

on this way the postback is not executed as before in the event onSelectedIndexChanged of the dropdownlist control.

the TranslateLabels function would look something like :

function TranslateLabels(request) 
            {                
                if (request.readyState == 4) 
                {
                    if (request.status == 200) 
                    {
                        if (request.responseXML)
                        {
                            var objRoot = request.responseXML.documentElement;
                            if (objRoot)
                            {
                                if (objRoot.nodeName == "strings")
                                {
                                    for (var i = 0; i < objRoot.childNodes.length; i++) 
                                    {
                                        var node = objRoot.childNodes[i];
                                        var elem;
                                        switch (node.getAttribute("id"))
                                        {
                                            case "lbl_login": 
                                                elem = document.getElementById("lbl_login");
                                                if (elem)
                                                    elem.innerHTML = node.firstChild.nodeValue;
                                                break;
                                         }
///....
}
}
}
}
}
}

the request.responseXML contains the XML built in the page GetLoginTranslations.aspx and the structure of this XML is defined there.

the Page_Load() event in the GetLoginTranslations.aspx should look like:

protected void Page_Load(object sender, EventArgs e)
        {
  if (Request["lang"] != null)
                strLang = Request["lang"];

            //init response
            Response.Clear();
            Response.Cache.SetExpires(DateTime.Now);
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            Response.Cache.SetValidUntilExpires(true);
            Response.ContentType = "application/xml";
            Response.Charset = "utf-8";


            XmlTextWriter xml = new XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8)
            {
                Formatting = Formatting.None
            };
            xml.WriteStartDocument();
            xml.WriteStartElement("strings");

            xml.WriteStartElement("string");
            xml.WriteAttributeString("id", "lbl_login");
            xml.WriteString(GetTranslation("label_login", strLang));
            xml.WriteEndElement();

            // ... the other labels


            xml.WriteEndElement(); //</strings>
            xml.Close();

        }

Some other considerations:

• set the the property AutoPostback of the dropdownlist to false.

Eddyede

Answer 5

Happens both for view-model properties named 'Password' and 'PIN'. You can bypass the behavior by defining those as:

string Password ;

... rather than:

string Password { get; set; }

If you do so, features such the 'LabelFor' macro displaying 'DisplayAttribute.Name' no longer works, so you'd have to define those directly in the HTML.

Or you can simply name the fields something other than 'Password' or 'PIN'.

Dikdik