grid.js Grid & ASP.NET Core 6.0 MVC 添加日期过滤最小值和最大值

Question

如何使用 Razor 和 grid.js 网格在 ASP.NET Core MVC 中创建日期过滤？场景是：渲染

grid.js

网格。但将创建一个带有按钮的日期控件。单击按钮时，它应该根据输入的日期更新网格数据。

在 div 上使用 grid.js 网格渲染，创建 2 个输入类型日期，用于起始和结束值以及 1 个应触发网格更新的按钮。我期望单击按钮后，它应该根据日期更新 grid.js.Grid 表。如何更新grid.js数据？

Answer 1

这是您可以遵循的完整工作演示：

型号

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

视图(Index.cshtml)

@model Test
<div>
    <label for="startDate">Start Date:</label>
    <input asp-for="StartDate" />

    <label for="endDate">End Date:</label>
    <input asp-for="EndDate" />

    <button onclick="applyDateFilter()">Apply Filter</button>
</div>

<div id="grid"></div>
@section Scripts
{
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    <script>
        const grid = new gridjs.Grid({
            columns: ['Id','Name', 'Start Date', 'End Date'],
            server: {
                // Configure server-side data fetching
                url: '/home/getdata', // Replace with your API endpoint
                then: data => data.map(card => [card.id, card.name, card.startDate, card.endDate])
            },
        }).render(document.getElementById('grid'));

        function applyDateFilter() {
            const startDate = document.getElementById('StartDate').value;
            const endDate = document.getElementById('EndDate').value;

            // Make an API request to filter data based on start and end dates
            // Update the grid with the filtered data
            grid.updateConfig({
                server: {
                    url: '/home/getdata?startDate=' + startDate + "&endDate=" + endDate, // Replace with your API endpoint
                    then: data => data.map(card => [card.id, card.name, card.startDate, card.endDate])
                },

            }).forceRender();
        }
    </script>
}

控制器

 public class HomeController : Controller
    {
        public async Task<IActionResult> Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult GetData(DateTime? startDate, DateTime? endDate)
        {
            //hard-coded for easy testing
            var data = new List<Test>()
            {
                new Test(){Id=1,Name="aa",StartDate=new DateTime(2022,1,12),EndDate=new DateTime(2022,2,23) },
                new Test(){Id=2,Name="bb",StartDate=new DateTime(2022,1,20),EndDate=new DateTime(2022,3,23) },
                new Test(){Id=3,Name="cc",StartDate=new DateTime(2022,2,12),EndDate=new DateTime(2022,3,12) },
                new Test(){Id=4,Name="dd",StartDate=new DateTime(2022,3,12),EndDate=new DateTime(2022,3,23) }
            };
            var query = data
                .Where(d => (!startDate.HasValue || d.StartDate >= startDate)
                            && (!endDate.HasValue || d.EndDate <= endDate));

            // Execute the query and return the data
            var result = query.ToList();
            return Ok(result);
        }
    }