ASP.Net：回发后如何维护TextBox状态

Question

I would like to know how to maintain the control state that has been modified in Javascript.
I have two TextBoxes, one DropDownList and a button (all Runat=Server) in C# ASP.net 2010 Express.

First textbox is just accept whatever data user input.
Second textbox enable state will change based on DDL selected value.
If ddl selected value is "-", second textbox will become Enabled = False.
If not "-", it will become Enabled = True. This enable is done through Javascript.

In my Page Load event, I have below code.

if (!IsPostBack)
{
     txtKey2.Text = "";
     txtKey2.BackColor = System.Drawing.ColorTranslator.FromHtml("#CCCCCC");
     txtKey2.Enabled = false;
}

And in my aspx page, I have some javascript which will clear the textbox data and disable the textbox.

Here is for Second Textbox.

<asp:TextBox ID="txtKey2" runat="server" Width="425px" EnableViewState="False"></asp:TextBox>

And here is for DDL.

<asp:DropDownList ID="selKey1" runat="server" onchange="EnableSelkey(this.value,1)">
    <asp:ListItem Value="0">-</asp:ListItem>
    <asp:ListItem Value="1">AND</asp:ListItem>
    <asp:ListItem Value="2">OR</asp:ListItem>
</asp:DropDownList>

Here is the code for my Javascript. (I have a plan to implement other textbox and ddl so in my code I have Else if condition).

function EnableSelkey(val, strID) {
    var txtBox;
    if (strID == "1")
        txtBox = document.getElementById('<%= txtKey2.ClientID %>');
    else if (strID == "2")
        txtBox = document.getElementById('<%= txtKey3.ClientID %>');
    else
        txtBox = document.getElementById('<%= txtKey4.ClientID %>');

    if (val != 0) {
        txtBox.disabled = false;
        txtBox.style.backgroundColor = "White";
        txtBox.value = "";
        txtBox.select();
    }
    else {
        txtBox.disabled = true;
        txtBox.style.backgroundColor = "#CCCCCC";
        txtBox.value = "";
    }
}

I have nothing in button click event.

By using above all code, when I run the project, the page loads Ok. The second textbox enabled state is set to False (through Page_Load event). So far Ok.

Then from my browser, I choose ddl value to other instead of "-", the textbox become enable because of javascript. This is Ok.

I input the value and click on the button. Page PostBack happens here. Textbox is still enabled (because of EnableViewState = False for my textbox).

I choose ddl value to "-", second textbox became disabled.
Click on the button, page postback happen, but this time the textbox is still enabled. << This is the issue I'm trying to solve. I change EnableViewState, ViewStateMode in different values but still the same.

Is there any solution for this one?

Here is my test image URL. State 1 , State 2 , State 3

Sorry for the long post.

Answer 1

I have tried and found no solution beside using additional HiddenField control.

I update the hidden field value when I update the status of my textbox in Javascript. And on my Page Load event, I checked all the hidden field values and based on the hiddenfield values, I will disable/enable my textboxes which is for me not a good solutions.

Imagine I have 10 or 15 textboxes on my form, I need to have 10 or 15 hidden field just to maintain client side action result.

Currently, this is the only solution for me.

I'm not sure can this consider as 'Answer' so I haven't close this question yet.

Answer 2

<asp:DropDownList ID="selKey1" runat="server" onchange="EnableSelkey(this.value,1)">
    <asp:ListItem Value="0">-</asp:ListItem>
    <asp:ListItem Value="1">AND</asp:ListItem>
    <asp:ListItem Value="2">OR</asp:ListItem>
</asp:DropDownList>

function EnableSelkey(val, strID) {
    var txtBox;        
    if (strID == "1")
        txtBox = document.getElementById('<%= txtKey2.ClientID %>');
    else if (strID == "2")
        txtBox = document.getElementById('<%= txtKey3.ClientID %>');
    else
        txtBox = document.getElementById('<%= txtKey4.ClientID %>');

    if (val != 0) {
        txtBox.disabled = false;
        txtBox.style.backgroundColor = "White";
        txtBox.value = "";
        txtBox.select();
    }
    else {
        txtBox.disabled = true;
        txtBox.style.backgroundColor = "#CCCCCC";
        txtBox.value = "";
    }
}

You Have to call you javascript function on every postback.

if (!IsPostBack)
{
     txtKey2.Text = "";
     txtKey2.BackColor = System.Drawing.ColorTranslator.FromHtml("#CCCCCC");
     txtKey2.Enabled = false;
}

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "MyJSFunction", "EnableSelkey("+selKey1.SelectedValue+",1);", true);

It May be help you, Let me know for further help.

Answer 3

我发现一个有效的解决方案是将我放入！IsPostBack部分的代码也直接在页面加载事件中启用和禁用文本框。