如何构建Asp.Net Core Razor页面签名控件，支持用户手写签名功能

完全可以实现，ASP.NET Core 技术栈完全支持该需求。浏览器端签名能力属于前端交互范畴，和后端 ASP.NET Core 框架完全解耦，你只需要将前端生成的签名数据传递到 Razor 页面/接口做后续存储、展示处理即可，完全不需要开发原生应用。

推荐的第三方签名组件 #

最常用的前端签名库是 signature_pad，轻量无任何依赖，原生支持触摸设备（完美适配平板使用场景），支持导出 PNG、JPG、SVG 多种格式，也内置了签名清空、笔触自定义、空签名校验等常用能力，可直接集成到 Razor 页面中使用。

集成步骤 #

你可以直接将库的JS文件下载到项目的 wwwroot 目录下，无需依赖外部资源，按以下步骤集成即可：

1. 在 Razor 页面中引入依赖、添加签名板UI元素

<!-- 先引入你下载到本地的signature_pad的JS文件 -->
<script src="~/js/signature_pad.umd.min.js"></script>

<!-- 签名板区域，适配平板的尺寸可以自己调整 -->
<canvas id="signaturePad" width="700" height="250" style="border: 1px solid #e5e7eb; border-radius: 4px; touch-action: none;"></canvas>
<div style="margin-top: 12px; gap: 12px; display: flex;">
  <button type="button" id="clearBtn">清空签名</button>
  <button type="button" id="saveToFormBtn">确认签名</button>
</div>

<!-- 如果是和表单一起提交，可以加个隐藏域存签名数据 -->
<input type="hidden" id="signatureInput" name="Signature" />

2. 初始化签名板的交互逻辑

const canvas = document.getElementById('signaturePad');
const signaturePad = new SignaturePad(canvas, {
  penColor: '#000', // 自定义笔触颜色
  minWidth: 1, // 最小笔触宽度，适配平板触控更自然
  maxWidth: 3
});

// 清空签名逻辑
document.getElementById('clearBtn').addEventListener('click', () => {
  signaturePad.clear();
  document.getElementById('signatureInput').value = '';
});

// 确认签名，把数据写入隐藏域，表单提交时一起传到后端
document.getElementById('saveToFormBtn').addEventListener('click', () => {
  if (signaturePad.isEmpty()) {
    alert('请先完成签名操作');
    return;
  }
  // 导出为png格式的base64字符串
  const signatureBase64 = signaturePad.toDataURL('image/png');
  document.getElementById('signatureInput').value = signatureBase64;
});

3. 后端 Razor Page 处理签名数据
   你可以直接在对应的 PageModel 中接收表单提交的签名数据，做存储、落库等操作即可：

public class MyFormPageModel : PageModel
{
    // 表单提交时自动绑定签名数据
    [BindProperty]
    public string Signature { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!string.IsNullOrEmpty(Signature))
        {
            // 把base64转成字节流存储
            var base64Data = Signature.Split(',')[1];
            var signatureBytes = Convert.FromBase64String(base64Data);
            // 以下是存储逻辑，可根据需求存到数据库或本地文件
            await System.IO.File.WriteAllBytesAsync($"wwwroot/signatures/{Guid.NewGuid()}.png", signatureBytes);
        }
        return RedirectToPage("Success");
    }
}

平板适配注意事项 #

• 页面头部要加上正确的viewport配置，避免触控偏移：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• Canvas元素的style要加上 touch-action: none 避免平板上滑动时触发浏览器默认行为导致签名中断

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