css - 将图像按排序顺序 MVC WebGrid

Question

当您对 WebGrid 进行排序时，我想在列中放置背景图像

我在视图中的代码如下：

@grid.GetHtml(
    fillEmptyRows: true,
    headerStyle: "hearder-grid",
    ... 
             )

Css 样式中的代码：

tr.hearder-grid .asc{
                background: transparent url('/Content/themes/base/Images/asc.png') center right no-repeat;

        }

tr.hearder-grid .desc{
                background: transparent url('/Content/themes/base/Images/desc.png') center right no-repeat;
        }

此代码不起作用

有人可以帮助我吗？

祝福

Answer 1

你需要一个助手。

   public static class SortHelper
     {
       public static MvcHtmlString Direction(this HtmlHelper helper, string columnName)
         {
           string html = "";
           if (columnName.Contains("whatever name you are using to represent descending"))
            {
               html = "▲";
            }
          else
           {
             html = "▼";
           }
           return MvcHtmlString.Create(html);
        }
   }

然后你只需与标题连接

 SortDirectionHelper.SortDirection(null, "columnname")

您可以在以下网址中看到更好的示例：

https://www.youtube.com/watch?v=s4SoNOwbKek