asp.net mvc基於jQuery+Ajax實現無重新整理分頁

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用ViewBag來返回當前頁碼和總記錄數和pageSize。ajax通過回撥函式把控制器返回的檢視加到頁面中。

說明：分頁具體的分頁導航和樣式使用了外掛。

控制器程式碼

using _116.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace _116.Controllers
{
publicclass HomeController : Controller
{
private DataContext db = new DataContext();
privatereadonlyint pageSize = 3;
//
// GET: /Home/
public ActionResult Index()
{
ViewBag.PageSize = pageSize;
ViewBag.TotalCount = db.Articles.Count();
return View();
}
/// <summary>
/// 文章列表，ajax分頁
/// </summary>
/// <param name="pageIndex"></param>
/// <returns></returns>
public ActionResult AjaxPaging(int pageIndex = 1)
{
IQueryable<ArticleModels> articles = db.Articles.OrderByDescending(a => a.ObjectID).Skip((pageIndex - 1) * pageSize).Take(pageSize);
ViewBag.PageIndex = pageIndex;
return PartialView("IndexArticleList", articles);
}
}
}

檢視程式碼

<sectionid="articleList"class="posts block"></section>
<scriptsrc="~/common/scripts/kkpager.js"></script>
<linkhref="~/common/pluginCss/kkpager.css"rel="stylesheet"/>
<navid="kkpager"class="posts block pagination"></nav>

分部檢視程式碼

@model IEnumerable<_116.Models.ArticleModels>
@foreach (var item in Model)
{
<articleclass="post block">
<h2class="h2">
<small><ahref="/Article/Details/@item.ObjectID">@Html.DisplayFor(modelItem => item.ObjectTitle)</a></small>
</h2>
<divclass="meta">
<time>@item.CreateTime.ToString("yyyy-MM-dd")</time>
<iclass="glyphicon glyphicon-eye-open eye"></i>
<span>(@item.VisitedCount)</span>
</div>
<divclass="content">
<p>@Html.DisplayFor(modelItem => item.ObjectSummary)</p>
</div>
<divclass="readMore"><ahref="/Article/Details/@item.ObjectID">[繼續閱讀]</a></div>
</article>
}
<inputid="pageIndex"type="hidden"value="@ViewBag.PageIndex"/>

Ajax程式碼[javascript] view plain copy

<script type="text/javascript">
$(function ()
{
//初始載入文章列表資料
GetArticlesData(1);
});
//ajax獲取文章列表並分頁
function GetArticlesData(pageIndex)
{
var ajaxUrl = '/Home/AjaxPaging?pageIndex=' + pageIndex;
var ajaxType = 'post';
var ajaxDataType = 'text';
var sucFun = function (data, status)
{
if (data == null && status != "success")
{
alert("獲取資料失敗！");
returnfalse;
}
else
{
$("#articleList").html(data);
//移除列表最後一項的底部陰影
$("#articleList").find("article").last().removeClass("block");
//分頁
var totalCount = parseInt('@ViewBag.TotalCount');
var pageSize = parseInt('@ViewBag.PageSize');
var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);
pagecutforsearch(totalPages, totalCount, $("#pageIndex").val());
}
};
//ajax引數設定
var Option =
{
url: ajaxUrl,
type: ajaxType,
dataType: ajaxDataType,
cache: false, //設定為 false 將不會從瀏覽器快取中載入請求資訊。
async: true, //(預設: true)，所有請求均為非同步請求。傳送同步請求，請將此選項設定為 false。同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
timeout: 3600, //設定請求超時時間（毫秒）。此設定將覆蓋全域性設定。
error: function () { },
success: sucFun,
beforeSend: function () { }
};
相關推薦

asp.net mvc基於jQuery+Ajax實現無重新整理分頁

解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。後端控制器處理完後利用PartialView方法把資料返回到分部檢視中，利用

ASP.NET MVC 結合bootstrap-table-實現服務端分頁

bootstrap-table展示資料很好用，但是當資料量很大時，存在效能問題。bootstrap-table需要分頁的功能，需要時就請求資料，而不是一次性載入到客戶端上。bootstrap-table前臺預設時客戶端分頁，此時的分頁已失去了應有的作用。因此使用服務端，話不多說，直接上程式碼前

javascript專案實戰---ajax實現無重新整理分頁

<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁

SSH三大框架的整合+利用Ajax實現無重新整理分頁

