如何将C#返回的文件浏览结果输出到HTML并实现路径点击触发方法

以下基于C#常用的Web开发框架给出可落地的实现逻辑：

场景1：ASP.NET Core MVC / Razor Pages 服务端渲染 #

1. 后端将获取到的文件列表传给视图

public IActionResult FileList()
{
    // 此处为你原有获取文件列表的逻辑
    string[] ArrayFiles = GetCurrentDirectoryFiles();
    return View(ArrayFiles);
}

2. 视图中遍历渲染可点击元素，按需绑定后端方法或前端逻辑

• 点击直接调用后端方法的写法：

@model string[]

@foreach (var file in Model)
{
    <!-- 路径需要做URL编码避免特殊字符解析错误 -->
    <a href="@Url.Action("ProcessFile", "File", new { path = HttpUtility.UrlEncode(file) })">@file</a>
    <br/>
}

对应后端接收参数的方法示例：

public IActionResult ProcessFile(string path)
{
    // 先做路径合法性校验，防止路径遍历漏洞
    string decodedPath = HttpUtility.UrlDecode(path);
    // 执行你的业务逻辑
    return Ok();
}

• 点击先触发前端逻辑再调用后端的写法：

@model string[]

@foreach (var file in Model)
{
    <span class="file-item" 
          data-path="@HttpUtility.UrlEncode(file)" 
          style="cursor: pointer; color: blue; text-decoration: underline;">
        @file
    </span>
    <br/>
}

<script>
document.querySelectorAll('.file-item').forEach(item => {
    item.addEventListener('click', function() {
        const filePath = decodeURIComponent(this.dataset.path);
        // 执行自定义前端逻辑，示例为调用后端接口
        fetch('/File/ProcessFile?path=' + encodeURIComponent(filePath))
            .then(res => res.json())
            .then(data => {
                // 处理接口返回结果
            });
    });
});
</script>

场景2：前后端分离场景 #

1. 后端提供接口返回文件列表

[HttpGet("api/file/list")]
public IActionResult GetFileList()
{
    string[] ArrayFiles = GetCurrentDirectoryFiles();
    return Ok(ArrayFiles);
}

2. 前端请求接口拿到数组后，动态渲染可点击元素，绑定点击事件的逻辑和上述前端JS逻辑一致即可。

场景3：Blazor 应用实现 #

Blazor可直接在前端绑定C#方法，实现更简单：

@foreach (var file in ArrayFiles)
{
    <span @onclick="() => ProcessFile(file)" style="cursor: pointer; color: blue;">
        @file
    </span>
    <br/>
}

@code {
    // 你的原有文件列表获取逻辑
    private string[] ArrayFiles = GetCurrentDirectoryFiles();
    
    private void ProcessFile(string filePath)
    {
        // 直接执行C#业务逻辑
    }
}

注意事项 #

• 所有文件路径作为参数传递时，必须做URL编码处理，避免中文、空格、特殊符号导致的参数解析错误
• 后端接收路径参数后必须做合法性校验，限制可访问的目录范围，防止路径遍历漏洞导致敏感文件泄露

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