asp.net mvc 2.0+Silverlight播放器开发的TeamVideo视频播放网站--系列3

本应该这个系列都应该做完了，抱歉，最近身体不适耽误了进程。。。。。。。。。。。

前面的文章：

asp.net mvc 2.0+Silverlight播放器开发的TeamVideo视频播放网站--系列1

asp.net mvc 2.0+Silverlight播放器开发的TeamVideo视频播放网站--系列2

 

之前有几个园友要源代码，我把它给上传到codeplex上了。你可以到这里下载最新的代码。。。(目前没有发布版本，所以只能下载最新的开发版的代码)。

http://temvideos.codeplex.com/SourceControl/list/changesets

 

项目首页目前还没更新，只是简单的添加了些介绍：

如果你有时间来一起进行这个项目的完善，欢迎加入。。。。。。可以给我留言。。

 

前天晚上画了下管理Video页面：

 

添加和修改Video的页面如下：

 

我比较喜欢在功能想明白后，开始把所有的功能用画图简单的画出来，可能是我对图形比较容易接受。这样的好处是：

在写代码时不需要看着一堆文字来找功能，而是照着图就可以去把每个功能都给写出来。

 

在管理微薄这块，没有太多的值得说明的东西。我准备和大家分享如下内容：

1.   Ajax实现的分页显示记录功能。
2.   分享一个AJAX Load图片生成的网站。
3. 关于下载后数据库还原后需要修改和注意的内容。

  Ajax实现的分页显示记录功能

思路：在页面上会有两个图片，一个是向前翻页，一个是向后翻页，点击图片时，使用jQuery的ajax post功能向服务器端发送一个页码号，比如点击后回传的页码是4，服务器端会通过页面来判断要返回给客户端的记录应该是哪些，然后会通过代码来构建一个html模板，在把html拼好后返回给客户端，客户端会把一个table清空，并把这段返回的html作为表的body显示出来。

 

具体实现过程：

首先在VideoManagerController中添加上如下代码，这样是为了在index页面加载时View界面能够有内容。

 

在View页面添加两个图片，分别代表向前或者向后翻页：

html代码：

<img src="../../images/prev.ico" id="prev" class="nav" />

<img src="../../images/next.ico" id="next" class="nav" />

默认页面加载时，我会在javascript写入当前页面是0也就是PageIndex=0；如果点击向后翻页的按钮，PageIndex就会+1；

这里需要注意的是当PageIndex为0或者为最大页数时，点击前翻页或者后翻页就分别不会有任何数据交互了。

 

当前记录可以分多少页呢，使用一个隐藏的input来存放它：

<input type="hidden" id="pageCount" value='<%=(Math.Ceiling(new mediaEntities().Videos.Count()/5.0)) %>' />

 

如何来控制页面翻滚时不会超出最大或者最小值？

主要是通过判断pageIndex的值来进行，如果已经是0了，那么我们就直接return，不再执行代码了。当页面数最大时道理相同。

 

点击翻页图片后，执行完上面的javascript，就开始向服务器端Post请求了：

$('#loader').html(" src='images/ajax-loader.gif''/>").css('width', '50');

$.ajax({ type: 'POST',

url: 'VideoManager/getdata',

data: { pageIndex: $('#pageIndex').val() },

success: function (data) {

$('#empTable tbody').html(data);

$('#loader').html('').css('background-color', 'white');

} });

向服务器端发送的请求主要是post过去一个PageIndex,成功请求后，返回的数据作为id为empTable的body内容。这样就把格式的生成交给了服务器端。。。。。。

 

 

 

 

 

 

 

 

 

下面我们完成getdata方法的代码：

 

分享一个AJAX Load图片生成的网站

上面的页面最终效果如下：

你可以看到在把数据绑定到table前，我们会让一个ajax-loading图表显示出来，这个已经很普遍了，大家是个网站都会这样，但是

我这里给你说得是如何来得到这个图：

http://www.ajaxload.info/#preview

是的，你不需要会设计gif图，来这个网站就可以自动生成各种自己喜欢的loading图片：

这么多样式你可以选择，然后你还可以选择动画的颜色和背景的颜色。。。。希望对你有用。。。。

 

关于下载后数据库还原后需要修改和注意的内容

如果你从http://temvideos.codeplex.com/下载了源代码，需要注意的是你需要修改数据库中video表中的Url值：

 

Cheers

Nic