@model PagingAndSortingInMVC.Models.Student @{ ViewBag.Title = "AddStudent"; } <h2>AddStudent</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div> <h4>Student</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Sex, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Sex, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Sex, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) </div> </div> <div> <div> <input type="submit" value="Create" /> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> <script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/~/Scripts/jquery.validate.min.js"></script> <script src="https://www.jb51.net/~/Scripts/jquery.validate.unobtrusive.min.js"></script>
接着修改一下布局页：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="https://www.jb51.net/~/Content/Site.css" type="text/css" /> <link href="https://www.jb51.net/~/Content/bootstrap.min.css" type="text/css" /> <script src="https://www.jb51.net/~/Scripts/modernizr-2.6.2.js"></script> </head> <body> <div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div> <ul> @Html.ActionLink("Student List","Index") @Html.ActionLink("Add Student ", "AddStudent") </ul> </div> </div> </div> <div> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> <script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/~/Scripts/bootstrap.min.js"></script> </body> </html>
修改一下默认路由：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace PagingAndSortingInMVC
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Student", action = "Index", id = UrlParameter.Optional }
);
}
}
}
运行项目：
刚开始没有任何数据，我们添加几条测试数据：
我们来验证一下，结果：
看到了么，点击相应的列标题就可以进行排序了。分页也实现了。当然分页的样式可以通过改变这个选项：
@Html.PagedListPager(Model, page => Url.Action("Index", new { page}),PagedListRenderOptions.Classic)
这里，我修改了一下
@Html.PagedListPager(Model, page => Url.Action("Index", new { page}),PagedListRenderOptions.TwitterBootstrapPager)
分页控件的效果就是这样了。
好了，这篇文章到此结束。
总结：分页和排序是很重要的功能，需要熟练掌握。