BackBone结合ASP.NET MVC实现页面路由操作

1、 问题的背景

什么是页面路由操作，就是通过浏览器地址栏的标记来实现页面内部的一些操作，这些操作具有异步性和持久性。应用场景主要有页面操作过程中的添加收藏夹的操作、后退操作等过程中能完全恢复界面。

Html中window.history.pushState的出现实现了页面路由操作。由于操作比较复杂，我们采用backbone的封装的路由操作来实现下面的案例。

2、 实现目标

我们要实现的应用程序左侧导航，右侧展示数据。可以加入收藏夹，可以回退，恢复和回退时可以完全恢复现场。

这个程序的逻辑思路为按照班级筛选学生

程序截图如下



当程序加载时我们观察浏览器栏的变化
http://localhost:56968/#searchByClassCode/all
当我们点击导航【三年一班】时，我们观察浏览器栏的变化
http://localhost:56968/#searchByClassCode/0301
我们发现浏览器栏里的数据变为0301

如图所示



当我们点击【三年二班】，我们观察浏览器栏的变化
http://localhost:56968/#searchByClassCode/0302
我们发现浏览器栏里的数据变为0302

如图所示



当我们点击后退时，我们观察浏览器栏的变化
http://localhost:56968/#searchByClassCode/0301
我们发现浏览器栏里的数据变为0301



我们总结出下面的结论

1、将http://localhost:56968/#searchByClassCode/0301加入收藏夹，当点击收藏夹时，能完整的还原现场。

2、点击后退时能退回到【三年一班】

3、整个过程都是异步刷新，没有同步刷新。

3、 实现的工具和材料

VS2010+MVC4+Backbone.js。必须要装MVC4

4、 实现整体过程

1、新建mvc项目

在model文件夹 新建Student的类，定义如下

