怎么使用異步controller與jQuery實現(xiàn)卷簾式分頁-創(chuàng)新互聯(lián)

這篇文章主要介紹了怎么使用異步controller與jQuery實現(xiàn)卷簾式分頁，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的貴州網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

問題

今天很多網(wǎng)站與數(shù)據(jù)庫交互。如果您的網(wǎng)站接收大量的流量，SQL查詢來檢索數(shù)據(jù)，是相當(dāng)激烈的。更重要的是因為普通用戶點擊一個在15秒內(nèi)到達您的網(wǎng)站的鏈接， 檢索和生成內(nèi)容的工作可能是不必要的，尤其是當(dāng)內(nèi)容是“地域折疊”（不滾動是不可見的）。為了幫助解決這個問題，內(nèi)容將被“按需”載入。足夠的內(nèi)容將被載入，使頁面感覺起來是隨用戶向下滾動閱讀遞增的，更多的內(nèi)容將在不影響用戶體驗的場景下填充。

解決方案

使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動時進一步加載內(nèi)容。

討論

異步controller可能在許多MVC應(yīng)用中未充分利用。最有可能的是因為人們不知道他們，更重要的是，不知道何時使用它們。以下是摘錄見MSDN網(wǎng)站：

“在應(yīng)用中，線程饑餓可能會發(fā)生，您可以配置action 異步處理。異步請求和同步請求過程需要相同的時間例如，如果一個請求，使得網(wǎng)絡(luò)調(diào)用需要兩秒鐘來完成的，請求需要兩秒鐘，無論是執(zhí)行同步或異步。然而，在一個異步調(diào)用，當(dāng)服務(wù)器響應(yīng)等待它的第一次請求時完成時他響應(yīng)其他的請求沒有被阻塞。因此，當(dāng)有許多請求調(diào)用長時間運行的操作時，異步請求會防止請求排隊?！?/p>

在這個例子里，異步請求是完美的解決方案。因為他會讓IIS服務(wù)器有能力去處理更多重要的請求，比如一個新的用戶第一次訪問網(wǎng)站。其中，加載用戶點播內(nèi)容是不太重要，因為大多數(shù)人甚至不關(guān)注被加載額外的內(nèi)容。在一個典型的社交網(wǎng)站，大多數(shù)活動可能包含用戶的意見。在以前的秘方中，創(chuàng)建了一個評論的功能。

在這個例子中，將更新網(wǎng)站的網(wǎng)頁，列出最近的評論。足夠的評論會被顯示，所以會出現(xiàn)滾動條。一旦用戶開始滾動，一個Ajax請求異步controller將檢索其他評論。

首先Home/Index view 需要更新去顯示最近的評論。為了提供一些評論的上下文內(nèi)容，關(guān)于書的基礎(chǔ)詳情也將被顯示為導(dǎo)航到圖書的鏈接。所以這個view將簡單的調(diào)用view 中的render function會在下邊創(chuàng)建：

@model IEnumerable<MvcApplication.Models.BookComment>
@{
ViewBag.Title = "Home Page";
}
<h3>@ViewBag.Message</h3>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" rel="external nofollow" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<script type="text/javascript">
var lastY = 0;
var currentY = 0;
var page = 1;
var maxPages = @ViewBag.maxPages;
$(window).scroll(function () {
if (page < maxPages) {
currentY = $(window).scrollTop();
if (currentY - lastY > 200 * (page - 1)) {
lastY = currentY;
page++;
$.get('CommentFeed/Comments?page=' + page,
function(data) {
$('#comments').append(data);
});
}
}
});
</script>
<div id="comments">
<h3>
Recent Comments</h3>
@Html.Partial("../CommentFeed/Comments", Model)
</div>

在上面的例子，執(zhí)行滾動窗口時也有一些比較復(fù)雜的JavaScript代碼會執(zhí)行。一些全局JavaScript變量被定義去保持監(jiān)控當(dāng)前的“Y”滾動的位置，最后的“Y”滾動位置和當(dāng)前被檢索的頁面。當(dāng)窗口的scrollTop位置減去最后的滾動位置是大于一個具體的數(shù)字，通過Ajax檢索新書評論并附加到評論列表。

你將根據(jù)你自己的網(wǎng)站去根據(jù)矯正那個具體的數(shù)字，基于內(nèi)容的高度，要確保新的內(nèi)容總是要提前檢索。

