文章/答案/技术大牛

发布

社区首页 >问答首页 >只在页面向下滚动MVC 4 Jquery时加载数据

问只在页面向下滚动MVC 4 Jquery时加载数据
EN

Stack Overflow用户

提问于 2013-11-17 23:02:40

回答 2查看 5.2K关注 0票数 3

在我看来，这是从一个有1000多个记录的表格中抽取的内容。我必须填充内容的方式，记录是填充到更少的记录时，只有滚动，而不是一次。我用它来开发移动应用程序。我尝试过各种来源的在线，但没有有效的范围内滚动。如果你们还不清楚我的问题，你们中的大多数人可能都使用过facebook。在那里，这些帖子不是一次全部加载的。只有在滚动时才装上子弹。我必须实现同样的功能。任何对实时代码的引用都将不胜感激。提前谢谢。

这是我得到记录的代码

@foreach (System.Data.DataRow row in Model.dtSearch.Rows)
{
if (Model.dtSearch.Rows.Count > 0)
    {
    <input type ="hidden" value="@row["ProductId"]" />
    <input type ="hidden" value="@row["ProductPriceId"]" />

    <div class="divSearchResult" id="divSearch">
    <table>
    <tbody>
    <tr><td rowspan="2" style="width:10%"> @Html.Raw(row["ThumbnailFilename"])</td>
    <td colspan="3"><div class="divSearchHeader"> @row["ProductName"] <br /></div></td></tr>
    <tr><td colspan="4"><div class="divSearchShowHide" ><a class="classShow" id="show" href="#" style="text-decoration:none">Show</a></div>
    <div style="display:none;" class="divSearchContent" id=divresult_@ProductDescription > @Html.Raw(row["ProductDescription"])</div></td></tr>
    </tbody>
    </table>
    <hr />
</div>

    }}

没有必要显示代码，但这是我必须实现功能的地方。

ajax

asp.net-mvc-4

jquery-mobile

asp.net

AI绘画场景方案

AI绘画基于高质量的中文图文数据训练，在图片多模表征、多模搜索与生成上达到先进水平

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-12-24 00:20:56

RustyLazyLoad由六个主要组件组成：

1.rustylazyload.js

2.rustylazyload.css

3.RustyLazyLoadViewModel.cs

4._RustyLazyLoad.cshtml

5.控制器延迟负载动作方法和相应的ViewModel

6.您的PartialView模板

首先，我们将快速运行rustylazyload.js：

function LazyLoad(uniqueId) {

var _uniqueId = uniqueId;

var _containerId = "";
var _ajaxLoadContainerId = "";
var _ajaxActionUrl = "";
var _parameters = {};

this.init = function(option) {

    _containerId = option.containerId;
    _ajaxLoadContainerId = option.ajaxLoadContainerId;
    _ajaxActionUrl = option.ajaxActionUrl;
    _parameters = option.parameters;

    // Enable scroll event handler
    bindScrollHandler();

    // Load initial items
    load();
};

var bindScrollHandler = function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
            load();
        }
    });
};

var unbindScrollHandler = function() {
    $(window).unbind("scroll");
};

var load = function() {
    $.ajax({
        type: "POST",
        url: _ajaxActionUrl,
        data: _parameters,
        beforeSend: load_beforeSend,
        success: load_success,
        error: load_error
    });
};

