ASP.NET textbox losing value after postback when value is changed client-side via javascript

Question

I am setting the value of a textbox via javascript client-side. When I refresh the page the value is lost.

The textbox is not disabled or set to read-only.

I have read suggestions to put the value in a hidden field, I'd prefer not to do this. It seems like a hack.

The textbox is in a user control as such:

<div id="Row" class="RaidRow" runat="server">
    <asp:Button ID="RaidRowButton" runat="server" CssClass="RaidRowButton" OnClick="RaidRowButton_Click" />
    <asp:TextBox ID="CharacterNameTextBox" runat="server" CssClass="RaidRowControl SlotTextBox" MaxLength="12" />
    <asp:Label ID="ClassNameLabel" runat="server" CssClass="RaidRowControl ClassLabel" />
</div>

This control is on the .aspx page.

When the user double-clicks the textbox, presses enter while the textbox has focus, or changes the text, the following javascript function is called:

function VerifyCharacter(slotNumber, event)
{
    var enterWasPressed = false;

    if (event && event.which == 13)
    {
        enterWasPressed = true;
    }
    else if (window.event && window.event.keyCode == 13)
    {
        enterWasPressed = true;
    }

    if (event == null || enterWasPressed)
    {
        var realmName = 'Lightninghoof';

        var characterNameTextBox = GetCharacterNameTextBox(slotNumber);
        characterNameTextBox.style.color = '#CCCCCC';

        var classLabel = GetClassNameLabel(slotNumber);
        classLabel.style.color = '#CCCCCC';
        classLabel.innerHTML = 'Unknown';

        WoW_Stats.CharacterInformation.GetCharacterInformation(realmName, characterNameTextBox.value, slotNumber, GetCharacterInformation_Success, GetCharacterInformation_Failed);
    }
}

Once the web-service call is complete, the following javascript function is called:

function GetCharacterInformation_Success(characterInformationResult)
{
    var characterInfo = Sys.Serialization.JavaScriptSerializer.deserialize(characterInformationResult, true);

    var classLabel = GetClassNameLabel(characterInfo.SlotNumber);
    classLabel.style.color = characterInfo.ClassColor;
    classLabel.innerHTML = characterInfo.ClassName;

    var characterNameTextBox = GetCharacterNameTextBox(characterInfo.SlotNumber);
    characterNameTextBox.style.color = characterInfo.ClassColor;
}

The only problem is that when I refresh the page, the text in the CharacterNameTextBox and ClassNameLabel, which were set client-side via javascript, are lost.

How can I make sure the controls retain their value between postbacks?

Answer 1

Refreshing the page (pressing F5) is different than a postback. I don't believe the value in your text box is going to be posted back to the server on a refresh. The value in the text box will get posted back to the server on a postback though (as long as the ReadOnly attribute of the TextBox is not set to true, but that's a different story).

Answer 2

I think if the textbox is not editable : Enabled = False or ReadOnly= false.
Asp.net "for security reasones" takes the value from this textbox from its ViewState.
That's why when you use something like a HiddenField or Input, you can get the value.