json

浏览数：42 / 时间：2015年06月09日

很多次都在纠结网页脚本和后台怎么进行交互，现在想想还是写写关于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);
        }

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

json