Repeater在DotNetNuke中使用Infinite Scrolling

时间:2014-02-04 13:49:43

标签: javascript jquery asp.net dotnetnuke infinite-scroll

我在我的客户模块中使用DotNetNuke,并且遵循正常的asp.net编程方法(拖放/删除)。 该项目是一个使用转发器的发布服务,具有无限滚动和砌体效果。 我按照这里发布的教程:infinite scrolling

加载页面后的一切都很好。 (数据库连接,最初的记录,布局都很好) 但每当我进入页面底部时,它会弹出一条消息:未定义 并且没有新记录出现。

它也无法找到Posts.aspx / getdata

页面

任何帮助都将受到高度要求和宝贵的帮助。

这是转发器:

<asp:Repeater ID="rptr" runat="server">
                <ItemTemplate>
                    <section>
                    <article class="masonry">

                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>'/>

                <section class="article-list-box">

                    <p><asp:Label ID="descLBL" runat="server"><%# Eval("Desc")%></asp:Label></p>    

                    <div class="article_meta">
                        <asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("UserAvatar") %>'/>
                    </div>
                </section>
            </article><!-- [article #1 end] -->
                        </section>

                        </ItemTemplate>
                    </asp:Repeater>

这是

背后的代码
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rptr.DataSource = GetPostData(1);
        rptr.DataBind();
    }          
}

public static DataSet GetPostData(int pageIndex)
{
    string query = "[GetPostsPageWise]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", 10);
    cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd);
}

private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = "My String";
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Posts");
                DataTable dt = new DataTable("PageCount");
                dt.Columns.Add("PageCount");
                dt.Rows.Add();
                dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

[WebMethod]
public static string GetPS(int pageIndex)
{
    return GetPostData(pageIndex).GetXml();
}

和jQuery

<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    });
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "Posts.aspx/GetPS",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var Posts = xml.find("Posts");
        Posts.each(function () {
            var Posts = $(this);
            var table = $("#portfolio table").eq(0).clone(true);
            $(".masonry", table).html(ad.find("Image").text());
            $(".article-list-box", table).html(ad.find("Desc").text());
            $(".article_meta", table).html(ad.find("UserAvatar").text());
            $("#portfolio").append(table).append("<br />");
        });
        $("#loader").hide();
    }

1 个答案:

答案 0 :(得分:0)

这里建议重写:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        rptr.DataSource = GetPostData(1);
        rptr.DataBind();
        if(Request["mode"]!=null){
                int pageIndex = int.Parse( Request["pageIndex"]);
                DataSet ds = GetPostData(pageIndex);
                 System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                 Response.Clear();
                 Response.Write(serializer.Serialize(ds.Tables[0]);
                 //Application.CompleteRequest();
                 Response.End();
        }
    }          
}

使用以下

重写你的js方法
function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "Posts.aspx?mode=ajax&pageIndex="+pageIndex,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response){ alert(response);},
                failure: function (response) {
                    alert(response);
                },
                error: function (response) {
                    alert(response);
                }
            });
        }
    }

这应该适合你。