var load_beforeSend = function() {
    // Disable scroll event handler
    unbindScrollHandler();

    // Show loading message
    $(_ajaxLoadContainerId).toggleClass("lazyload-hidden").html("Loading..");
};
var load_success = function(result) {

    // Delay a bit before displaying the result and re-enabling scroll event handler
    setTimeout(function() {
        // Display result with fade in effect
        if (result != null && result != "") {
            $(_containerId).append(result, { duration: 500 });
            // Add ui-first-child to the first child
            $(_containerId).find(">:first-child").removeClass("ui-first-child");
            $(_containerId).find(">:first-child").addClass("ui-first-child");
            // Remove ui-last-child from the old last child
            $(_containerId).find(">:nth-child(" + _parameters.fromRowNumber + ")").removeClass("ui-last-child");
            // Add ui-last-child to the new last child
            $(_containerId).find(">:last-child").addClass("ui-last-child");

            // Update fromRowNumber
            _parameters.fromRowNumber = $(_containerId).children().length;
        }

        if (_parameters.fromRowNumber == 0) {
            // Use loading container to display 'no item' message
            $(_ajaxLoadContainerId).html("There is no data to display");
        } else {
            // Remove loading message
            $(_ajaxLoadContainerId).toggleClass("lazyload-hidden").html("");
        }

        // Re-enable scroll handler
        bindScrollHandler();
    }, 500);

};
var load_error = function(result) {
    var message = result.responseText.substring(1, result.responseText.length - 2);
    $(_ajaxLoadContainerId).html("Error: " + message);
};
}

在调用init()时，需要指定4个强制字段：

_containerId -数据容器对象的Id (<ul id="thisId"></ul>)

_ajaxLoadContainerId -“加载”消息容器对象(<div id="thisId">Loading..</div>)的Id

_ajaxActionUrl -将使用$.ajax()调用的动作Url

_parameters -一个JSON对象，它有两个强制字段:限制(按需加载的项数)和fromRowNumber (标记Nth加载项以避免重复条目)。

我们不会一行行地讨论这段代码，相反，我们只会突出显示以下重要部分：

init()函数做三件事:映射参数，将滚动事件处理程序绑定到窗口，并调用load()来显示第一批

bindScrollHandler()非常简单--它只是确保在窗口几乎到达底部时调用load()

load()使用_ajaxActionUrl AJAX调用jQuery，并传递_parameters变量中的所有指定参数-- ASP.NET MVC非常聪明，可以将这些参数映射为Controller参数

当Controller操作执行时，load_beforeSend()暂时禁用窗口滚动事件处理程序，这样我们就不会用AJAX请求重载服务器，同时显示Id存储在_ajaxLoadContainerId中的加载消息HTML，load_success()应该将结果绑定到_containerId HTML对象，用加载的项目数更新_parameters.fromRowNumber (记住fromRowNumber是_parameters的强制项之一)，并重新启用窗口滚动事件处理程序，在load_error()中处理任何错误，后者将显示在_ajaxLoadContainerId HTML对象中。

如果使用默认的ASP.NET MVC4移动应用程序模板，则根本不需要修改该文件

接下来是rustylazyload.css，它应该是非常直接的：

.lazyload-loading-container {
margin: 0;
padding: 15px;
text-align: center;
}
.lazyload-hidden {
display: none;
 }

现在，视图模型RustyLazyLoadViewModel.cs：

  using System.Collections.Generic;

  namespace RustyLazyLoadTester.Mobile.Models
  {
public class RustyLazyLoadViewModel
{
    public RustyLazyLoadViewModel()
    {
        Parameters = new Dictionary<string, object>();
    }
    public RustyLazyLoadViewModel(int limit, int fromRowNumber, string containerId,
        string ajaxActionUrl, IDictionary<string, object> parameters = null)
    {
        Limit = limit;
        FromRowNumber = fromRowNumber;
        ContainerId = containerId;
        AjaxActionUrl = ajaxActionUrl;
        if (parameters != null)
            Parameters = parameters;
    }

    public int Limit { get; set; }
    public int FromRowNumber { get; set; }
    public string ContainerId { get; set; }
    public string AjaxActionUrl { get; set; }
    public IDictionary<string, object> Parameters { get; set; }
}
}

如您所见，该视图模型捕获的参数与rustylazyload.js的.init()函数几乎相同，但没有_ajaxLoadContainerId的除外。为什么？让我们检查一下视图文件。

