如何在CSHTML中将JS函数参数传递给内联C#代码？

问题场景 #

后端有一个接收int类型Id、返回字符串SerialNumber的静态格式化函数MyFormater.GetFormatedSerial，希望仅保留一处实现。某视图中需要展示可排序（基于SQL查询）的序列号列，由于排序依赖SQL中的Id值，所以打算通过JS修改显示值，把Id转换为序列号。

视图中的脚本代码如下：

<script>
    function formatToSerial(id) {
        return @MyFormater.GetFormatedSerial(int.Parse(id));
    }
</script>

问题：此处无法识别JS函数参数id——因为内联C#代码在页面渲染阶段就已执行，根本获取不到客户端运行时的JS参数。

疑问：有没有内置的优雅方式将JS函数参数传递给内联C#调用？还是必须单独为JS重写格式化函数？

已尝试方案：考虑过将格式化函数设为JSInvokable，但该功能属于Blazor，当前项目未使用。

可行解决方案 #

方案1：把格式化逻辑做成API接口 #

在后端新增一个API接口，接收Id参数并返回格式化后的序列号，JS通过异步请求调用这个接口：

async function formatToSerial(id) {
    const response = await fetch(`/api/format/serial?id=${id}`);
    return await response.text();
}

后端接口示例（ASP.NET为例）：

[Route("api/format/serial")]
public IActionResult GetSerial(int id)
{
    return Ok(MyFormater.GetFormatedSerial(id));
}

这种方式完全复用后端的格式化逻辑，不用重复实现。

方案2：把C#格式化逻辑翻译成JS代码 #

如果格式化逻辑简单（比如固定格式拼接、数字补位这类），直接把C#里的逻辑转成JS代码即可，没有网络请求开销，适合轻量场景。
比如C#逻辑是：

public static string GetFormatedSerial(int id)
{
    return $"SN-{id:D6}";
}

对应的JS代码：

function formatToSerial(id) {
    return `SN-${parseInt(id).toString().padStart(6, '0')}`;
}

方案3：页面渲染时预生成格式化映射表 #

如果页面中需要格式化的Id是提前已知的（比如列表数据已经在后端获取），可以在后端把每个Id对应的序列号提前生成，以JSON对象注入页面，JS直接通过映射表取值：
后端代码（Razor视图为例）：

@{
    var idSerialMap = Model.IdList.ToDictionary(id => id, MyFormater.GetFormatedSerial);
}
<script>
    const serialMap = @Json.Serialize(idSerialMap);
    function formatToSerial(id) {
        return serialMap[id] || id;
    }
</script>

这种方式既复用了后端逻辑，又避免了网络请求，适合数据量不大的场景。

结论 #

没有内置方式能直接在非Blazor的ASP.NET视图中，让运行时的JS参数传递给内联C#代码——因为内联C#是在服务器端页面渲染阶段执行的，而JS是在客户端浏览器运行阶段执行，两者执行时机和环境完全分离。

选择方案可以参考：

• 数据动态性高、格式化逻辑复杂：优先用API接口方案
• 格式化逻辑简单：直接转JS代码
• 数据量小且提前可知：用预生成映射表方案

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