无限卷轴- ASP.NET核心MVC

Question

我们正在尝试在一个ASP.NET核心MVC应用程序中实现数据网格中的无限滚动。搜索了很多，但没有找到一个好的解决方案。有没有人在ASP.NET核心MVC的数据网格中使用过无限滚动。如果是这样，你能提供一些指导吗？

Answer 1

我也面临着同样的问题。这是我的解决方案。它几乎可以在任何表上运行：

InfinityScroll.js

function InfinitiySroll(iTable, iAction, iParams) {
    this.table = iTable;        // Reference to the table where data should be added
    this.action = iAction;      // Name of the conrtoller action
    this.params = iParams;      // Additional parameters to pass to the controller
    this.loading = false;       // true if asynchronous loading is in process
    this.AddTableLines = function (firstItem) {
        this.loading = true;
        this.params.firstItem = firstItem;
        // $("#footer").css("display", "block"); // show loading info
        $.ajax({
            type: 'POST',
            url: self.action,
            data: self.params,
            dataType: "html"
        })
            .done(function (result) {
                if (result) {
                    $("#" + self.table).append(result);
                    self.loading = false;
                }
            })
            .fail(function (xhr, ajaxOptions, thrownError) {
                console.log("Error in AddTableLines:", thrownError);
            })
            .always(function () {
                // $("#footer").css("display", "none"); // hide loading info
            });
    }

    var self = this;
    window.onscroll = function (ev) {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            //User is currently at the bottom of the page
            if (!self.loading) {
                var itemCount = $('#' + self.table + ' tr').length - 1;
                self.AddTableLines(itemCount);
            }
        }
    };
    this.AddTableLines(0);
}

下面是一个来自Visual Studio scaffold视图的示例-稍作修改

TestData.cshtml

@model IEnumerable<Infinity_Scroll.Models.TestData>

@{
    ViewData["Title"] = "TestData";
}

<h1>TestData</h1>

<table id="anyTable" class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Field1)
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section Scripts {
    <script src="~/js/InfinitiySroll.js"></script>

    <script>
        var infinityScroll = new InfinitiySroll("anyTable", "/home/_TestData", { sortOrder: "ascending", searchString: "3" });
    </script>
}

表行的生成被移到一个PartialView中：

_TestData.cshtml

@model IEnumerable<Infinity_Scroll.Models.TestData>

@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Field1)
            </td>
        </tr>
}

下面是控制器部分：

...
private const int BATCH_SIZE = 50;
public IActionResult TestData()
{
    return View();
}

[HttpPost]
public IActionResult _TestData(string sortOrder, string searchString, int firstItem = 0)
{
    List<TestData> testData = new List<TestData>();
    // Generate test data
    for (int i = 1; i < 500; i++)
    {
        testData.Add(new TestData() { Id = i, Field1 = "This is row " + i.ToString() });
    }

    // Sort and filter test data
    IEnumerable<TestData> query;
    if (sortOrder.ToLower() == "descending")
    {
        query = testData.OrderByDescending(m => m.Field1);
    }
    else
    {
        query = testData.OrderBy(m => m.Field1);
    }
    if (!String.IsNullOrEmpty(searchString)) query = query.Where(m => m.Field1.Contains(searchString));

    // Extract a portion of data
    var model = query.Skip(firstItem).Take(BATCH_SIZE).ToList();
    if (model.Count() == 0) return StatusCode(204);  // 204 := "No Content"
    return PartialView(model);
}

模型：

TestData.cs

namespace Infinity_Scroll.Models
{
    public class TestData
    {
        public int Id { get; set; }

        public string Field1 { get; set; }
    }
}

您可以在此处下载一个简单的Visual Studio示例：https://github.com/ThomasBrockmann/InfinityScroll