如何在ASP.NET Razor页面中通过下拉选择过滤文件表格？

针对你需要通过下拉选择框过滤表格中供应商列的需求，提供两种可行方案：

方案一：前端JavaScript无刷新过滤（用户体验更流畅） #

无需修改后端代码，仅通过前端JS实现即时过滤，页面不会刷新。

修改后的cshtml代码 #

@page
@model PurchaseOrdersModel
@{
    ViewData["Title"] = "Home page";
}
<style>
    body {
        background-image: url('hero-range-1.jpg');
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<h1 style="color: white">Purchase Orders - Admin</h1>
<p>
    <a asp-page="Create" style="color:white">Create File</a>
</p>
<!-- 给下拉框添加ID和变更事件 -->
<select id="vendorFilter" asp-items="@((List<SelectListItem>)ViewData["demo"])">
    <option value="" disabled selected> Select a Vendor</option>
</select>
<br />
<table class="table" style="background-color: white">
    <thead>
        <tr>
            <th>PO No.</th>
            <th>Haulier</th>
            <th>Comments</th>
            <th>Vendor</th>
            <th>Upload</th>
            <th>Date Uploaded</th>
            <th>Download</th>
            <th>Delete Attachment</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Files)
        {
            if (item.FileType == "Purchase Order")
            {
                <!-- 给表格行添加供应商ID的自定义属性 -->
                <tr data-vendor-id="@item.Vendor.Id">
                    <td>@Html.DisplayFor(modelItem => item.Number)</td>
                    <td>@Html.DisplayFor(modelItem => item.Haulier)</td>
                    <td>@Html.DisplayFor(modelItem => item.Comments)</td>
                    <td>@Html.DisplayFor(modelItem => item.Vendor.VendorNo)</td>
                    <td><a asp-page="Upload" asp-route-id="@item.Id">Upload File Attachment</a></td>
                    <td>@Html.DisplayFor(modelItem => item.UploadDate)</td>
                    <td>
                        @if (item.Attachment != null)
                        {
                            <form asp-page-handler="Download" method="post" asp-route-id="@item.Id">
                                <input type="submit" class="btn btn-dark" value="Download">
                            </form>
                        }
                    </td>
                    <td>
                        @if (item.Attachment != null)
                        {
                            <form asp-page-handler="Delete" method="post" asp-route-id="@item.Id">
                                <input type="submit" class="btn btn-danger" value="Delete Attachment">
                            </form>
                        }
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

<script>
    function filterTableByVendor() {
        // 获取选中的供应商ID
        const selectedVendorId = document.getElementById('vendorFilter').value;
        // 获取所有表格行
        const rows = document.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            // 如果选中全部（空值），显示所有行；否则只显示匹配供应商ID的行
            if (!selectedVendorId || row.dataset.vendorId === selectedVendorId) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    // 页面加载时绑定事件
    document.getElementById('vendorFilter').addEventListener('change', filterTableByVendor);
</script>

方案二：后端提交刷新过滤（传统表单提交方式） #

通过表单提交到后端，由后端过滤数据后重新渲染页面。

1. 修改PageModel代码 #

添加供应商ID参数，根据参数过滤Files列表，并保持下拉框选中状态：

namespace FarmersPortal.Pages
{
    [Authorize(Roles ="Admin,Purchase Order")]
    public class PurchaseOrdersModel : PageModel
    {
        private readonly ILogger<PurchaseOrdersModel> _logger;
        private readonly filedbContext _context;

        public PurchaseOrdersModel(ILogger<PurchaseOrdersModel> logger, filedbContext context)
        {
            _logger = logger;
            _context = context;
        }   

        public IList<Data.File> Files { get; set; }
        public IList<Data.Vendor> Vendors { get; set; }
        
        // 添加供应商ID参数用于过滤
        public void OnGet(int? vendorId)
        {
            List<SelectListItem> test = new List<SelectListItem>();
            Vendors = _context.Vendors.ToList();
            
            // 根据供应商ID过滤Files
            var filesQuery = _context.Files.AsQueryable();
            if (vendorId.HasValue)
            {
                filesQuery = filesQuery.Where(f => f.Vendor.Id == vendorId.Value);
            }
            Files = filesQuery.ToList();
            
            // 生成下拉选项时设置选中状态
            foreach (var item in Vendors)
            {
                test.Add(new SelectListItem 
                { 
                    Text = item.VendorName, 
                    Value = item.Id.ToString(),
                    Selected = vendorId.HasValue && item.Id == vendorId.Value
                });
            }
            ViewData["demo"] = test;
        }

        // 保留原有Download和Delete方法不变
        public async Task<IActionResult> OnPostDownloadAsync(int? id)
        {
            var myInv = await _context.Files.FirstOrDefaultAsync(m => m.Id == id);
            if (myInv == null)
            {
                return NotFound();
            }

            if (myInv.Attachment == null)
            {
                return Page();
            }
            else
            {
                byte[] byteArr = myInv.Attachment;
                string mimeType = "application/pdf";
                return new FileContentResult(byteArr, mimeType)
                {
                    FileDownloadName = $"{myInv.FileType} {myInv.Number}.pdf"
                };
            }
        }

        public async Task<IActionResult> OnPostDeleteAsync(int? id)
        {
            var myInv = await _context.Files.FirstOrDefaultAsync(m => m.Id == id);
            if (myInv == null)
            {
                return NotFound();
            }

            if (myInv.Attachment == null)
            {
                return Page();
            }
            else
            {
                myInv.Attachment = null;
                _context.Update(myInv);
                await _context.SaveChangesAsync();
            }

            Files = await _context.Files.ToListAsync();
            return Page();
        }
    }
}

2. 修改cshtml代码 #

将下拉框放入表单中，提交到当前页面：

@page
@model PurchaseOrdersModel
@{
    ViewData["Title"] = "Home page";
}
<style>
    body {
        background-image: url('hero-range-1.jpg');
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<h1 style="color: white">Purchase Orders - Admin</h1>
<p>
    <a asp-page="Create" style="color:white">Create File</a>
</p>
<!-- 添加表单，提交到当前页面 -->
<form method="get">
    <select name="vendorId" asp-items="@((List<SelectListItem>)ViewData["demo"])">
        <option value="">Select a Vendor</option>
    </select>
    <button type="submit" class="btn btn-light ml-2">Filter</button>
</form>
<br />
<table class="table" style="background-color: white">
    <thead>
        <tr>
            <th>PO No.</th>
            <th>Haulier</th>
            <th>Comments</th>
            <th>Vendor</th>
            <th>Upload</th>
            <th>Date Uploaded</th>
            <th>Download</th>
            <th>Delete Attachment</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Files)
        {
            if (item.FileType == "Purchase Order")
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.Number)</td>
                    <td>@Html.DisplayFor(modelItem => item.Haulier)</td>
                    <td>@Html.DisplayFor(modelItem => item.Comments)</td>
                    <td>@Html.DisplayFor(modelItem => item.Vendor.VendorNo)</td>
                    <td><a asp-page="Upload" asp-route-id="@item.Id">Upload File Attachment</a></td>
                    <td>@Html.DisplayFor(modelItem => item.UploadDate)</td>
                    <td>
                        @if (item.Attachment != null)
                        {
                            <form asp-page-handler="Download" method="post" asp-route-id="@item.Id">
                                <input type="submit" class="btn btn-dark" value="Download">
                            </form>
                        }
                    </td>
                    <td>
                        @if (item.Attachment != null)
                        {
                            <form asp-page-handler="Delete" method="post" asp-route-id="@item.Id">
                                <input type="submit" class="btn btn-danger" value="Delete Attachment">
                            </form>
                        }
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

内容的提问来源于stack exchange，提问作者Megan Paterson