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="@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)