加载附加数据使用jQuery Ajax和ASP.NET向下滚动页面

时间:2015-07-20 09:42:08

标签: c# jquery asp.net ajax

我正在尝试在我的项目中应用标题功能,并决定尝试一下以了解它是如何工作的。但在测试时,当我滚动到页面底部时,它会显示一条客户端脚本错误消息Undefined。我不知道在我的代码中我做错了什么,我不知道如何让它工作。我希望有人能帮助我摆脱困境。以下是代码:

中继器

<div id="dvCampaigns">
    <asp:Repeater ID="rptUsers" runat="server">
       <ItemTemplate>
           <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
               border: dashed 2px #04AFEF; background-color: #B0E2F5">
               <tr>
                  <td>
                      <b><u><span class="campaignname">
                      <%# Eval("CampaignName") %></span></u></b>
                  </td>
               </tr>
               <tr>
                   <td>
                       <b>Description: </b><span class="description">
                          <%# Eval("Description") %></span><br />
                          <b>ID: </b><span class="campaign-id">
                          <%# Eval("CampaignID") %></span><br />
                          <b>Date Created: </b><span class="datecreated">
                         <%# Eval("CreatedOn")%></span><br />
                   </td>
               </tr>
           </table>
           <br />
      </ItemTemplate>
   </asp:Repeater>
</div>
<div>
    <img id="loader" alt="" src="../Images/loading.gif" style="display: none" />
</div>

代码隐藏

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            rptCampaigns.DataSource = GetUserData(1);
            rptCampaigns.DataBind();
        }
    }

    public static TList<POLLice.Entities.Campaigns> GetCampaignData(int pageIndex)
    {
        int totalData;
        var items = new CampaignsService().GetAll(pageIndex, 10, out totalData);
        return items;
    }

    [WebMethod]
    public static string GetCampaigns(int pageIndex)
    {
        var dataset = GetUserData(pageIndex).ToDataSet(true);
        return dataset.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: "UserProfile/Default.aspx/GetCampaigns",
                    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 campaigns = xml.find("Campaigns");
            campaigns.each(function() {
                var campaign = $(this);
                var table = $("#dvCampaigns table").eq(0).clone(true);
                $(".campaignname", table).html(campaign.find("CampaignName").text());
                $(".description", table).html(campaign.find("Description").text());
                $(".campaign-id", table).html(campaign.find("CampaignID").text());
                $(".datecreated", table).html(campaign.find("CreatedOn").text());

                $("#dvCampaigns").append(table).append("<br />");
            });
            $("#loader").hide();
        }
    </script>

非常感谢。

1 个答案:

答案 0 :(得分:0)

在你的ajax中你有这一行:

url: "UserProfile/Default.aspx/GetCampaigns",

您是否删除了包含此帖子的http的完整路径,或者它是否与您的代码中的方式相同?这需要web方法的相对或绝对路径。另外,当使用ajax调用web方法时,您需要使用:

[ScriptMethod(ResponseFormat = ResponseFormat.Json)] //or whatever your return format is
[WebMethod]