如何在 asp.net 中回發后更改鏈接按鈕的顏色

Question

我是 C# 的新手，我遇到了以下問題。 當我單擊鏈接按鈕（用於分頁）時，它將 go 使用回發在頁面后面編碼。 但是回發會刷新我在css上設置的按鈕的背景色，怎么辦？

我使用了 ViewState 但它仍然不起作用。

我原本想要的是，當用戶按下尋呼號碼時，尋呼號碼會顯示不同的顏色，這樣用戶就可以知道自己在按哪個按鈕。

就像，當用戶按 2 時，頁面將使用回發顯示頁面 2 的詳細信息，並且底部的尋呼號碼將顯示 1 2 3 4

這是我的代碼，

    <asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand" >  
                                                <ItemTemplate>  
                                                    <asp:LinkButton ID="lnkPage"
                                                        Style="padding: 8px; margin: 2px; background: lightgray; border: solid 1px #666;font-weight: bold;" 
                                                        CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server" CssClass="listbtn" 
                                                        ForeColor="Black" Font-Bold="True"><%# Container.DataItem %>  
                                                    </asp:LinkButton>  
                                                </ItemTemplate>  
                                            </asp:Repeater>  

這是后面的代碼，

 public int PageNumber
    {
        get
        {
            if (ViewState["PageNumber"] != null)
            {
                return Convert.ToInt32(ViewState["PageNumber"]);
            }
            else
            {
                return 0;
            }
            
    }
        
        set { ViewState["PageNumber"] = value; }
    }
    private int iPageSize = 100;

    private void BindRepeater(DataTable dt)
    {

  
        //Finally, set the datasource of the repeater
        PagedDataSource pdsData = new PagedDataSource();
        DataView dv = new DataView(dt);
        pdsData.DataSource = dv;
        pdsData.AllowPaging = true;
        pdsData.PageSize = iPageSize;
        if (ViewState["PageNumber"] != null)
            pdsData.CurrentPageIndex = Convert.ToInt32(ViewState["PageNumber"]);
        else
            pdsData.CurrentPageIndex = 0;
        if (pdsData.PageCount > 1)
        {
            rptPaging.Visible = true;
            ArrayList alPages = new ArrayList();
            for (int i = 1; i <= pdsData.PageCount; i++)
                alPages.Add((i).ToString());
                 

            rptPaging.DataSource = alPages;
            rptPaging.DataBind();
        }
        else
        {
            rptPaging.Visible = false;
        }


        rptTxnHist.DataSource = pdsData;
        rptTxnHist.DataBind();
    }
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
    {
        string sDateFr = datepicker.Value;
        string sDateTo = datepicker2.Value;
        PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
        //ViewState["PageNumber"] = Convert.ToInt32(e.CommandArgument);
   
        LoadUI(PageNumber, "NAME", sDateFr, sDateTo);
    }

css 代碼：

a:hover, a:focus{
color:white;
background-color:black;
}

Answer 1

我建議在苦苦掙扎之前先看看這個W3解決方案。 我知道 Microsoft 控件易於使用但難以交互實現，但一些修改將使工作變得輕松。 如果您想對頁面外觀行為進行更多控制，請嘗試使用 session 變量。

Answer 2

好吧，在“大多數”情況下，如果您加入並想要一個數據尋呼機，那么給定的“選定”頁面選項的突出顯示應該 100% 自動為您出現。

換句話說，如果一個“可以”讓 css 為你做這件事？

您真的希望該選擇（css）為您工作。

如果您“可以/可以”讓它工作，那么您根本不需要編寫太多代碼來讓尋呼機工作。

另外，您沒有記下或提及您要分頁的內容嗎？

您是否要分頁 GridView、ListView、數據轉發器？

您可以對上述任何內容進行大量尋呼，一旦您的尋呼機正常工作，您就可以反復使用該尋呼機。 （使整個應用程序的外觀和感覺保持一致）。

所以，假設我們要分頁一個網格視圖。

所以，我們的尋呼機樣式可以是這樣的：

        <style>
            .GridPager a, .GridPager span
            {
                display: block;
                height: 20px;
                width: 15px;
                font-weight: bold;
                text-align: center;
                text-decoration: none;
                margin-right:8px;
            }
            .GridPager a
            {
                background-color: #f5f5f5;
                color: #969696;
                border: 1px solid #969696;
            }
            .GridPager span
            {
                background-color: #A1DCF2;
                color: #000;
                border: 1px solid #3AC0F2;
            }
    </style>

而我們的GridView可以是這樣的：