_RustyLazyLoad.cshtml:

 @using System.Text
 @model RustyLazyLoadTester.Mobile.Models.RustyLazyLoadViewModel
 @{
var containerId = Model.ContainerId;
var ajaxLoadContainerId = string.Format("{0}Load", containerId);

// Convert parameters to JSON
var sbParameters = new StringBuilder();
if (Model.Parameters != null && Model.Parameters.Any())
{
    foreach (var parameter in Model.Parameters)
    {
        sbParameters.AppendFormat("\"{0}\": \"{1}\", ", parameter.Key, parameter.Value);
    }
}
var parameters = sbParameters.ToString();
// Remove trailing ', ' from parameters
if (!string.IsNullOrWhiteSpace(parameters))
{
    parameters = parameters.Substring(0, parameters.Length - 2);
}
}
<ul id="@containerId" data-role="listview" 
         data-inset="true"></ul>
<div id="@ajaxLoadContainerId"
 class="lazyload-loading-container lazyload-hidden
        ui-listview ui-listview-inset
        ui-corner-all ui-shadow ui-li-static
        ui-btn-down-b ui-first-child ui-last-child"></div>
<script type="text/javascript">
$(document).ready(function () {
    var limit = @Model.Limit;
    var fromRowNumber = @Model.FromRowNumber;
    var containerId = '@string.Format("#{0}", containerId)';
    var ajaxLoadContainerId = '@string.Format("#{0}", ajaxLoadContainerId)';
    var ajaxActionUrl = '@Model.AjaxActionUrl';
    var parameters = { limit: limit, fromRowNumber: fromRowNumber, @Html.Raw(parameters) };

    var lazyLoad = new LazyLoad(containerId);
    lazyLoad.init({
        containerId: containerId,
        ajaxLoadContainerId: ajaxLoadContainerId,
        ajaxActionUrl: ajaxActionUrl,
        parameters: parameters
    });
});
</script>

为了简单起见，_ajaxLoadContainerId实际上只是一个带有后缀的_containerId，但它可以是任何东西。如果我们认为需要手动指定AJAX加载消息容器Id，则只需在RustyLazyLoadViewModel.cs中添加RustyLazyLoadViewModel.cs属性并将其传递给变量AjaxLoadContainerId (本页第5行)。

延迟加载项容器如下：

 <ul id="@containerId" data-role="listview" data-inset="true"></ul>

延迟加载消息容器是这样的：

 <div id="@ajaxLoadContainerId" ...></div>

然后，使用Razor引擎，我们将参数转换为JSON，并将其传递给延迟加载控件。

var parameters = { limit: limit, fromRowNumber: fromRowNumber, @Html.Raw(parameters) };

var lazyLoad = new LazyLoad(containerId);
lazyLoad.init({
containerId: containerId,
ajaxLoadContainerId: ajaxLoadContainerId,
ajaxActionUrl: ajaxActionUrl,
parameters: parameters
});

最后，通过一个实例对第五部分和第六部分进行了最好的解释。

假设数据库中有15个用户条目，其中包含以下字段: Id、FirstName、LastName、Status并映射到下面的模型。我们希望使用延迟加载控件以渐进的方式显示主页上的条目。

 using System.ComponentModel;

 namespace RustyLazyLoadTester.Mobile.Services.Models
 {
public class User
{
    public User() { }
    public User(long id, string firstName, string lastName, UserStatus status)
        : this()
    {
        Id = id;
        FirstName = firstName;
        LastName = lastName;
        Status = status;
    }

    public long Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public UserStatus Status { get; set; }
}

public enum UserStatus
{
    [Description("All")]
    All = 0,
    [Description("Inactive")]
    Inactive = 1,
    [Description("Active")]
    Active = 2,
    [Description("Deactivated")]
    Deactivated = 3
}
}

我们首先要做的是创建服务方法：

using System.Collections.Generic;
using System.Linq;
using RustyLazyLoadTester.Mobile.Services.Models;

