如何在ASP.NET Core中实现支持Blob存储的Markdown文件查看器？

能否仅用ASP.NET Core实现？ #

完全可以，不需要依赖额外的JavaScript框架就能完成核心功能。如果追求更流畅的无刷新体验，只需要添加少量原生JS代码即可，无需引入Vue、React这类复杂框架。

核心实现步骤 #

1. 集成Blob存储访问
   安装Azure.Storage.Blobs NuGet包，编写一个服务类封装Blob读取逻辑：

   public class BlobMarkdownService
   {
       private readonly BlobContainerClient _containerClient;
   
       public BlobMarkdownService(IConfiguration config)
       {
           var connectionString = config["AzureBlobStorage:ConnectionString"];
           _containerClient = new BlobContainerClient(connectionString, "markdown-files");
       }
   
       public async Task<string> GetMarkdownContentAsync(string fileName)
       {
           var blobClient = _containerClient.GetBlobClient(fileName);
           if (!await blobClient.ExistsAsync())
               throw new FileNotFoundException("指定的Markdown文件不存在");
   
           using var stream = new MemoryStream();
           await blobClient.DownloadToAsync(stream);
           stream.Position = 0;
           using var reader = new StreamReader(stream);
           return await reader.ReadToEndAsync();
       }
   }
   

   在Program.cs中注册这个服务：

   builder.Services.AddScoped<BlobMarkdownService>();
   

2. 创建MVC控制器处理请求
   编写控制器读取Blob内容，并用Markdig（需安装Markdig NuGet包）将Markdown转为HTML：

   public class MarkdownController : Controller
   {
       private readonly BlobMarkdownService _blobService;
   
       public MarkdownController(BlobMarkdownService blobService)
       {
           _blobService = blobService;
       }
   
       public async Task<IActionResult> View(string fileName)
       {
           var markdownContent = await _blobService.GetMarkdownContentAsync(fileName);
           var htmlContent = Markdown.ToHtml(markdownContent, new MarkdownPipelineBuilder()
               .UseAdvancedExtensions() // 支持表格、代码块等扩展语法
               .Build());
           return View(model: htmlContent);
       }
   }
   

3. 编写视图渲染HTML
   创建Views/Markdown/View.cshtml视图：

   @model string
   <div id="markdown-container" class="markdown-content">
       @Html.Raw(Model)
   </div>
   

多文件链接跳转实现 #

后端刷新式跳转（无需JS） #

直接在Markdown文件中写指向控制器Action的链接：

[查看另一篇文档](/Markdown/View?fileName=another-document.md)

点击链接时会触发后端请求，重新加载页面并渲染新的Markdown内容。

无刷新跳转（原生JS实现） #

如果想要避免页面刷新，添加少量原生JS代码监听链接点击事件，通过AJAX获取新内容并替换当前区域：

@model string
<div id="markdown-container" class="markdown-content">
    @Html.Raw(Model)
</div>

<script>
    function bindLinkEvents() {
        document.querySelectorAll('.markdown-content a').forEach(link => {
            link.addEventListener('click', function(e) {
                // 仅处理指向本地Markdown视图的链接
                if (this.pathname === '/Markdown/View') {
                    e.preventDefault();
                    fetch(this.href)
                        .then(response => response.text())
                        .then(html => {
                            document.getElementById('markdown-container').innerHTML = html;
                            bindLinkEvents(); // 重新绑定新内容的链接事件
                        });
                }
            });
        });
    }

    document.addEventListener('DOMContentLoaded', bindLinkEvents);
</script>

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