首页 > 代码库 > json
json
很多次都在纠结网页脚本和后台怎么进行交互，现在想想还是写写关于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="http://www.mamicode.com/@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="http://www.mamicode.com/@Url.Content("~/Content/Script/jquery-1.10.2.min.js")" type="text/javascript"></script> <script src="http://www.mamicode.com/@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="http://www.mamicode.com/#"> <img class="media-object" src="http://www.mamicode.com/‘ + item.ImageUrl + ‘" alt="..." style="width:120px;" onclick="showmodal(\‘‘ + item.Title + ‘\‘,\‘‘ + item.FileUrl + ‘\‘,\‘‘ + item.PreviewFileUrl + ‘\‘)"> </a> <div class="pull-right" href="http://www.mamicode.com/#"> <a class="btn btn-info" href="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/#" 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); }
json
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。