namespace RustyLazyLoadTester.Mobile.Services
{
public interface IQueryService
{
    IEnumerable<User> GetAllUsers(UserStatus status = UserStatus.All,
                                  int limit = 0, int fromRowNumber = 0);
}

class QueryService : IQueryService
{
    public IEnumerable<User> GetAllUsers(UserStatus status, int limit, int fromRowNumber)
    {
        // Assume we have 15 users
        var users = new List<User>();
        for (var i = 0; i < 15; i++)
        {
            var userFirstName = string.Format("firstName_{0}", i);
            var userLastName = string.Format("lastName_{0}", i);
            var userStatus = i % 2 == 0 ? UserStatus.Active : UserStatus.Inactive;
            users.Add(new User(i, userFirstName, userLastName, userStatus));
        }

        if (limit <= 0)
        {
            users = users.Where(x => x.Status == status)
                        .Skip(fromRowNumber)
                        .ToList();
        }
        else
        {
            users = users.Where(x => x.Status == status)
                        .Skip(fromRowNumber)
                        .Take(limit)
                        .ToList();
        }
        return users;
    }
}
}

在我们的HomeController中，我们需要为索引页面创建默认的HttpGet控制器操作方法索引()，并创建HttpPost Controller操作方法GetNextUsers()，以便为延迟加载程序服务：

using System;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using RustyLazyLoadTester.Mobile.Services;
using RustyLazyLoadTester.Mobile.Services.Models;

namespace RustyLazyLoadTester.Mobile.Controllers
{
public class HomeController : Controller
{
    private readonly IQueryService _query;

    public HomeController()
    {
        _query = new QueryService();
    }

    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult GetNextUsers(UserStatus status, int limit, int fromRowNumber)
    {
        try
        {
            var users = _query.GetAllUsers(status, limit, fromRowNumber);

            if (!users.Any())
                return Json(string.Empty);

            return PartialView("_UserList", users);
        }
        catch (Exception ex)
        {
            Response.StatusCode = (int)HttpStatusCode.InternalServerError;
            return Json(ex.Message);
        }
    }
}
}

在Index.cshtml (对应于HttpGet控制器动作方法索引()的视图)中，我们将得到如下内容：

@using RustyLazyLoadTester
@using RustyLazyLoadTester.Mobile.Models
@using RustyLazyLoadTester.Mobile.Services.Models
@{
ViewBag.PageTitle = "Home";
ViewBag.Title = string.Format("RustyLazyLoadTester - {0}", ViewBag.PageTitle);

var parameters = new Dictionary<string, object>();
parameters.Add("status", UserStatus.All);
}
@Scripts.Render("~/bundles/lazyload") @* points to /Scripts/rustylazyload.js *@

@Html.Partial("_RustyLazyLoad", new RustyLazyLoadViewModel(
5, 0, "ulUsers", Url.Action("GetNextUsers", "Home"), parameters))

那里的两行粗体行将激活延迟加载控制，并按需触发GetNextUsers()。

如果我们仔细观察第二条粗体线：

@Html.Partial("_RustyLazyLoad", new RustyLazyLoadViewModel(
5, 0, "ulUsers", Url.Action("GetNextUsers", "Home"), parameters))

值5是极限。这决定了如何在每次加载中检索项目数。值0是fromRowNumber。这表示结果中需要忽略的第N项.随着我们加载更多的数据，这个数字将根据加载的项增加，因此我们不必担心重复(除非我们的代码涉及一些复杂的排序，使得在列表中间有一个新的项成为可能)。

当调用GetNextUsers()方法时，它只是在下面呈现PartialView _UserList.cshtml：

@using Humanizer
@using RustyLazyLoadTester.Mobile.Services.Models
@model IEnumerable<User>

@foreach (var user in Model)
{ 
<li class="ui-li ui-li-static ui-btn-up-b">
    <div>@string.Format("First name: {0}", user.FirstName)</div>
    <div>@string.Format("Last name: {0}", user.LastName)</div>
    <div>@string.Format("Status: {0}", user.Status.Humanize())</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
    <div>---</div>
</li>
}

注意，内容被包装在

。这是因为父容器(_containerId HTML )是一个。但是我们总是可以非常容易地更改这个实现，只要我们保持如下的层次结构：内容这是因为RustyLazyLoad控件使用父容器的子容器数量来更新_fromRowNumber属性，这确保在下一个加载中没有重复的条目。上面的代码不是我写的。但我已经成功地在我的项目中使用了。参考摘自链接，您在这里有完整的描述。所有学分都是泰迪·塞戈罗的。我把它重新贴出来只是为了分享信息。您可以找到工作模式如下