ASP.NET Web API教程(二) 获取数据
2012-08-22 14:17
369 查看
书接上文,打开上一个文章中的项目。(可以从上一个文章中下载到 ASP.NET Web API教程(一) 你的第一个Web API )
添加类库项目 Entities
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v1.jpg)
添加用户实体
public class UserInfo
{
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;
}添加 UserInfoController
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v2.jpg)
选择 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();
}
后台准备好了,开始编写前台了
添加新页面以及内容
第一步引入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>
第二步编写显示模板
<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>
第三步 编写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>
运行点击得到结果:
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v3.jpg)
本章内容源码下载:/Files/risk/web api 2/MvcApplication1.rar
添加类库项目 Entities
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v1.jpg)
添加用户实体
public class UserInfo
{
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;
}添加 UserInfoController
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v2.jpg)
选择 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();
}
后台准备好了,开始编写前台了
添加新页面以及内容
第一步引入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>
第二步编写显示模板
<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>
第三步 编写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>
运行点击得到结果:
![](http://images.cnblogs.com/cnblogs_com/risk/web%20api%202/v3.jpg)
本章内容源码下载:/Files/risk/web api 2/MvcApplication1.rar
相关文章推荐
- ASP.NET Web API实践系列07,获取数据, 使用Ninject实现依赖倒置,使用Knockout实现页面元素和视图模型的双向绑定
- 【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据
- 【ASP.NET Web API教程】5.3 发送HTML表单数据:文件上传与多部分MIME
- 【ASP.NET Web API教程】5.3 发送HTML表单数据:文件上传与多部分MIME
- ASP.NET Web API教程(五) 数据验证
- ASP.NET Web API获取Model元数据
- 【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据
- Scott Mitchell 的ASP.NET 2.0数据教程之三十三:: 使用DropDownList过滤的主/从报表
- asp.net web api 解决ajax跨站点post请求提交 json 数据问题
- Scott Mitchell 的ASP.NET 2.0数据教程之68:在TableAdapters里使用现有的存储过程
- 【翻译】Scott Mitchell 的ASP.NET 2.0数据教程
- Scott Mitchell 的ASP.NET 2.0数据教程之一: 创建一个数据访问层
- ASP.NET 2.0数据教程之二十八 GridView里的Button
- ASP.NET 2.0数据教程之三十二 数据控件的嵌套
- java jsoup 爬虫爬asp.net网站遇到_doPostBack不能获取翻页数据解决办法
- ASP.NET 2.0数据教程之三十五 使用Repeater和DataList实现的主/从报表
- Scott Mitchell 的ASP.NET 2.0数据教程之四十二::为删除数据添加客户端确认
- ASP.NET 结合fullCalendar 获取数据库数据填充页面
- Asp.net mvc 3.0入门教程之五——从控制器访问模型数据
- Scott Mitchell 的ASP.NET 2.0数据教程之二十二:为删除数据添加客户端确认