asp.net ListView 排序箭头答案

【问题标题】：asp.net ListView sorting arrowsasp.net ListView 排序箭头
【发布时间】：2012-06-14 22:12:25
【问题描述】：

如何将一个箭头图像（向上或向下）添加到列表视图的标题中，以便在单击它时按升序/降序对列进行排序？

目前我只有一个可以进行排序的链接：

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" >Position</asp:LinkButton>

【问题讨论】：

标签： c# asp.net image listview sorting

【解决方案1】：

有很多方法可以做到这一点。一种是使用 jquery 在客户端执行此操作。您可以添加一个跨度或 div 或图像，并根据排序状态使用 jquery 切换它。

<style>
    .sortNotSelected
    {
        background-image: none;
        width: 15px;
        height: 15px;
    }
    .sortAscending
    {
        background-image: url('down.png');
        width: 15px;
        height: 15px;
    }
    .sortDescending
    {
        background-image: url('up.png');
        width: 15px;
        height: 15px;
    }

</style>

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" OnClientClick="changeSortState();">Position</asp:LinkButton>
<span id="imgSortPosition" class="sortNotSelected"></span>

<script>
    function changeSortState(){
        if ($('#imgSortPosition').attr('class') == 'sortNotSelected'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortAscending');
        }  
        else if ($('#imgSortPosition').attr('class') == 'sortAscending'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortDescending');
        }  
        else 
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortNotSelected');
        }  

    }
</script>

在服务器端执行此操作的另一种方法。您可以根据 Command Sort 上的排序状态添加控件并更改 ImageUrl 属性

<asp:ImageUrl ID="imgSort" runat="server" />

后面的代码

if (sortAsc)
{
    imgSort.ImageUrl = "up.png";
}

// and so on

您可以将此图像添加到列表视图的布局模板中

【讨论】：

第二种方式是我想过的方式，但是if(sortAsc)怎么判断呢？
通常它会去none-asc-desc-none-然后继续。因此，您可以通过查看加载到图像控件中的当前图像来确定它，或者您可以将状态保持在 ViewState 中。
我已经尝试了上述方法，只是得到 changeSortState() 是未定义的。即使它在 asp:Content 字段中。知道为什么它不捡起来吗？我的 aspx 页面中有 2 个内容字段。