下一步，HomeController需要更新檢索圖書評論列表。 評論在降序排序，以確保最新的創(chuàng)建日期評論首先顯示。為了防止激烈的數(shù)據(jù)庫負(fù)載，全部評論將減少到一個小數(shù)目。這應(yīng)該根據(jù)你的網(wǎng)站去調(diào)節(jié)，以確保有足夠的內(nèi)容，導(dǎo)致滾動。在下面的例子，建議被限制在3。分頁的大數(shù)也取決于評論總數(shù)于除以3。一旦大的評論數(shù)已經(jīng)返回，大分頁數(shù)是用來防止進一步的Ajax調(diào)用。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Globalization;
using System.Data.Entity;
using MvcApplication.Models;
namespace MvcApplication.Controllers
{
public class HomeController : Controller
{
private BookDBContext db = new BookDBContext();
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
// Get our recent comments
var bookcomments = db.BookComments.Include(b => b.Book).OrderByDescending(b => b.Created).Take(3);
var count = db.BookComments.Count();
ViewBag.maxPages = count / 3 + 1;
return View(bookcomments);
}
public ActionResult ChangeLanguage(string language)
{
Session["CurrentLanguage"] = new CultureInfo(language);
return Redirect("Index");
}
public ActionResult About()
{
return View();
}
public ActionResult MobileTest()
{
return View();
}
public ActionResult MobileTest2()
{
return View();
}
}
}

同樣的功能需要被復(fù)制到一個新的異步controller?？刂破魑募A選中，右鍵單擊并選擇“添加→控制器。新
控制器將被命名為CommentFeedController。該控制器不需要腳手架模板功能，下拉，選擇空
控制器，然后按添加。

這個控制器會看起來與一個典型的控制器稍有不同。使用異步控制器，一個view將分成兩個函數(shù)。第一個函數(shù)執(zhí)行的異步
請求（例如，檢索的view）。第二個函數(shù)接收結(jié)果，異步調(diào)用和返回或顯示的結(jié)果。

提示：在下面的例子，呈現(xiàn)局部視圖。在某些應(yīng)用中，它可能是有益的，以減少網(wǎng)絡(luò)流量，返回一個JSON結(jié)果，讓JavaScript代碼處理與顯示。但是，要簡化這個例子，重點放在異步控制器，前者將用于返回一個partial view。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication.Models;
using System.Data.Entity;
namespace MvcApplication.Controllers
{
public class CommentFeedController : AsyncController
{
private BookDBContext db = new BookDBContext();
public void CommentsAsync(int page)
{
AsyncManager.OutstandingOperations.Increment();
AsyncManager.Sync(() =>
{
var bookcomments = db.BookComments.Include(
b => b.Book).OrderByDescending(b =>
b.Created).Skip(page * 3).Take(3);
AsyncManager.Parameters["bookcomments"] =
bookcomments;
AsyncManager.OutstandingOperations.Decrement();
});
}
public ActionResult CommentsCompleted(
IEnumerable<BookComment> bookcomments)
{
return PartialView(bookcomments);
}
}
}

第一個 函數(shù)，CommentsAsync，接收從javascript傳入的當(dāng)前頁面，并且用這個值去檢索接下來的三個評論。然后通過異步方法，檢索評論并且傳遞一個變量到第二個函數(shù)。最終的事是執(zhí)行AsyncManager.OutstandingOperations.Decrement()方法。OutstandingOperations（未解決操作）的increment（遞增）和decrement（遞減）的匹配是很重要的。否則，當(dāng)他們不匹配時，sync manager 將取消請求，這可以組織永不休止的請求。

第二個函數(shù)接收book comments 并且返回一個partial view。這和Home/Index view一樣。在這個過程的最后一個步驟是創(chuàng)建partial view。右擊文件夾，添加新文件夾。這個文件夾應(yīng)該命名為CommentFeed去匹配controller的名字。選擇這個文件夾，右擊，點Add→View 命名為Comments-----在添加它之前確定去檢查Partial view。

@model IEnumerable<MvcApplication.Models.BookComment>
@foreach (var item in Model) {
<h4><a href="@Url.Action(" rel="external nofollow" Details", "Books", new {ID=item.Book.ID } )">
@Html.DisplayFor(modelItem => item.Book.Title)
</a></h4>
<h5>Comment Posted: @Html.DisplayFor(
modelItem => item.Created)</h5>
<p>@MvcHtmlString.Create(Html.Encode(item.Comment).Replace(
Environment.NewLine, "<br />"))</p>
}

上邊的view遍歷comments，并首先顯示書的標(biāo)題和詳細(xì)信息頁面的鏈接，然后創(chuàng)建評論的日期，最后創(chuàng)建comment本身。由于View里可能包含換行符，用<br/>替代每個Evironment.NewLine去匹配評論輸入間距。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用異步controller與jQuery實現(xiàn)卷簾式分頁”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

新聞標(biāo)題：怎么使用異步controller與jQuery實現(xiàn)卷簾式分頁-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article46/ddhphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站排名、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)