在ASP.NET MVC中进行排序

在上一篇文章中曾经说了一个排序，当然，那个是客户端的排序，能力有限。

但是在我的项目中却真的就需要一个排序功能，鄙人不才，能力有限，写了一堆丑陋的代码，仅实现了功能，希望路过的神们review下。

好，废话不多说，直接【插入】主题吧。（咦？这个词很好啊。）

首先早Models里创建一个实体，这里没弄数据库，凑合凑合吧，就瞎写了个实体。

代码如下：

 public class UserInfo
    {
        public int ID { set; get; }
        public string Name { set; get; }
        public int Age { set; get; }
    }

然后创建一个controller，代码如下：

public ActionResult Index()
        {
           
            return View();
        }

然后是创建一个view。

由于是随便写写，所以就不在弄bll了。在controller里创建3个方法。

第一个充当数据源：

[NonAction]
        private List<UserInfo> AllUsers()
        {
            List<UserInfo> list = new List<UserInfo>();
            list.Add(new UserInfo() {ID=1,Name="张三",Age=18 });
            list.Add(new UserInfo() { ID = 2, Name = "李四", Age = 18 });
            list.Add(new UserInfo() { ID = 3, Name = "王五", Age = 17 });
            list.Add(new UserInfo() { ID = 4, Name = "赵六", Age = 19 });
            list.Add(new UserInfo() { ID = 5, Name = "田七", Age = 22 });
            list.Add(new UserInfo() { ID = 6, Name = "周八", Age = 10 });
            list.Add(new UserInfo() { ID = 7, Name = "吴九", Age = 33 });
            list.Add(new UserInfo() { ID = 8, Name = "郑十", Age = 26 });
            return list;
        }

当然，别忘记引命名空间。

第二个和第三个是排序的重载方法，（丑陋的代码来了）

[NonAction]
        private List<UserInfo> GetUsers()
        {
            return AllUsers();
        }
        [NonAction]
        private List<UserInfo> GetUsers(string sort, bool? desc)
        {
            List<UserInfo> list = AllUsers();
            if (desc==true)
            {
                switch (sort)
                {
                    case "ID":
                        list = list.OrderByDescending(m => m.ID).ToList();
                        break;
                    case "Name":
                        list = list.OrderByDescending(m => m.Name).ToList();
                        break;
                    case "Age":
                        list = list.OrderByDescending(m => m.Age).ToList();
                        break;
                }

            }
            else
            {
                switch (sort)
                {
                    case "ID":
                        list = list.OrderBy(m => m.ID).ToList();
                        break;
                    case "Name":
                        list = list.OrderBy(m => m.Name).ToList();
                        break;
                    case "Age":
                        list = list.OrderBy(m => m.Age).ToList();
                        break;
                }

            }
            return list;
        }

由于desc是bool？，所以我只会这样判断。

然后是action的代码：

public ActionResult Index(string sort,bool? desc)
        {
            List<UserInfo> list ;
            if (String.IsNullOrEmpty(sort) && desc != null)
            {
                list = GetUsers();
            }
            else
            {
                list = GetUsers(sort, desc);
            }

            ViewBag.sort = sort;
            ViewBag.desc = !desc;
            return View(list);
        }

这两个viewbag其实就是以前的viewdata，在这里需要传递到view中，充当开关。

那么我们就来看view里的代码吧，其实很简单：

<table>
            <tr>
                <th>
                    <%:Html.ActionLink("ID","Index",new{sort="ID",desc = ViewBag.sort=="ID"?ViewBag.desc:true}) %>
                </th>
                <th>
                    <%:Html.ActionLink("姓名","Index",new{sort="Name",desc=ViewBag.sort=="Name"?ViewBag.desc:true}) %>
                </th>
                <th>
                    <%:Html.ActionLink("年龄","Index",new{sort="Age",desc=ViewBag.sort=="Age"?ViewBag.desc:true}) %>
                </th>
            </tr>
            <%foreach (MvcApplication1.Models.UserInfo info in Model)
              {%>
            <tr>
                <td>
                    <%:info.ID %>
                </td>
                <td>
                    <%:info.Name %>
                </td>
                <td>
                    <%:info.Age %>
                </td>
            </tr>
            <%} %>
        </table>

当然，记得把view做成强类型。

这样，在点击列头的时候就实现了排序。

当然，可能有人喜欢无刷排序，或许有人会说，应该很麻烦吧。其实在ASP.NET MVC 3中，很多东西都是现成的，必须把刚才的功能做成ajax的。

首先加入js文件：

<script src="http://www.cnblogs.com/Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

然后呢，把table做成局部view，也就是PartialView：

在PartialView中的table中，加上id，记得这个view也要强类型，就是

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<MvcApplication1.Models.UserInfo>>" %>

<table id="datalist">
            <tr>
                <th>
                    <%:Html.ActionLink("ID","Index",new{sort="ID",desc = ViewBag.sort=="ID"?ViewBag.desc:true}) %>
                </th>
                <th>
                    <%:Html.ActionLink("姓名","Index",new{sort="Name",desc=ViewBag.sort=="Name"?ViewBag.desc:true}) %>
                </th>
                <th>
                    <%:Html.ActionLink("年龄","Index",new{sort="Age",desc=ViewBag.sort=="Age"?ViewBag.desc:true}) %>
                </th>
            </tr>
            <%foreach (MvcApplication1.Models.UserInfo info in Model)
              {%>
            <tr>
                <td>
                    <%:info.ID %>
                </td>
                <td>
                    <%:info.Name %>
                </td>
                <td>
                    <%:info.Age %>
                </td>
            </tr>
            <%} %>
        </table>

那么，default1这个view中代码就变成：

 <div>
        <%:Html.Partial("ViewUserControl1",Model) %>
    </div>

下面，仅需要改链接就可以了，改成这样：

 <tr>
                <th>
                    <%:Ajax.ActionLink("ID", "Index", new { sort = "ID", desc = ViewBag.sort == "ID" ? ViewBag.desc : true }, new AjaxOptions { UpdateTargetId = "datalist", InsertionMode = InsertionMode.Replace })%>
                </th>
                <th>
                    <%:Ajax.ActionLink("姓名", "Index", new { sort = "Name", desc = ViewBag.sort == "Name" ? ViewBag.desc : true }, new AjaxOptions { UpdateTargetId = "datalist", InsertionMode = InsertionMode.Replace })%>
                </th>
                <th>
                    <%:Ajax.ActionLink("年龄", "Index", new { sort = "Age", desc = ViewBag.sort == "Age" ? ViewBag.desc : true }, new AjaxOptions { UpdateTargetId = "datalist", InsertionMode = InsertionMode.Replace })%>
                </th>
            </tr>

其中，updatetargetid是更新的内容id，这里就是这个table，第二个是替换。

这时我们运行再来看的话，就会发现现在的排序变成异步的了。怎么样，很简单吧。