点击提交按钮切换为Font Awesome加载图标，如何避免危险请求错误

我懂你的困扰——要给长耗时的提交按钮加加载图标，结果改value的方式触发了ASP.NET的安全验证错误，这是因为你把HTML代码塞进了表单提交参数里，被系统判定成潜在危险内容了。

问题根源 #

你的按钮是<button>标签，当你用attr('value', '<i class="fas fa-spinner fa-pulse"></i>')修改它的value属性时，提交表单时这段HTML会作为upload参数的值发给服务器。ASP.NET默认的请求验证会拦截包含<、>这类HTML标签的表单数据，所以才抛出了那个错误。而且更关键的是：<button>的显示内容是标签内部的HTML，不是value属性——你之前的修改方向完全错了！

正确实现步骤 #

我们要把按钮的显示内容和提交到服务器的参数值分开，具体操作如下：

1. 给按钮添加固定的value属性
   修改HTML按钮，设置一个安全的文本value，这样服务器收到的是这个固定值，和按钮显示内容无关：

   <form action="@Url.Action("Controler", "FES")" method="POST">
       <button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger" value="trigger-control">
           Contrôler
       </button>
   </form>
   

2. 修改jQuery代码，操作按钮内部HTML
   不要碰value属性，改用html()方法替换按钮的显示内容，同时建议禁用按钮防止重复提交：

   $("#upload-fes-btn-control").click(function () {
       // 保存原始按钮内容（可选，后续需要恢复时用）
       $(this).data('original-text', $(this).html());
       // 替换为加载图标
       $(this).html('<i class="fas fa-spinner fa-pulse"></i>');
       // 禁用按钮，避免重复提交请求
       $(this).prop('disabled', true);
   });
   

3. 服务器端代码无需改动
   现在Request.Form["upload"]的值是你设置的trigger-control，完全是安全的普通文本，不会触发验证错误，你原来的if (Request.Form["upload"] != null)逻辑可以正常运行。

额外优化（可选） #

如果需要在请求完成后恢复按钮状态（比如请求失败时），可以用之前保存的原始内容还原：

// 示例：请求结束后恢复按钮
$("#upload-fes-btn-control").prop('disabled', false).html($(this).data('original-text'));

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