标签：des style blog io os ar java sp div
很多次都在纠结网页脚本和后台怎么进行交互，现在想想还是写写关于json序列化的问题，虽然不是很经典，但是还是希望能够帮助一些初学mvc的小伙伴，下面我将贴出相关的代码
cshtm：
@{
ViewBag.Title = "电影播放列表";
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>影片剪辑-英语说-随时随地练口语</title>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<style>
.movie-item
{
border-bottom: solid 1px #CCC;
padding: 5px;
margin-top: 0;
}
.movie-item .media-object
{
}
.movie_more
{
line-height: 60px;
text-align: center;
cursor: pointer;
}
.modal-body
{
padding: 0 0 20px 0;
}
.modal-header
{
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="movie_list">
</div>
<div class="movie_more" id="movie_more">
点击加载更多</div>
</div>
<script src="@Url.Content("~/Content/Script/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
var currentpage = 1; //分页
function loaddata(page) {
$(‘movie_more‘).text(‘加载中。。。。‘);
$.ajax({
url: ‘@Url.Action("LoadData")‘,
type: "POST",
data: { page: page },
success: function (data) {
if (data.length == 0) {
$(‘#movie_more‘).text(‘没有更多了‘);
return;
}
$.each(data, function (index, item) {
$(‘#movie_list‘).append(‘ <div class="media movie-item"> <a class="pull-left" href="#"> <img class="media-object" src="‘ + item.ImageUrl + ‘" alt="..." style="width:120px;" onclick="showmodal(\‘‘ + item.Title + ‘\‘,\‘‘ + item.FileUrl + ‘\‘,\‘‘ + item.PreviewFileUrl + ‘\‘)"> </a> <div class="pull-right" href="#"> <a class="btn btn-info" href="‘ + item.FileUrl + ‘">下载</a> </div> <div class="media-body"> <h4 class="media-heading"> ‘ + item.Title + ‘</h4> <div>‘ + item.Desc + ‘</div> <div class="label label-default">‘ + item.CateName + ‘</div> <audio src="‘ + item.FileUrl + ‘"></audio> </div> </div> ‘);//加载电影集合
});
currentpage=page;
$(‘#movie_more‘).text(‘点击加载更多‘);
}
});
}
function showmodal(name, src, presrc) {
$(‘#myModal‘).find(‘.modal-title‘).text(name);
$(‘#myModal‘).find(‘video‘).attr(‘src‘, presrc);
$(‘#myModal‘).find(‘.modal-download‘).attr(‘href‘, src);
$(‘#myModal‘).modal(‘show‘);//预览电影
}
$(function () {
loaddata(currentpage);//加载
$(‘#movie_more‘).click(function(){
loaddata(currentpage+1);//点击更多
});
});
</script>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body" style="text-align: center">
<video controls="controls" style="width: 100%"></video>
<div>
<a href="#" class="btn btn-info modal-download" style="width: 120px; margin-top: 20px;">
下载</a>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
后台代码：
public ActionResult Index()
{
return View();
}
public ActionResult LoadData(int page)
{
int totalcount = 0, pagesize = 20;
var list = MovieFileHelper.GetList((page - 1) * pagesize, pagesize, out totalcount);
return Json(list);
}
标签：des style blog io os ar java sp div
原文地址：http://www.cnblogs.com/jysun/p/4019524.html