所以我們設置AllowPaging = true，並設置pager style

        <asp:GridView ID="GHotels" runat="server" CssClass="table table-hover" AutoGenerateColumns="false"
            width="45%" DataKeyNames="ID" AllowPaging="True" 
            OnPageIndexChanging="GHotels_PageIndexChanging" PageSize="6"   >
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName" HeaderText="LastName"    />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel Name"    />
                <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />                
            </Columns>
            <PagerStyle CssClass="GridPager" />
        </asp:GridView>

我們現在要加載的代碼是這樣的：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }

    void LoadData()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = 
                @"SELECT * FROM tblHotels 
                  WHERE Description is not null 
                  ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                DataTable rstData = new DataTable();
                conn.Open();
                rstData.Load(cmdSQL.ExecuteReader());
                GHotels.DataSource = rstData;
                GHotels.DataBind();
            }
        }
    }


    protected void GHotels_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GHotels.PageIndex = e.NewPageIndex;
        LoadData();

    }

我們現在得到/看到這個：

現在，說一個 ListView - 它支持一個尋呼機，因此這樣說：

        <asp:ListView ID="ListView1" runat="server"  Allowpaging="true" >
            <ItemTemplate   >
                <tr>
                    <td><asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' /></td>                        
                    <td><asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' /></td>
                    <td><asp:Label ID="HotelNameLabel" runat="server" Text='<%# Eval("HotelName") %>' /></td>
                    <td><asp:Label ID="CityNameLabel" runat="server" Text='<%# Eval("City") %>' /></td>
                    <td><asp:Label ID="ProvinceLabel" runat="server" Text='<%# Eval("Province") %>' /></td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table id="itemPlaceholderContainer" runat="server" border="0" class="table table-hover">
                    <tr runat="server" >
                        <th runat="server">FirstName</th>
                        <th runat="server">LastName</th>
                        <th runat="server">HotelName</th>
                        <th runat="server">City</th>
                        <th runat="server">Province</th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" >
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

在下面，我們可以放入一個尋呼機，而不是真正使用樣式表，而是使用現有的引導類 - 像這樣說：

<div id="pagging" runat="server">
    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="9" >
        <Fields>
            <asp:NextPreviousPagerField NextPageText=" Next <i class='fa fa-chevron-left'></i> " 
                ShowNextPageButton="true"
                ShowPreviousPageButton="false" ShowFirstPageButton="false"
                ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />

            <asp:NumericPagerField ButtonType="Link" 
                CurrentPageLabelCssClass="btn btn-primary disabled" 
                RenderNonBreakingSpacesBetweenControls="false"
                NumericButtonCssClass="btn btn-default" ButtonCount="10" 
                NextPageText="..." NextPreviousButtonCssClass="btn btn-default" />
            <asp:NextPreviousPagerField PreviousPageText=" <i class='fa fa-chevron-right'></i> Prev" 
                ShowPreviousPageButton="true"
                ShowNextPageButton="false" ShowLastPageButton="false"
                ButtonCssClass="btn btn-default" RenderNonBreakingSpacesBetweenControls="false" RenderDisabledButtonsAsLabels="false" />
        </Fields>
    </asp:DataPager>
<br />
</div>

現在我得到/看到這個：

再次，我不必編寫任何代碼來找出按鈕的“突出顯示”。

這表明您可能每次都在頁面加載時重新綁定網格。

我的每一個 web 頁面在第一個頁面加載中都有代碼來設置/加載/執行加載下拉列表、網格等的內容。並且該代碼只需要在真正的第一頁加載時運行。

這意味着您的第一個真實頁面加載只觸發一次。 因此，每個頁面都需要頁面加載事件中的此代碼存根來加載內容（我們檢查.IsPostBack - 這是真正的第一頁加載）。

因此：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }

所以，一旦你設置了這個，那么你所有的努力都是在格式化尋呼機——而不是編寫代碼來“突出顯示”一個尋呼機按鈕——這應該對你“正常工作”。 （但是，如果您每次都在頁面加載時重新加載，通常這樣的格式和設置會變得混亂 - 所以，作為一般規則，您不希望您的設置 + 數據加載代碼每次在頁面加載時運行（因此.IsPostBack 代碼存根）。

也許我有點喜歡紐扣上那些圓形的毛茸茸的球。

因此，使用這種格式：

<style>
    .GridPager a, .GridPager span {
        display: block;
        height: 22px;
        width: 28px;
        text-align: center;
        margin-right: 12px;
        box-shadow: 4px 4px 4px 0px gray;
        border-radius: 10px;
    }

    .GridPager a {
        background-color: #ddd5d5;
        border: 1px solid #969696;
        margin-right: 12px;
        box-shadow: 4px 4px 4px 0px gray;
        border-radius: 10px;
    }

        .GridPager a:hover {
            background-color: #789eca;
            transition: 0.5s;
        }

    .GridPager span {
        background-color: #808080;
        color: #000;
        border: 1px solid #3AC0F2;
    }
