Sencha提交表单至ASP.NET Web API时出现404资源加载失败错误

一、先修正表单代码中的明显错误 #

你的代码里有几处可能导致验证或参数匹配失败的问题：

1. allowBlank参数错误：你写的是字符串'false'，Ext JS的布尔配置项需要用布尔值false，字符串会被解析为true，导致字段验证失效。
2. 字段名称不匹配：字段标签是Id，但name属性设为nameInp，如果后端API接收的参数是Id，会导致参数无法正确绑定。
3. xtype命名问题：自定义xtype建议用小写（比如'movieform'），避免和Ext内置组件冲突，当前大写的'Form'可能导致组件识别异常。

修正后的核心代码片段：

items: [
    {
        fieldLabel:'Id',
        name: 'Id', // 改为和后端参数一致的名称
        allowBlank: false, // 改为布尔值
    },
],
buttons: [
    {
        text: 'submit',
        formBind: true,
        disabled: true,
        handler: function(){
            var form = this.up('form');
            if(form.isValid()){
                form.submit({
                    success: function(form,action){
                        Ext.Msg.alert(
                            'success',
                            'The new movie is added'
                        );
                    },
                    // 完善错误回调，打印详细信息
                    failure: function(form, action){
                        const errorMsg = action.result?.message || action.response?.statusText || '未知错误';
                        console.error('提交失败详情:', action);
                        Ext.Msg.alert('Failure', `Oops, something went wrong! 详情: ${errorMsg}`);
                    }
                });
            }
        }
    }
]

二、通过浏览器开发者工具排查请求细节 #

提交表单时打开浏览器F12的Network标签，找到对应的POST请求，检查以下内容：

• 请求方法和URL：确认是POST方法，URL正确无误。
• 请求头Content-Type：因为设置了jsonSubmit: true，应该显示为application/json，如果是application/x-www-form-urlencoded，说明jsonSubmit未生效，可手动添加headers：

  form.submit({
      headers: {
          'Content-Type': 'application/json'
      },
      // 其他配置...
  })
  

• 请求体（Request Payload）：确认发送的JSON结构和后端API接收的模型一致，比如是否是{"Id": "你的输入值"}。
• 响应状态码和内容：如果是400（Bad Request），通常是参数验证失败；500（Internal Server Error）是后端代码异常；404是路由错误（可再确认端点配置）。

三、验证后端API的可用性 #

用Postman或curl直接调用API，排除前端因素：

• 发送POST请求到https://localhost:7271/Movies，请求体用正确的JSON格式（比如{"Id": "123"}）。
• 如果直接调用失败：检查后端的日志，看是否有模型验证错误、数据库连接异常、权限问题等。
• 如果直接调用成功：说明前端请求的参数格式或名称和后端不匹配，回到前端检查字段name属性、请求体结构。

四、检查后端模型绑定和日志 #

• 确认后端的模型类属性名称和前端发送的参数一致，比如后端模型：

  public class MovieDto
  {
      public int Id { get; set; } // 注意类型是否和前端输入匹配，比如前端输入字符串，后端是int会导致转换错误
      // 其他属性...
  }
  

• 查看后端的日志（比如ASP.NET的日志文件、控制台输出），找到请求对应的错误信息，这是定位后端问题最直接的方式。

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