书接上文,打开上一个文章中的项目。（可以从上一个文章中下载到 ASP.NET Web API教程(一) 你的第一个Web API ）
添加类库项目 Entities
添加用户实体
public
class UserInfo
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
添加数据以及数据操作
private List<UserInfo> Data =
new List<UserInfo>() {
new UserInfo(){
Id= 1,
Name= " 哈哈 ",
Age= 10
},
new UserInfo(){
Id= 2,
Name= " 嘿嘿 ",
Age= 19
},
};
public IEnumerable<UserInfo> Get()
{
return Data;
}
new UserInfo(){
Id= 1,
Name= " 哈哈 ",
Age= 10
},
new UserInfo(){
Id= 2,
Name= " 嘿嘿 ",
Age= 19
},
};
public IEnumerable<UserInfo> Get()
{
return Data;
}
添加 UserInfoController
选择 API Controller with empty read/write actions
添加Entities引用
修改Controller的 Get方法
BLL_UserInfo bll =
new BLL_UserInfo();
// GET api/userinfo
public IEnumerable<UserInfo> Get()
{
return bll.Get();
}
// GET api/userinfo
public IEnumerable<UserInfo> Get()
{
return bll.Get();
}
后台准备好了，开始编写前台了
添加新页面以及内容
第一步引入js
<script src=
"
Scripts/jquery-1.7.1.min.js
" type=
"
text/javascript
"></script>
<script src= " Scripts/knockout-2.1.0.js " type= " text/javascript "></script>
<script src= " Scripts/knockout-2.1.0.js " type= " text/javascript "></script>
第二步编写显示模板
<
a
href
="javascript:void()"
id
="getUserInfos"
>获取
</
a
>
< ul data-bind ="template: {name: 'userinfoTemplate', foreach: userinfos}" >
</ ul >
< script id ="userinfoTemplate" type ="text/html" >
< li class = " userinfo " >
< header >
< div class = " info " >
< strong >< span data - bind = " text: Name " >< / span>< / strong >
< / div>
< / header>
< div class = " body " >
< p data - bind = " text: Age " >< / p>
< / div>
< / li>
</ script >
< ul data-bind ="template: {name: 'userinfoTemplate', foreach: userinfos}" >
</ ul >
< script id ="userinfoTemplate" type ="text/html" >
< li class = " userinfo " >
< header >
< div class = " info " >
< strong >< span data - bind = " text: Name " >< / span>< / strong >
< / div>
< / header>
< div class = " body " >
< p data - bind = " text: Age " >< / p>
< / div>
< / li>
</ script >
第三步 编写JS
<
script
type
="text/javascript"
>
viewModel = {
userinfos: ko.observableArray([])
};
ko.applyBindings(viewModel);
$( function () {
$( " #getUserInfos " ).click( function () {
// 使用 Knockout 模型. 首先清空一下UserInfos.
viewModel.userinfos([]);
$.get( ' /api/userInfo ' , function (data) {
// 从API中
// 得到返回的数据，更新 Knockout 模型并且绑定到页面UI模板中
viewModel.userinfos(data);
});
});
});
</ script >
viewModel = {
userinfos: ko.observableArray([])
};
ko.applyBindings(viewModel);
$( function () {
$( " #getUserInfos " ).click( function () {
// 使用 Knockout 模型. 首先清空一下UserInfos.
viewModel.userinfos([]);
$.get( ' /api/userInfo ' , function (data) {
// 从API中
// 得到返回的数据，更新 Knockout 模型并且绑定到页面UI模板中
viewModel.userinfos(data);
});
});
});
</ script >
运行点击得到结果:
