Blazor Server端使用jQuery向SQL Server插入数据失败的解决方法

前端jQuery AJAX请求排查 #

• 确认请求URL正确性：Blazor Server环境下，AJAX请求URL需匹配Web API路由，比如接口路由为[Route("api/Owner/AddOwnerFile")]，则AJAX的url应设为"/api/Owner/AddOwnerFile"，务必保留开头斜杠，避免相对路径错误。
• 检查请求方法与数据格式：强制设置type: "POST"、contentType: "application/json"，并使用JSON.stringify()将数据转为JSON字符串，同时添加错误回调打印完整报错信息：

  window.insertData = function(ownerData) {
      $.ajax({
          url: "/api/Owner/AddOwnerFile",
          type: "POST",
          contentType: "application/json",
          data: JSON.stringify(ownerData),
          success: function(res) {
              console.log("插入成功", res);
          },
          error: function(xhr, status, err) {
              console.error("请求失败：", status, err);
              console.error("后端响应：", xhr.responseText); // 关键：获取后端报错详情
          }
      });
  };
  

Web API接口验证 #

• 核对路由与参数绑定：确保接口标注[HttpPost]，并使用[FromBody]接收JSON参数，示例：

  [ApiController]
  [Route("api/Owner")]
  public class OwnerController : ControllerBase
  {
      private readonly YourDbContext _context;
  
      public OwnerController(YourDbContext context) => _context = context;
  
      [HttpPost("AddOwnerFile")]
      public IActionResult AddOwnerFile([FromBody] OwnerModel model)
      {
          // 打印接收参数，确认数据是否传入
          Console.WriteLine($"接收参数：{JsonSerializer.Serialize(model)}");
          
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState); // 返回验证错误，前端可直接查看
          }
  
          _context.Owners.Add(model);
          var rowsAffected = _context.SaveChanges();
          Console.WriteLine($"数据库影响行数：{rowsAffected}"); // 0则说明未插入成功
  
          return Ok("插入完成");
      }
  }
  

• 确认接口权限：Blazor Server默认启用CORS，但同域请求无需额外配置，若存在跨域需在Startup/Program.cs中配置CORS策略。

数据库操作验证 #

• 检查连接字符串：确认appsettings.json中的连接字符串指向目标数据库，且数据库账号拥有INSERT权限。
• 匹配Model与表结构：确保OwnerModel的属性名称、数据类型、必填规则与SQL Server的Owner表完全一致，避免因字段不匹配导致静默失败。
• 直接执行SQL测试：将EF Core生成的插入语句复制到SSMS中执行，验证数据库本身是否支持该插入操作。

Blazor JS互调与脚本引用确认 #

• 保证脚本加载顺序：在_Host.cshtml中先加载jQuery，再加载自定义脚本：

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="~/js/insertdata.js"></script>
  

• 确认JS函数全局可访问：自定义JS函数需挂载到window对象上，确保Blazor能正常调用。
• 避免生命周期问题：不要在组件初始化阶段（如OnInitializedAsync）调用JS函数，建议通过按钮点击或OnAfterRenderAsync触发。

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