.NET Core开发：如何在JSON结果中生成可点击链接列表

我来帮你解决这个问题！你遇到的核心问题主要在URL路径构造、模型序列化规则以及API返回规范上，下面一步步来调整你的代码：

1. 模型用字段而非属性：.NET Core默认的JSON序列化器（System.Text.Json）只会序列化公共属性，字段可能无法被正确序列化到JSON结果中；
2. 相对路径不可靠：你用../../Api/values/这种相对路径，在不同部署环境或前端页面位置下会失效，应该生成基于当前请求的绝对URL；
3. 返回方式不够规范：直接用Json()返回不如用符合REST规范的Ok()方法，后者会自动适配请求格式。

1. 修正模型定义 #

把字段改成带get;set;的公共属性，确保能被JSON序列化：

namespace Count.Models {
    public class ReadItems {
        public string Filename { get; set; }
        public string Url { get; set; }
    }
}

2. 重构控制器代码 #

优化URL生成逻辑，使用框架自带的Url.Action生成可靠的绝对URL，同时规范API返回方式：

using System.IO;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace Count.Controllers {
    [Route("api/[controller]")]
    [ApiController] // 启用API专属特性，自动处理路由、验证等
    public class ValuesController : ControllerBase { // API控制器继承ControllerBase更轻量
        private const string LogFolder = @"C:\Data\Count";

        // GET api/values
        [HttpGet]
        public IActionResult Get() {
            // 获取文件列表并倒序，直接用Linq更简洁
            var allFiles = Directory.GetFiles(LogFolder).Reverse().ToList();
            var clicklist = new List<Count.Models.ReadItems>();

            for (int i = 0; i < allFiles.Count; i++) {
                var file = allFiles[i];
                clicklist.Add(new Models.ReadItems {
                    // 用Path.GetFileName安全获取文件名，避免路径替换出错
                    Filename = Path.GetFileName(file),
                    // 生成绝对URL，包含协议、主机和路由，适配所有环境
                    Url = Url.Action("GetFile", "Values", new { id = i }, Request.Scheme)
                });
            }

            // 用Ok()返回，自动适配JSON格式，符合REST规范
            return Ok(clicklist);
        }

        // 添加对应的文件获取接口，处理点击后的请求
        [HttpGet("{id}")]
        public IActionResult GetFile(int id) {
            var allFiles = Directory.GetFiles(LogFolder).Reverse().ToList();
            // 处理ID越界的情况
            if (id < 0 || id >= allFiles.Count) {
                return NotFound("文件不存在");
            }

            var filePath = allFiles[id];
            // 返回文件流，支持浏览器直接下载或预览
            return PhysicalFile(filePath, "application/octet-stream", Path.GetFileName(filePath));
        }
    }
}

3. 前端渲染说明 #

JSON本身只是数据，要实现“可点击链接”需要前端负责渲染：比如在Vue/React中循环生成<a>标签：

<!-- 示例：Vue中渲染链接列表 -->
<div v-for="(item, index) in clicklist" :key="index">
  <a :href="item.url" target="_blank">{{ item.filename }}</a>
</div>

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