ASP.NET Core MVC实现文件按分类上传与导航栏筛选展示问题咨询

1. 调整模型层代码 #

• 修改FileDetails实体类，新增分类存储字段

public class FileDetails
{
    // 保留原有Id、FileName、FilePath、文件大小等字段不变
    public int Category { get; set; } // 对应你的分类1/2/3，若需要字符串分类名可改为string类型
}

• 修改FilesViewModel，新增分类绑定字段

public class FilesViewModel
{
    // 保留原有文件列表List<FileDetails> Files等字段不变
    public int? SelectedCategory { get; set; } // 当前选中的分类，为null时展示全部文件
    public List<int> AvailableCategories { get; set; } = new() {1,2,3}; // 可选择的分类列表
}

2. 修改上传业务逻辑 #

找到控制器中上传文件对应的Action，新增分类参数，保存文件时同步存储分类属性：

[HttpPost]
public async Task<IActionResult> Upload(IFormFile file, int category)
{
    // 原有文件合法性校验、相对路径存储逻辑完全保留
    var newFile = new FileDetails
    {
        FileName = file.FileName,
        // 原有其余字段赋值逻辑不变
        Category = category // 新增分类属性赋值
    };
    // 原有文件信息入库/持久化逻辑不变
    return RedirectToAction("Index1");
}

3. 调整文件列表查询逻辑 #

无需额外配置全局路由，直接给Index1Action新增可选分类参数，查询时按分类筛选即可：

public IActionResult Index1(int? category = null)
{
    // 从你的数据源（数据库/内存存储等）查询所有文件
    var fileQuery = _yourDataSource.FileDetails.AsQueryable();
    // 选中分类时只筛选对应分类的文件
    if (category.HasValue)
    {
        fileQuery = fileQuery.Where(f => f.Category == category.Value);
    }
    var viewModel = new FilesViewModel
    {
        Files = fileQuery.ToList(),
        SelectedCategory = category,
        AvailableCategories = new List<int>{1,2,3}
    };
    return View(viewModel);
}

4. 修改Index1前端视图 #

新增分类导航栏 #

在视图顶部添加导航栏，点击时自动携带分类参数请求后端：

<!-- 分类导航栏，可自行加CSS美化样式 -->
<div class="nav-bar">
    <a asp-action="Index1" asp-route-category="" class="@(Model.SelectedCategory == null ? "active" : "")">全部</a>
    @foreach (var cate in Model.AvailableCategories)
    {
        <a asp-action="Index1" asp-route-category="@cate" class="@(Model.SelectedCategory == cate ? "active" : "")">@cate</a>
    }
</div>

上传表单新增分类选择项 #

在原有上传表单中添加分类下拉框，提交时同步传递选中的分类值：

<form asp-action="Upload" method="post" enctype="multipart/form-data">
    <!-- 原有文件选择输入框保留 -->
    <div>
        <label>选择文件分类：</label>
        <select name="category" required>
            @foreach (var cate in Model.AvailableCategories)
            {
                <option value="@cate">@cate</option>
            }
        </select>
    </div>
    <button type="submit">确认上传</button>
</form>
<!-- 原有文件列表展示逻辑完全不变，控制器已返回对应分类的文件数据 -->

内容的提问来源于stack exchange，提问作者Panait Rares Horia