public class Student
{
#region 学号
/// <summary>
/// 学号
/// </summary>
public string Number
{
get;
set;
}
#endregion

#region 姓名
/// <summary>
/// 姓名
/// </summary>
public String Name
{
get;
set;
}
#endregion

#region 班级
/// <summary>
/// 班级
/// </summary>
public String ClassName
{
get;
set;
}
#endregion

#region 班级编码
/// <summary>
/// 班级编码
/// </summary>
public string ClassCode
{
get;
set;
}
#endregion

2、 新建HomeController

里面的两个路由地址分别为Index和GetList。其中Index用于显示页面

GetList用于提供数据服务，其中classCode为班级代码，用于查询某个班级下的学生，如果参数值为空或all就取所有的，否则就按照编码检索，返回值数据为json数据

实现如下

public class HomeController : Controller
{
/// <summary>
/// 主页
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
/// <summary>
/// 获取数据
/// </summary>
/// <param name="classCode"></param>
/// <returns></returns>
public ActionResult GetList(string classCode)
{
string content = new StreamReader(Server.MapPath("~/Content/Data/Student.json")).ReadToEnd();
List<Student> list = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Student>>(content);
if (!string.IsNullOrEmpty(classCode))
{
if (classCode != "all")
{
list = list.Where(item => item.ClassCode == classCode).ToList();
}
}
return new JsonResult()
{
Data = list,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}

为了方便数据的提供服务采用json文件的方式，并没有采用关系型数据库，数据如下：

[{
"Number": "000001",
"Name": "学生1",
"ClassName": "三年一班",
"ClassCode": "0301"
},
{
"Number": "000002",
"Name": "学生2",
"ClassName": "三年二班",
"ClassCode": "0302"
},
{
"Number": "000003",
"Name": "学生3",
"ClassName": "三年三班",
"ClassCode": "0303"
},
{
"Number": "000004",
"Name": "学生4",
"ClassName": "三年四班",
"ClassCode": "0304"
},
{
"Number": "000005",
"Name": "学生5",
"ClassName": "三年一班",
"ClassCode": "0301"
},
{
"Number": "000006",
"Name": "学生6",
"ClassName": "三年二班",
"ClassCode": "0302"
},
{
"Number": "000007",
"Name": "学生7",
"ClassName": "三年三班",
"ClassCode": "0303"
},
{
"Number": "000008",
"Name": "学生8",
"ClassName": "三年四班",
"ClassCode": "0304"
},
{
"Number": "000009",
"Name": "学生9",
"ClassName": "三年一班",
"ClassCode": "0301"
},
{
"Number": "000010",
"Name": "学生10",
"ClassName": "三年二班",
"ClassCode": "0302"
},
{
"Number": "000011",
"Name": "学生11",
"ClassName": "三年三班",
"ClassCode": "0303"
},
{
"Number": "000012",
"Name": "学生12",
"ClassName": "三年四班",
"ClassCode": "0304"
},
{
"Number": "000013",
"Name": "学生13",
"ClassName": "三年一班",
"ClassCode": "0301"
},
{
"Number": "000014",
"Name": "学生14",
"ClassName": "三年二班",
"ClassCode": "0302"
},
{
"Number": "000015",
"Name": "学生15",
"ClassName": "三年三班",
"ClassCode": "0303"
},
{
"Number": "000016",
"Name": "学生16",
"ClassName": "三年四班",
"ClassCode": "0304"
},
{
"Number": "000017",
"Name": "学生17",
"ClassName": "三年一班",
"ClassCode": "0301"
},
{
"Number": "000018",
"Name": "学生18",
"ClassName": "三年二班",
"ClassCode": "0302"
}]

3、 后台数据服务实现好了，我们定义Backbone的路由服务

根据之前浏览器栏的地址的数据
http://localhost:56968/#searchByClassCode/0301 http://localhost:56968/#searchByClassCode/0302 http://localhost:56968/#searchByClassCode/all
我们定义下面的路由

searchByClassCode/:code

searchByClassCode/
对应的处理函数为getData。其中 ：code为编码。
学生通过列表导航传入这些值。

<ul id="ulNav">
<li>
<a href="#searchByClassCode/all">全部</a>
</li>
<li>
<a href="#searchByClassCode/0301">三年一班</a>
</li>

<li>
<a href="#searchByClassCode/0302">三年二班</a>
</li>

<li>
<a href="#searchByClassCode/0303">三年三班</a>
</li>
<li>
<a href="#searchByClassCode/0304">三年四班</a>
</li>

</ul>

路由的实现如下

var Route = Backbone.Router.extend({
routes: {
"searchByClassCode/:code": "getData",
"searchByClassCode/": "getData"
},
getData: function (code) {
stuCollection.fetch({ reset: true, data: { classCode: code} });

$('#ulNav li').each(function (index, item) {
if ($(item).find("a[href$='" + code + "'").length > 0) {
$(this).find("a").addClass('liSelected');
}
else {
$(this).find("a").removeClass('liSelected');
}
});
}
});

4、 路由服务定义完毕，需要把数据展示展示出来。Backbone的模型和列表

var StuModel = Backbone.Model.extend({
Number: "",
Name: "",
ClassName: ""
});

var StuCollection = Backbone.Collection.extend({
model: StuModel,
url: "/home/GetList"
});

5、 我们实例化模型，监控模型的变化。

var stuCollection = new StuCollection();

var DataContentView = Backbone.View.extend({
el: "#divContent",
template: _.template($("#stuItem").html()),
initialize: function () {
this.$tableView = this.$('#tableView');
this.listenTo(stuCollection, 'reset', this.AddAll)
},
AddAll: function () {
this.$tableView.find("tbody").html("");
stuCollection.each(this.AddOne, this);
},
AddOne: function (stu) {
var a = $(this.template(stu.toJSON()));

a.on("click", function () {
if ($(this).is('.select')) {
$(this).removeClass("select")
}
else {
$(this).addClass("select")
}
})
this.$tableView.find("tbody").append(a);
}
});

其中展示部分的表格

<table id="tableView" cellpadding="5" cellspacing="5" style=" overflow:auto">
<thead>
<tr>
<th>
学号
</th>
<th>
姓名
</th>
<th>
班级
</th>
</tr>
</thead>

<tbody></tbody>
</table>

定义的模板为

<script type="text/template" id="stuItem">
<tr>
<td><%= Number%></td>
<td><%= Name%></td>
<td><%= ClassName%></td>
</tr>
</script>

下载源代码