> 백엔드 개발 > C#.Net 튜토리얼 > asp.net은 AJAX를 사용하여 새로 고침 없는 페이징을 구현합니다.

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

高洛峰
풀어 주다: 2017-01-10 14:17:18
원래의
1436명이 탐색했습니다.

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

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 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