</style>

說一個 GridView，然后我得到/看到這個：

我的觀點？

一旦你的風格工作起來，你不應該在后面編寫代碼來管理哪個按鈕要保持高亮——它應該可以工作。

我將發布一個具體的工作示例，但您沒有提及您是否嘗試“分頁”網格、中繼器或其他任何東西。

Answer 3

現在，我讀到這個問題是關於數據尋呼機的。

但是，目標似乎只是在單擊后更改中繼器中按鈕的樣式。

所以，假設這個中繼器：

    <style>
        .mylinkbtn {
            padding: 8px;
            margin: 2px; 
            background: lightgray; 
            border: solid 1px #666;
            font-weight: bold;
        }
    </style>

    <div style="padding:35px;width:25%">

    <asp:Repeater ID="rptPaging" runat="server"  >  
    <ItemTemplate>  
        <div style="text-align:right">

        <asp:Label ID="lblH" runat="server" Font-Size="14"
            Text= "View Hotel Name ">
        </asp:Label>

        <asp:Label ID="lblHotel" runat="server" Font-Size="14"
            Text='<%# Eval("HotelName") %>' >
        </asp:Label>

        <asp:LinkButton ID="lnkPage"  CssClass="mylinkbtn"
            runat="server" Text="View"
            ForeColor="Black" Font-Bold="True"
            OnClick="lnkPage_Click"  > 
        </asp:LinkButton>  

        <br />
        <br />

        </div>
    </ItemTemplate>  
</asp:Repeater> 

要加載的代碼：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadData();
    }


    void LoadData()
    {
        DataTable rstOptions =
            MyRst("SELECT ID, HotelName FROM tblHotelsA ORDER BY HotelName");

        rptPaging.DataSource = rstOptions;
        rptPaging.DataBind();

    }

    DataTable MyRst(string strSQL)
    {
        DataTable rstData = new DataTable();
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                cmdSQL.Connection.Open();
                rstData.Load(cmdSQL.ExecuteReader());
            }
        }
        return rstData;
    }

記住。，。！ - 僅重新綁定一次網格 (!IsPostBack)。 如果您忽略了這一點，那么您將重新綁定中繼器並且將失去您的按鈕樣式更改。

但是，一個簡單的回發不會重新設置樣式以應用於轉發器中的任何重復控件。

所以，我們得到這個：

現在，我們的按鈕點擊代碼。 我真的不喜歡 gridview、列表視圖、中繼器等的命令和按鈕事件 model。

我只是放下一個飛機簡按鈕，或其他什么。 只需在標記類型中輸入 onclick= （然后輸入空格鍵 - 系統會提示您為該按鈕（或任何其他事件）創建事件單擊。這樣您就不必亂用 row 命令。

因此這段代碼：

    protected void lnkPage_Click(object sender, EventArgs e)
    {
        LinkButton btn = (LinkButton)sender;
        RepeaterItem rRow = (RepeaterItem)btn.NamingContainer;

        int MyRowIndex = rRow.ItemIndex;
        Debug.Print("row index = " + MyRowIndex);
        // get hotel name value
        Label lblHotel = (Label)rRow.FindControl("lblHotel");
        Debug.Print("Row click hotel = " + lblHotel.Text);

        // change button class to show it was clicked 
        btn.CssClass = "btn btn-info";
    }

因此，對於我單擊的每個按鈕，我們都會看到：

點擊的 output window 顯示了這一點：

因此，您應用於控件的任何樣式（包括該鏈接按鈕）都可以使用，並且可以在回發后繼續存在。 但是，您的標准頁面加載事件 NEAR ALWAYS 必須放在 a.IsPostBack 存根中（最后 100+ web 頁面有這樣的代碼存根），換句話說，如果您重新綁定轉發器，那么是的，當然它會重新繪制，重新加載。 並且您丟失了樣式按鈕或您應用的任何其他樣式。

但是，由於您的頁面，IsPostBack 存根在真正的第一頁加載時運行。 那么按鈕控件等的此類樣式設置將持續存在。 他們為您保留了自動視圖 state。

因此，要么您沒有將樣式設置為轉發器中的給定行，要么您的頁面加載事件正在重新綁定並重新加載轉發器，這當然會炸毀並重新設置您的按鈕。

但是，對於 Gridview、repeater、Listview 和更多這樣的數據綁定控件？ 假設您使用所有重要的 IsPostBack 代碼存根（正如我所指出的。如果加載任何數據綁定控件，您編寫的幾乎每個頁面都將需要），此類控件和按鈕的 state 應該保持不變。