asp.net+Ajax根据滚动条动态异步加载数据

当前位置：网站建设 > 技术支持

asp.net+Ajax根据滚动条动态异步加载数据

资料来源：网络整理时间：2023/2/14 0:12:33 共计：3616 浏览

闲来无事，自己用asp.net编写了一个根据滚动条结合Ajax异步加载页面数据的demo，特此拿出来分享给大家。独乐乐不如众乐乐。哈哈！

一、实现原理剖析

根据滚动条距离窗体上方或者下方距离值通过ajax异步获取数据的原理其实不是那么难懂。

1、能够通过js准确获取滚动条时时位置，包括距离窗体上方或者下方位置值等；

2、编写ajax提供数据源，返回json数据。

3、前台拿到json数据实现数据的动态追加。

二、实现步骤

1、编写提供json数据的方法，这里的动态数据是随机生成的，后期自己可以变成访问数据库得到数据。asp.net编写的方法如下所示：

protected void Page_Load(object sender, EventArgs e)
{
            string getType = Request["type"];
            int startNum = int.Parse(Request["startNum"]);
            int endNum = int.Parse(Request["endNum"]);
            switch (getType)
            { 
                case "getList":
                    GetDataList(startNum, endNum);
                    break;
            }
}
        
/// <summary>
/// 获取数据
/// </summary>
 /// <param name="StartNum">起始脚标值</param>
/// <param name="EndNum">结束脚标值</param>
protected void GetDataList(int StartNum, int EndNum)
{
            List<string> NumList = new List<string>();
            int i =  0;
            for (i = StartNum; i <= EndNum; i++)
            {
                NumList.Add(string.Format("{0}、欢迎来到<a href=\"http://www.stepday.com\" target=\"_blank\">STEP DAY</a>社区，我的屌丝窝地址为：<a href=\"http://www.stepday.com/my.stepday/?Coder\" target=\"_blank\">http://www.stepday.com/my.stepday/?Coder</a>!", i.ToString()));
            }
            Response.Write(NumList.ToJson());
            Response.End();
}

2、创建一个index.aspx页面


<div id="divContainer">     
</div>
<div id="Loadding">
        数据正在加载，请稍候 ...
</div>

设置相关的css样式


<style type="text/css">
        div#Loadding
        {
            text-align: center;
            padding-top:40px;
            top:40%;
            left:40%; 
            width:300px;    
            height:100px;
            background-color:Green;      
            display_: none;
            font-weight: bold;
            position:fixed;
            color:Red;
        }
        div#content
        {
            width: 100%;
            height: 900px;
            text-align: left;
            line-height:30px;
        }
</style>

引入jQuery的js文件


<title>根据滚动条动态异步加载数据</title>
<script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script>

通过扩展jQuery，编写一个监听滚动条的方法


if (!NeuF) var NeuF = {};

NeuF.ScrollPage = function (obj, options, callback) {
            var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置：延迟时间delay和滚动条距离底部距离marginBottom
            options = $.extend(_defaultOptions, options);
            this.isScrolling = false; //是否在滚动
            this.oriPos = 0; //原始位置
            this.curPos = 0; //当前位置
            var me = this; //顶层
            var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
            //绑定滚动事件
            $obj.scroll(function (ev) {
                me.curPos = $obj.scrollTop();
                if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
                    if (me.isScrolling == true) return;
                    me.isScrolling = true;
                    setTimeout(function () { me.isScrolling = false; }, options.delay);   //重复触发间隔毫秒
                    if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
                };
                me.oriPos = me.curPos;
            });
};

编写一个jQuery的Ajax方法


//异步获取数据
function AjaxGetData(startNum, endNum) {
            $.ajax({
                type: "Get",
                url: "/Ajax/GetData_Ajax.aspx",
                dataType: "json",
                timeout: 10000,
                async: false,
                data: "&type=getList&startNum=" + startNum + "&endNum=" + endNum + "&dateTime=" + (new Date()).toString(),
                beforeSend: function () {
                },
                success: function (result) {
                    if (result) {
                        var contentObj = $("#divContainer");
                        var content = '<div id="content" class="content">';
                        for (var i = 0; i < result.length; i++) {
                            content += result[i] + "<br/>";
                        }
                        content += '</div>';
                        contentObj.append(content);
                        //内容获取后，隐藏加载提示
                        $("#Loadding").hide();
                    }
                },
                error: function (errorMsg) {
                    alert("主人出错啦!");
                }
            });
}

页面初始化需要执行的方法

//初始化加载数据
var startNum = 1;
var endNum = 30;
var pageSize = 30;
$(document).ready(function () {
            AjaxGetData(startNum, endNum);
            window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
            //marginBottom表示滚动条离底部的距离，0表示滚动到最底部才加载，可以根据需要修改  
            new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
                if (offset > 0) {
                    $("#Loadding").show(); //加载提示
                    setTimeout(function () {
                        //计算计数器
                        startNum += pageSize;
                        endNum += pageSize;
                        //这里就是异步获取内容的地方，这里简化成一句话，可以根据需要修改
                        AjaxGetData(startNum, endNum);                       
                    }, 1000);
                }
            });
});

主要用到的还是jQuery，如果其中有任何疑问欢迎留言。谢谢。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：解决Visual Stuido 2012中Mono For Android *.axml文件没有智能提示问题 | ·下一条：jquery easyui datagrid使用，分页、排序、查询