मैं इसे MVC 2 और jQuery के साथ इस तरह से किया है:
नियंत्रक:
/// <summary>
/// GET: /Widget/Search/
/// Displays search results.
/// </summary>
/// <param name="s"></param>
/// <returns></returns>
public ActionResult Search(SearchType searchType, string s, [DefaultValue(1)]int page)
{
try
{
int batch = 20;
int fromRecord = 1;
int toRecord = batch;
if(page != 1)
{
toRecord = (batch * page);
fromRecord = (toRecord - (batch-1));
}
var widgets= _repos.Search(searchType, s, fromRecord, toRecord);
if (widgets.Count == 0)
{
InfoMsg("No widgets were found.");
}
if (Request.IsAjaxRequest())
{
if(widgets.Count > 0)
{
return View("SearchResultsLineItems", widgets);
}
else
{
return new ContentResult
{
ContentType = "text/html",
Content = "noresults",
ContentEncoding = System.Text.Encoding.UTF8
};
}
}
return View("SearchResults", widgets);
}
catch (Exception ex)
{
return HandleError(ex);
}
}
दृश्य:
<% if (Model.Count > 0) { %>
<table id="tblSearchResults">
<tr>
<th></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
<% Html.RenderPartial("SearchResultsLineItems", Model); %>
</table>
<div id="loadingSearchResults" style="text-align:center;height:24px;"></div>
<div id="actionModal" class="modal"></div>
<% } %>
स्क्रिप्ट:
function initAutoPaging() {
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadMore()
}
});
}
var current = 1;
function loadMore() {
if (current > -1) {
if (!_isShowingDetails)
{
if (!$('#loadingSearchResults').html()) {
current++;
$('#loadingSearchResults').show();
$('#loadingSearchResults').html("<img src='/content/images/loading.gif' />");
$.ajax({
async: true,
url: document.URL + "?&page=" + current,
contentType: "application/x-www-form-urlencoded",
dataType: "text",
success: function(data) {
if (data != 'noresults') {
$('#tblSearchResults tr:last').after(data);
$('#loadingSearchResults').hide();
$('#loadingSearchResults').html('');
highlightSearch();
} else {
current = -1;
$('#loadingSearchResults').show();
$('#loadingSearchResults').html("<h3><i>-- No more results -- </i></h3>");
}
}
});
}
}
}
}
स्रोत
2011-02-25 13:52:23