ASP.NET单选按钮状态和后退键

时间:2010-05-04 19:53:30

标签: c# asp.net webforms radio-button

我有一个带有两个单选按钮的ASP.NET页面。这些按钮使用自动回发来运行服务器端逻辑。如果选择第二个按钮,页面将回发并正确显示第二个按钮被选中的消息。如果现在单击浏览器后退按钮,则按钮2的状态将保持选中状态,同时消息将恢复为已选中按钮1。这导致显然不合需要的情况,因为单选按钮和消息的状态现在不同步。我知道这是一个缓存问题,但我发现奇怪的是浏览器会记住标签的先前状态,而不是单选按钮的先前状态。

处理这种情况的最佳方法是什么?在这种情况下,禁用缓存或使用后退按钮是不可取的。

以下代码示例展示了此行为:

[形式:

    <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";
}

3 个答案:

答案 0 :(得分:1)

你的问题非常简单。

  1. 在你的标记中你可以使用checked =“false”或任何asp.net等价物....

  2. 在页面加载时,请确保使用if(!IsPostBack){//设置您的组值。在第一次加载页面时设置数据源中的单选按钮值或默认值。随后的每一次都将被排除在外。

  3. 所以这是一个例子:

    if(!IsPostBack)
    {
       rb1.Checked = false;
       rb2.Checked = false;
    
       //or alternatively set the value from server data
    }
    
    1. 如果点击后退按钮,浏览器已经缓存了该页面。由于标记或代码中的任何一个复选框都没有标记为checked =“false”,因此浏览器将加载从缓存中获取的页面状态。
    2. 如果要更改选择了哪个单选按钮,请使用#2设置自PageLoad事件在预渲染和渲染之前执行以来的组值。

答案 1 :(得分:0)

嗯 - 这很有趣。

我可以重现这一点。令我惊讶的是, source (浏览器的浏览源)显示正确的单选按钮已选中(按钮1)。浏览器(我测试了IE和FF)似乎没有正确渲染源(或者没有重绘单选按钮;或者没有显示正确的源)。

现在带后退按钮的东西有点棘手。主要是因为没有太多你可以做的事情...... HTTP是并且将保持无状态,客户端上的后退按钮“远离”你的web服务器。你无法控制它。

有关类似主题的文章,您可以阅读A Thorough Examination of "Disabling the Back Button"

我想说的是,虽然我不明白为什么浏览器似乎呈现出与消息来源不同的东西,但我担心你在这里正在打败一场失败的战斗。

我目前唯一能想到的就是找到一些我无法提供的智能JavaScript,以便在用户点击后退按钮后让浏览器重绘屏幕。

答案 2 :(得分:0)

你可以试试这个。

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

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

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