以下是我利用Struts2.3.24、Spring4.0、Hibernate4.2 結合Mysql資料庫進行的ssh整合，實現分頁需要json.js 首先ssh的整合需要匯入所有的jar包在web.xml <?xml version="1.0" e

ASP.NET+Ajax+JQuey+Json資料+儲存過程實現無重新整理分頁

  <script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript">&l

asp.net Mvc4 使用ajax結合分頁外掛實現無重新整理分頁

本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。

tp5+ajax+jq實現無重新整理分頁

tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原

實現FreeMarker+Ajax的無重新整理分頁

目前已經使用SpringBoot+MyBatis+PageHelper實現了物理分頁. 現在想通過Ajax實現FreeMarker的無重新整理分頁. 我的理解是最關鍵的地方在於如何替換FreeMarker中的標籤的值. 只要解決了這一點, 就可以輕鬆解決資料回顯和分頁出現的

分享一個自己寫的MVC EF 增刪改查無重新整理分頁程式

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

ASP.NET MVC & WebApi 中實現Cors來讓Ajax可以跨域訪問（轉載）

詳細簡介 part bsp bob 打印不能 res user 什麽是Cors？ CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了

Asp.net Mvc Preview 5 體驗--實現ActionSelectionAttribute來判斷是否為AJAX請求而選擇不同的Action

ActionSelectionAttribute是ASP.NET MVC Preview 5 提供的一個抽象基類，通過ActionSelectionAttribute的命名我們就可以猜想到這個Attribute是用來選擇(匹配)Action方法的。該抽象類只提供了一個抽象的方法 IsValidForReque

ASP.NET MVC Controller接收ajax post方式發送過來的json對象或數組數據

thrown data btn XML 傳輸接收 pan javascrip form提交本例旨在說明我的一種Controller接收ajax提交(POST)過來的json對象或數組信息的方式，感覺應該有更好的方式，歡迎提出寶貴意見。JSON.stringify(jso

ASP.NET沒有魔法——ASP.NET MVC使用Oauth2.0實現身份驗證

重定向 adt imp img imsi als jwt and -i 原文:ASP.NET沒有魔法——ASP.NET MVC使用Oauth2.0實現身份驗證　　隨著軟件的不斷發展，出現了更多的身份驗證使用場景，除了典型的服務器與客戶端之間的身份驗證外還有，如服務與服務之間

ASP.NET MVC學習之Ajax（完結）

等待 failure lba info 學習有一個代碼 orm 修改網址：https://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_ajax.html 一.前言通過上面的一番學習，大家一定收獲不少。但是總歸會有一個結束的時候

spring mvc + ajax實現無重新整理下載檔案

JQuery的ajax函式的返回型別只有xml、text、json、html等型別，沒有“流”型別，所以我們要實現ajax下載，不能夠使用相應的ajax函式進行檔案下載。但可以用js生成一個form，用這個form提交引數，並返回“流”型別的資料。在實現過程中，

ASP NET MVC使用Oauth2 0實現身份驗證

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

ASP.NET MVC中使用OutputCache實現伺服器端頁面級快取注意問題

    CSDN廣告是越來越多了，所有部落格筆記不再更新，新網址 DotNet筆記 1) 血的教訓：先說使用OutputCache實現伺服器端頁面級快取注意問題在ASP.NET MVC中，假如我們想要將某個頁面（即某個Action）快取在伺服器端，可以在Action上

jquery.page.js實現ajax無重新整理分頁

http://blog.csdn.net/dengboblog/article/details/52699332 寫程式碼參考了這位大神的部落格。下面貼上我的程式碼。首先是要把引入的分頁js和css新增進來。這個程式碼自己百度吧。 $.ajax({ type

ASP.NET MVC使用jQuery來POST資料至資料庫中

學習ASP.NET MVC程式，結合jQuery客戶端程式碼，Post資料至資料庫去。Insus.NET今天寫一個完整性的例子。在資料庫中，建立一個表[dbo].[TestUser]：既然是把資料存入資料庫中，得先在資料庫建立一個儲存過程[dbo].[usp_Te

ASP.NET MVC中使用JS實現不對稱加密密碼傳輸

摘要：ASP.NET MVC中登入頁面中點選登入後，使用者名稱、密碼將被明文傳輸到Controller中，使用Fiddler等工具可以輕鬆截獲並獲取密碼，這是不安全的。使用對稱加密，如AES，金鑰將被暴露前端程式碼，也是不安全的。使用不對稱加密能夠較好解決這個問題。本文

asp.net mvc基於jQuery+Ajax實現無重新整理分頁

相關推薦