首先早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,第二个是替换。