一则C#简洁瀑布流代码__What's_html_with_you_data_

当前位置: 编程技术>.net/c#/asp.net

一则C#简洁瀑布流代码

来源: 互联网发布时间：2014-10-30

本文导语: View页面。代码如下:@{ ViewBag.Title = "瀑布流"; Layout = "~/Views/Shared/_Layout.cshtml"; }@section header{ .* { margin:0px; padding:0px; } body { ...

View页面。

代码如下:

@{
        ViewBag.Title = "瀑布流";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
@section header{


        .* {
         margin:0px;
         padding:0px;
        }
        body {
            margin-left:auto;
            margin-right:auto;
        }
        .ClearBoth {
            clear:both;
        }
        #bodyContent {
            width:1400px;
            margin-left:auto;
            margin-right:auto;
        }
        #head {
            width:100%;
            height:50px;
            margin-bottom:10px;
        }
        #LefMenue {
            width:20%;
            height:500px;
            float:left;
        }
        #RightContent {
            width:75%;
            float:right;
            border: thin solid #333;
        }
        #Footer {
            margin-top:10px;
            width:100%;
            height:40px;
        }
        .GreyBlock {
            border: thin solid #333;
            background-color:#CCC;
            width:100%;
        }
        .Item {
            float: left;
            width: 230px;
            margin:5px;
            border: 1px solid #CCC;
        }

}

Head

                       What's up with you

加载中，请稍后...

@section scripts{

        var myContainer = $("#ProductList");
        //用户拖动滚动条，达到底部时ajax加载一次数据
        var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求
        $(window).scroll(function () {
            if ($("#loading").data("on"))//
            {
                return;
            }
            var isButtom = $(document).scrollTop() > ($(document).height() - $(window).height() - $("#Footer").height());
            if (isButtom) {//页面拖到底部了
                //加载更多数据
                loading.data("on",true).fadeIn();
                $.get("@Url.Action("GetData","Product")", function (data) {
                    var html = CreateHtml(data);
                    var $newElems = $(html).css({ opacity: 0 }).appendTo(myContainer);
                    $newElems.animate({ opacity: 1 },3000);
                    loading.data("on", false);
                    loading.fadeOut();
                },"json");
            }
        });
        function CreateHtml(data) {
            var html = "";
            if ($.isArray(data)) {
                for (var i in data) {
                    //html += "

";
html += "

";
                    html += "";
                    html += "";
                    html += "

";
                    html += "";
                    html += "";
                    html += "What's up with you " + data[i];
                    html += ""
                    html += ""
                    html += "

"
                }
            }
            return html;
        }

    }

C#服务端：

代码如下:

public JsonResult GetData()
{
Random ro = new Random();

            List vListInt = new List();
            for (int i = 0; i < 12; i++)
            {
                vListInt.Add(ro.Next(400, 500));
            }
            return Json(vListInt, JsonRequestBehavior.AllowGet);
        }

您可能感兴趣的文章:

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。