asp.net verwendet AJAX, um aktualisierungsfreies Paging zu implementieren

Die Abfragefunktion ist die wichtigste Funktion in der Entwicklung. Bei der Anzeige großer Datenmengen verwenden wir am häufigsten das Paging.

In ASP.NET gibt es viele Datenanzeigesteuerelemente, z. B. Repeater und GridView. Das am häufigsten verwendete GridView verfügt auch über eine eigene Paging-Funktion. Wir wissen jedoch, dass bei Verwendung von GridView zum Anzeigen von Daten die Seitengröße sehr groß sein wird, wenn ViewState nicht deaktiviert ist. Wenn wir auf die Startseite, die nächste Seite, die vorherige Seite und die letzte Seite klicken, führen diese Funktionen normalerweise zu einem Seiten-Postback, was bedeutet, dass wir vollständig mit dem Server interagieren müssen. Die Antwortzeit und die übertragene Datenmenge sind sehr groß . .

AJAX-Paging kann diese Probleme sehr gut lösen.

Datenanzeige Pasing.aspx-Seite JS-Code:

<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-Code derselben Seite:

Der CS-Code der jQueryPaging.aspx-Seite lautet wie folgt:

Referenzieren Sie diesen Namespace: using System.Web.Script.Serialization;//JavaScriptSerializer to be used.

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; }
    }

Dies ist ein einfaches Beispiel für Paging ohne Aktualisierung. Aufgrund meines begrenzten JS-Levels kann ich dies erst jetzt tun. Natürlich können einige neue Funktionen hinzugefügt werden. Hier möchte ich nur meine Methode mit Ihnen teilen. Was die Funktion betrifft, werden wir sie in Zukunft weiter verbessern! ! !

Weitere Artikel zu asp.net, die AJAX verwenden, um aktualisierungsfreies Paging zu erreichen, finden Sie auf der chinesischen PHP-Website!