如何调用DownloadPreset帮助方法并传递a标签的data-itemid参数

前置说明 #

你无法直接从前端HTML调用服务端的C#静态方法，需要先将DownloadPreset方法暴露为可访问的HTTP接口，再通过前端请求触发调用。

步骤1：后端暴露HTTP接口 #

首先新增控制器包装静态方法，示例如下：

// 新增DownloadController.cs
using Microsoft.AspNetCore.Mvc;

public class DownloadController : Controller
{
    // 接口访问地址为 /Download/Preset
    public IActionResult Preset(string itemId)
    {
        // 直接调用你定义的静态方法，将前端传入的itemId作为参数传入
        return CantoDownloadPreset.DownloadPreset(itemId);
    }
}

确认你的项目路由规则已开启控制器路由，ASP.NET Core默认的路由配置即可匹配上述接口地址。

步骤2：前端触发调用，两种方案可选 #

方案1：直接填充a标签href（最简方案，适合无前置校验的下载场景） #

动态渲染a标签时直接拼接接口地址作为href值即可，渲染后的最终HTML效果：

<a href="/Download/Preset?itemId=ddb311d802494a0da355fed6e193db90" class="downloadPreset" data-itemid="ddb311d802494a0da355fed6e193db90">Course Image <strong>(600x384)</strong></a>

如果是Razor视图动态渲染，参考代码：

@* 遍历你的数据源生成链接 *@
@foreach (var preset in PresetList)
{
    <a href="/Download/Preset?itemId=@preset.ItemId" class="downloadPreset" data-itemid="@preset.ItemId">
        @preset.Name <strong>(@preset.Width x @preset.Height)</strong>
    </a>
}

方案2：绑定点击事件触发（适合需要前置校验的场景） #

如果点击链接时需要先做权限校验、参数验证等操作，可以通过JS绑定点击事件处理：

// 给所有下载链接绑定点击事件
document.querySelectorAll('.downloadPreset').forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止默认跳转行为
        e.preventDefault();
        // 读取data-itemid属性值
        const itemId = this.dataset.itemid;

        // 此处可添加自定义前置校验逻辑，校验不通过直接return终止执行
        // if(/* 校验不通过 */) return;

        // 校验通过后发起下载请求
        window.location.href = `/Download/Preset?itemId=${encodeURIComponent(itemId)}`;
    })
})

如果需要异步下载不跳转页面，可以替换成fetch请求处理blob流，示例代码如下：

fetch(`/Download/Preset?itemId=${encodeURIComponent(itemId)}`)
    .then(res => res.blob())
    .then(blob => {
        const downloadUrl = window.URL.createObjectURL(blob);
        const tempLink = document.createElement('a');
        tempLink.href = downloadUrl;
        tempLink.download = '自定义下载文件名'; // 可自行指定下载文件名
        document.body.appendChild(tempLink);
        tempLink.click();
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(tempLink);
    })

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