在MVC视图中显示列排序方向 [英] Display column sort direction in MVC view

问题描述

我正在使用搜索，分页和排序开发MVC4应用程序（使用Razor视图）。我有用户名和上载日期列用于排序目的。一切正常但现在我想在我的视图中显示列名后的排序顺序。例如，如果我们点击用户名，它将首次按升序排序。再次按相同的列排序数据按降序排列。但是用户并不知道查看列是否已排序&以何种顺序。



为了将列名称呈现为可排序，我在视图中使用了以下代码

I am developing MVC4 application (using Razor view) with Searching, Paging and Sorting. I have "User Name" & "Upload Date" column for sorting purpose. Everything works fine But now I want to display sorting order after column name in my view. eg If we click on "User Name" it will be sorted in ascending order for first time & Clicking again on the same column sort data in descending order. But User doesn't get any idea looking at view whether column is sorted or not & in which order.

To render column name as sortable, I used following code in my view

<th>
                @Html.ActionLink("User Name", "Sorting", new
                {
                    sortBy = ViewBag.SortUserNameParameter,
                    searchByUserName = Request.QueryString["searchByUserName"],
                    searchByReaderName = Request.QueryString["searchByReaderName"],
                    searchByReaderType = Request.QueryString["searchByReaderType"],
                    searchByUploadDate = Request.QueryString["searchByUploadDate"]
                })
</th>

注意：如果以某种方式我们设法显示向上和向上的图像箭头会很棒除了列名之外的向下方向。



我尝试过：



我是MVC开发的新手。谷歌搜索了很多这个问题，但找不到合适的解决方案。

Note : It would be great if somehow we manage to display image arrow with upward & downward direction besides column name.

What I have tried:

I am new to MVC development. Googled a lot for this issue but can't find appropriate solution.

推荐答案

你可以使用jquery轻松完成这个工作

You can do this easily by using jquery

<script type="text/javascript">

（'thead> tr> th> a [href * =sort=@grid.SortColumn ]'）。parent（）
.append（'@（grid.SortDirection == SortDirection.Ascending？▲：▼）'）;
< / script>

('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent() .append('@(grid.SortDirection == SortDirection.Ascending ? "▲" : "▼")'); </script>

Programmining：System.Web.Helpers.WebGrid中的排序指标 [ ^ ]

这篇关于在MVC视图中显示列排序方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！