ASP.Net - 第二次回发后按钮上的 Bootstrap-Badge 丢失答案

【问题标题】：ASP.Net - Bootstrap-Badge on button missing after 2nd PostbackASP.Net - 第二次回发后按钮上的 Bootstrap-Badge 丢失
【发布时间】：2016-11-04 19:35:35
【问题描述】：

我正在使用 Bootstrap 和 ASP.Net 进行我的第一个项目。我打算使用 Bootstrap 徽章来指示我用作选项卡的 LinkButton 的计数。计数会在代码隐藏的页面加载时更新。

徽章的计数在页面加载时正确显示，并且它也在第一次回发（切换选项卡时）工作，但在第二次（以及随后的回发）按钮文本和前一个活动按钮的徽章图标丢失.

以下是使用 2 个按钮的示例，但我的项目包含 4 个按钮，因此按钮会逐个更改，而不是一次全部更改。在此示例中，我看到两个按钮在第二次单击时立即变为空白。

我做错了什么，有没有更好的方法？

badge_test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="badge_test.aspx.cs" Inherits="pages_badge_test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">
    <script type="text/javascript" src="../extras/jquery-2.1.0.js"></script>
    <link rel="Stylesheet" type="text/css" href="../css/bootstrap.css" />
    <link rel="Stylesheet" type="text/css" href="../css/bootstrap-theme.css" />
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="btn-group" role="group">
            <asp:LinkButton ID="lnkBtnTask" class="btn btn-sm btn-primary" role="Button" runat="server" OnClick="lnkbtnMyTasks_Click" >My Tasks<span id="spnMyTask" runat="server" class="badge">0</span></asp:LinkButton>
            <asp:LinkButton ID="lnkBtnReqst" class="btn btn-sm btn-default" role="Button" runat="server" OnClick="lnlbtnMyReqst_Click" >My Requests<span id="spnMyReq" runat="server" class="badge">0</span></asp:LinkButton>
        </div>
    </form>
</body>
</html>

badge_test.aspx.cs [代码隐藏文件]

using System;

public partial class pages_badge_test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        spnMyTask.InnerText = "5";
        spnMyReq.InnerText = "10";
    }
    protected void lnkbtnMyTasks_Click(object sender, EventArgs e)
    {
        lnkBtnTask.CssClass = "btn btn-sm btn-primary";
        lnkBtnReqst.CssClass = "btn btn-sm btn-default";
    }
    protected void lnlbtnMyReqst_Click(object sender, EventArgs e)
    {
        lnkBtnTask.CssClass = "btn btn-sm btn-default";
        lnkBtnReqst.CssClass = "btn btn-sm btn-primary";
    }
}

初始加载（第一个按钮处于活动状态）、第一次回发（点击第二个按钮）、第二次回发（点击第一个按钮）的屏幕截图

编辑：如果我从链接按钮中删除徽章和跨度标签，它工作正常。

【问题讨论】：

标签： c# asp.net twitter-bootstrap

【解决方案1】：

似乎是 ViewState 导致了问题，关闭了 LinkButton 的 ViewStateMode="Disabled" 的视图状态并为 span 标签 ViewStateMode="Enabled" 启用了它，它开始正常工作，并启用了徽章

<asp:LinkButton ID="lnkBtnReqst" ViewStateMode="Disabled" class="btn btn-sm btn-default" 
    role="Button" runat="server" OnClick="lnlbtnMyReqst_Click">My Requests
    <span id="spnMyReq" runat="server" ViewStateMode="Enabled" class="badge">0</span>
</asp:LinkButton>

【讨论】：