ASP.NET GridView SortedAscendingHeaderStyle 不起作用答案

【问题标题】：ASP.NET GridView SortedAscendingHeaderStyle does not workASP.NET GridView SortedAscendingHeaderStyle 不起作用
【发布时间】：2011-10-07 00:24:22
【问题描述】：

我的 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle 根本不工作

<asp:GridView ID="grdProducts" runat="server" CssClass="grid" AllowPaging="True" AllowSorting="True" PageSize="100" EmptyDataText="No data to show"
              onrowdatabound="grdProducts_RowDataBound"  onrowediting="grdProducts_RowEditing" onsorting="grdProducts_Sorting" AutoGenerateEditButton="True">
  <AlternatingRowStyle CssClass="even" />
  <SortedAscendingHeaderStyle ForeColor="White" CssClass="sorted" />
  <SortedDescendingHeaderStyle CssClass="sorted desc" />
</asp:GridView>

点击标题时行排序正确，但是当我使用 FireBug 检查标题时，它只显示：（这是升序排序时）

<th scope="col">
  <a href="javascript:__doPostBack('ctl00$body$ctl00$grdProducts','Sort$Namekey')">Namekey</a>
</th>

ForeColor 和 CssClass 根本没有设置。

有人知道我做错了什么吗？

编辑：我背后的 C# 代码

  protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e)
  {
    if ((string)ViewState["SortColumn"] == e.SortExpression)
      ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : "";
    else
    {
      ViewState["SortColumn"] = e.SortExpression;
      ViewState["SortDirection"] = "";
    }
  }

  protected override void OnPreRender(EventArgs e)
  {
    BindGrid();
    base.OnPreRender(e);
  }

  private void BindGrid()
  {
    string query = "SELECT ... ORDER BY " + ViewState["SortColumn"] + ViewState["SortDirection"];

    DataTable dt = SqlFunctions.Select(query);
    grdProducts.DataSource = dt;
    grdProducts.DataBind();
  }

【问题讨论】：

愚蠢的问题，如果你硬刷新 Ctl+F5 会发生什么？
Firefox 询问我是否要“重新发送”，我点击它，然后列仍然排序，并且标题仍然没有类/样式。

标签： asp.net gridview

【解决方案1】：

如果您不使用 asp:SQLDataSource 作为 GridView 数据源，我不确定 SortedDescendingHeaderStyle 是否可以在没有代码的情况下工作。但是一点点编码就可以让你到达那里。

您需要手动将 CSS 样式应用到标题单元格。您可以在 Sorting 事件中执行此操作。

protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e)
{
   if ((string)ViewState["SortColumn"] == e.SortExpression)
   {
      ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : "";
      grdProducts.HeaderRow.Cells[GetColumnIndex( e.SortExpression )].CssClass = "AscendingHeaderStyle";
   }
   else
   {
      ViewState["SortColumn"] = e.SortExpression;
      ViewState["SortDirection"] = "";
      grdProducts.HeaderRow.Cells[GetColumnIndex( e.SortExpression )].CssClass = "DescendingHeaderStyle";
   }
   BindGrid();
}




private int GetColumnIndex( string SortExpression )
{
    int i = 0;
    foreach( DataControlField c in gvwCustomers.Columns )
    {
        if( c.SortExpression == SortExpression )
            break;
        i++;
    }
    return i;
}

【讨论】：

它不起作用:-(当我调用gridview.DataBind()时，CSS又消失了。

【解决方案2】：

我没有足够的代表来评论接受的答案。当我尝试应用该解决方案时，它会正确排序，但没有将 CSS 类应用于最终呈现的内容。

在我的例子中，在对我的数据源（列表）进行排序并将其分配为网格的数据源之后在我的网格上调用 DataBind()，但在设置 CssClass 之前就可以了。想我会分享以防其他人遇到类似的事情。

【讨论】：

您的意思是在_Sorting 事件处理程序中调用DataBind()，然后将CssClass 分配给排序asc/desc 样式属性？我正在尝试使用这些样式，但它们似乎根本没有应用。
您的解决方案有效。流程应该是 1) 将排序后的数据源分配给网格； 2) 调用DataBind()； 3) 将升序/降序类分配给 CssClass 到排序列的标题行单元格。此解决方案未使用

【解决方案3】：

我认为这是您数据绑定的时机。更改您的数据绑定以像这样工作：

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

  protected void grdProducts_Sorting(object sender, GridViewSortEventArgs e)
  {
    if ((string)ViewState["SortColumn"] == e.SortExpression)
      ViewState["SortDirection"] = ((string)ViewState["SortDirection"] == "") ? " DESC" : "";
    else
    {
      ViewState["SortColumn"] = e.SortExpression;
      ViewState["SortDirection"] = "";
    }
    BindGrid();
  }

GridView.Sorting Event

【讨论】：

【解决方案4】：

超晚，但供参考。它适用于我，使用以下内容：

这是我的代码（在 x.aspx 中）：

<asp:SqlDataSource ID="SqlDataSourceX" runat="server" ConnectionString="xxx"
    EnableViewState="False" OnSelecting="SqlDataSourceXSelecting"></asp:SqlDataSource>

<asp:GridView ....
    AllowSorting="True"
    EnableSortingAndPagingCallbacks="False"
    OnSorted="GridViewResults_OnSorted" ....           DataSourceID="SqlDataSourceX" CssClass="table table-bordered text-left">
    <SortedAscendingHeaderStyle CssClass="SortedAscendingHeaderStyle"></SortedAscendingHeaderStyle>
    <SortedDescendingHeaderStyle CssClass="SortedDescendingHeaderStyle"></SortedDescendingHeaderStyle>
    <Columns>

...

这是我的代码（在 x.aspx.cs 中）：

protected void GridViewResults_OnSorted(object sender, EventArgs e) {
   ExecuteSearch(); //Adds some where clauses to the SQL Data Source, no explicit sorting here
}

点击排序后，这将创建以下表格标题：

<th class="SortedDescendingHeaderStyle" scope="col">
    <a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridViewResults','Sort$LocalUnitId')">BUR Nummer</a>
</th>

【讨论】：