ASP.NET Radio Button State and Back Key

I have an ASP.NET page with two radio buttons. The buttons use an auto-postback to run server side logic. If you select the second button, the page posts back and correctly displays a message that the second button is selected. If the browser back button is now clicked, the state of button 2 stays checked while the message reverts to saying that button one is checked. This results in a situation that is obviously undesirable because the state of the radio buttons and message are now out of sync. I know this is a ca开发者_如何学Cching issue but I find it odd that the browser remembers the previous state of the label but not the previous state of the radio button.

What is the best way to handle this situation? It's undesirable in this situation to disable cache or the use of the back button.

The following code example exhibits this behavior:

[Form:]

    <asp:RadioButton ID="rb1" runat="server" AutoPostBack="true" Text="Button1" OnCheckedChanged="rb_CheckedChanged"
        GroupName="rbgroup" Checked="true" />
    <br />
    <asp:RadioButton ID="rb2" runat="server" AutoPostBack="true" Text="Button2" OnCheckedChanged="rb_CheckedChanged"
        GroupName="rbgroup" />
    <br />
    <hr />
    <asp:Label ID="lbl1" runat="server">Button 1</asp:Label>

[Code Behind:]

protected void rb_CheckedChanged(object sender, EventArgs e)
{
    if (rb1.Checked == true)
        lbl1.Text = "Button 1";
    else
        lbl1.Text = "Button 2";
}

WYour issue is very simple.

1. In your markup you can use the checked="false" or whatever asp.net equivalent....

2. On page load make sure that you use the if(!IsPostBack){ //set your group value. } to set the radio button's values from a data source or default values the first time the page loads. Every subsequent time will be excluded.

So here is an example:

if(!IsPostBack)
{
   rb1.Checked = false;
   rb2.Checked = false;

   //or alternatively set the value from server data
}

1. In the case of hitting the back button the browser has already cached the page. Since neither of the check boxes are flagged as checked="false" in your markup or in your code, the browser will load the state of the page as it has it from cache.

If you want to change which radio button is selected, use #2 to set the value of the group since PageLoad event executes before pre-render and render.

Hmm - that is funny.

I can reproduce this. And what surprises me is that the source (view source of browser) shows the correct radio button checked (Button 1). The browser (I tested IE and FF) does not seem to render the source correctly (or not redraw the radio button; or is not showing the correct source).

Now the thing with the back button is a bit tricky. Mainly because there is not much you can do about it... HTTP is and will stay stateless and the back button on the client is "far away" from your web server. You cannot control it.

As an article about a similar topic you could read A Thorough Examination of "Disabling the Back Button".

What I am trying to say is that although I do not understand why the browser seems to be rendering something different from what the source tells it, I fear you are fighting a losing battle here.

The only thing I can currently think of would be to find some smart JavaScript that I am unable to provide that "does something" to make the browser redraw the screen after the user clicked the back button.

You can try this.

 <script type="text/javascript">
        $(document).ready(function () {

            var perfEntries = performance.getEntriesByType("navigation");

            if (perfEntries[0].type === "back_forward") {
                location.reload(true);
            }
        });
        
    </script>