asp.net은 AJAX를 사용하여 새로 고침 없는 페이징을 구현합니다.

쿼리 기능은 개발에서 가장 중요한 기능입니다. 많은 양의 데이터를 표시할 때 가장 많이 사용하는 것이 페이징입니다.

ASP.NET에는 Repeater, GridView 등 많은 데이터 표시 컨트롤이 있습니다. 가장 일반적으로 사용되는 GridView에는 자체 페이징 기능도 있습니다. 그러나 GridView를 사용하여 데이터를 표시할 때 ViewState가 비활성화되지 않으면 페이지 크기가 매우 커질 것이라는 것을 알고 있습니다. 그리고 일반적으로 홈페이지, 다음 페이지, 이전 페이지, 마지막 페이지를 클릭하면 이러한 기능으로 인해 페이지 포스트백이 발생하므로 서버와 완전히 상호 작용해야 하며, 응답 시간과 전송되는 데이터의 양이 매우 큽니다. .

AJAX 페이징은 이러한 문제를 매우 효과적으로 해결할 수 있습니다.

데이터 표시 Pasing.aspx 페이지 JS 코드:

<script type=text/javascript>
       var pageIndex = 0;
       var pageSize = 5;
window.onload = AjaxGetData(name,0,5);
function AjaxGetData(name, index, size){
        $.ajax({
            url: jQueryPaging.aspx,
            type: Get,
            data: Name= + name + &PageIndex= + index + &PageSize= + size,
            dataType: json,
            success: function (data) {
                var htmlStr = ;
                htmlStr +=
                htmlStr +=
                htmlStr +=
                htmlStr += ;
                htmlStr +=    //data.cloudfileLists.length
                for (var i = 0; i < data.cloudfileLists.length; i++)
                {
                    htmlStr += ;
                    htmlStr +=
                                      +
                    htmlStr += ;
                }
                htmlStr += ;
                htmlStr += ;
                htmlStr += ;
                htmlStr += ;
                htmlStr += ;
                htmlStr += ;
                htmlStr += <table><thead><tr><td>编号</td><td>文件名</td></tr></thead><tbody><tr><td> + data.cloudfileLists[i].FileID + </td><td> + data.cloudfileLists[i].FileName + </td></tr></tbody><tfoot><tr><td colspan="&#39;6&#39;">;
                htmlStr += <span>共有记录 + data.Count + ;共<span id="&#39;count&#39;"> + (data.Count % 5 == 0 ? parseInt(data.Count / 5) : parseInt(data.Count / 5 + 1)) + </span>页 + </span>;
                htmlStr += 首    页   ;
                htmlStr += 前一页   ;
                htmlStr += 后一页   ;
                htmlStr += 尾    页   ;
                htmlStr += <input type="&#39;text&#39;"><input type="&#39;button&#39;" value="&#39;跳转&#39;" onclick="&#39;GoToAppointPage(this)&#39;"> ;
                htmlStr += </td></tr></tfoot></table>;

                $(#divSearchResult).html(htmlStr);//重写html
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
                alert(textStatus);
                alert(errorThrown);
            }
        });
    }
    //首页
    function GoToFirstPage() {
        pageIndex = 0;
        AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);
    }
    //前一页
    function GoToPrePage() {
        pageIndex -= 1;
        pageIndex = pageIndex >= 0 ? pageIndex : 0;
        AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);
    }
    //后一页
    function GoToNextPage() {
        if (pageIndex + 1 < parseInt($(#count).text())) {
            pageIndex += 1;
        }
        AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);
    }
    //尾页
    function GoToEndPage() {
        pageIndex = parseInt($(#count).text()) - 1;
        AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);
    }
    //跳转
    function GoToAppointPage(e) {
        var page = $(e).prev().val();
        if (isNaN(page)) {
            alert(请输入数字!);
        }
        else {
            var tempPageIndex = pageIndex;
            pageIndex = parseInt($(e).prev().val()) - 1;
            if (pageIndex < 0 || pageIndex >= parseInt($(#count).text())) {
                pageIndex = tempPageIndex;
                alert(请输入有效的页面范围!);
            }
            else {
                AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);
            }
        }
    }
</script>

동일 페이지의 HTML 코드:

jQueryPaging.aspx 페이지의 CS 코드는 다음과 같습니다.

이 네임스페이스를 참조하십시오: using System.Web.Script.Serialization;//JavaScriptSerializer를 사용합니다.

protected void Page_Load(object sender, EventArgs e)
{
    Int32 pageIndex = Int32.MinValue;
    Int32 pageSize = Int32.MinValue;
    String name = String.Empty;
    JavaScriptSerializer jss = new JavaScriptSerializer();
    if (Request[Name] != null)
    {
        name = Request[Name].ToString();
        if (Request[PageIndex] != null)
        {
            pageIndex = Int32.Parse(Request[PageIndex].ToString());
            pageSize = Request[PageSize] != null ? Int32.Parse(Request[PageSize].ToString()) : 5;
            IList<cloudfile> cloudfileLists = new List<cloudfile>();//cloudfile是自己写的类，表示一条数据</cloudfile></cloudfile>
            CloudFile cf = null;
            int cout = 0;
            DataSet ds = LookDataFromDB(name, pageIndex, pageSize,out cout);
            foreach (DataRow row in ds.Tables[0].Rows)//把你的数据重新封装成Lis，才能被jss.Serialize()，不然会报错。
            {
                cf = new CloudFile();
                cf.FileID = row[FilePathId].ToString();
                cf.FileName = row[FileName].ToString();
                cloudfileLists.Add(cf);
            }
            if (cloudfileLists.Count > 0)
            {
                Response.Write({Count: + (cout) + ,cloudfileLists: + jss.Serialize(cloudfileLists) + });
                Response.End();
            }
        }
    }
}
private DataSet LookDataFromDB(string name, int pageIndex, int pageSize,out int cout)
{
    DataSet ds = new DataSet();
    try
    {
        pageIndex = 5 * pageIndex;//pageIndex ，表示这一页从哪一条数据开始
       // 这里写自己的数据获取方法，把数据获取好了甩到ds里面，返回到前面。（应该有更好的办法，自己想哦，也可以发评论我们一起探讨....。）
    }
    catch (Exception)
    {
        cout = 0;
        ds = null;
    }
    return ds;
}

//<span style="font-family:">CloudFile类</span>

public class CloudFile
{
    public String FileID { get; set; }
    public String FileName { get; set; }
    public String FileDirName { get; set; }
}

새로 고침 없이 페이징하는 간단한 예입니다. 제한된 JS 수준으로 인해 지금은 이 작업만 수행할 수 있습니다. 물론 몇 가지 새로운 기능이 추가될 수도 있습니다. 여기에서는 내 방법을 여러분과 공유하고 싶습니다. 기능에 관해서는 앞으로도 계속해서 개선해 나갈 예정입니다! ! !

새로 고침 없는 페이징을 달성하기 위해 AJAX를 사용하는 asp.net과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!