在Razor Page（无控制器）使用Kendo UI异步上传返回404错误求助

咱先定位问题根源：Razor Pages的路由机制和传统MVC控制器不一样，它靠页面模型里的OnPost[HandlerName]方法处理Post请求，而Kendo UI上传组件默认的配置可能还是指向MVC风格的Action路径，这就导致请求找不到对应的处理方法，出现404错误。下面一步步给你解决：

1. 修正Kendo Upload的异步配置 #

不管你是用HtmlHelper还是JS初始化上传组件，都要把async.saveUrl指向当前Razor Page的Handler方法，而不是控制器Action。

用HtmlHelper初始化的示例： #

@(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("Upload", "") // 第二个空字符串代表当前页面，"Upload"是Handler名称
        .Remove("Remove", "")
        .AutoUpload(true)
    )
)

用JS初始化的示例： #

$("#files").kendoUpload({
    async: {
        saveUrl: '@Url.Page("", "Upload")', // 生成当前页面的Upload Handler路径
        removeUrl: '@Url.Page("", "Remove")',
        autoUpload: true
    }
});

2. 在Page Model中实现对应的Handler方法 #

打开你的Index.cshtml.cs文件，添加处理上传和删除的Post Handler方法，注意方法命名要符合OnPost[HandlerName]的规则，同时返回Kendo组件需要的JSON响应：

public class IndexModel : PageModel
{
    // 你的现有属性，比如ReviewType、ReviewTypes等
    
    // 处理文件上传的Handler
    public async Task<IActionResult> OnPostUpload(IEnumerable<IFormFile> files)
    {
        if (files != null && files.Any())
        {
            foreach (var file in files)
            {
                // 这里写你的文件处理逻辑，比如保存到服务器目录
                var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", Path.GetFileName(file.FileName));
                using (var stream = new FileStream(savePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
            }
        }
        
        // 返回Kendo需要的成功响应
        return new JsonResult(new { success = true });
    }

    // 处理文件删除的Handler（可选）
    public IActionResult OnPostRemove(string[] fileNames)
    {
        if (fileNames != null && fileNames.Any())
        {
            foreach (var fileName in fileNames)
            {
                var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads", fileName);
                if (System.IO.File.Exists(filePath))
                {
                    System.IO.File.Delete(filePath);
                }
            }
        }
        
        return new JsonResult(new { success = true });
    }
}

3. 额外注意事项 #

• 你代码里已经设置了enctype="multipart/form-data"，这点很重要，确保保留
• 如果需要上传大文件，要在Program.cs/Startup.cs里调整表单大小限制：

builder.Services.Configure<FormOptions>(options =>
{
    options.MultipartBodyLengthLimit = 104857600; // 这里设置为100MB，按需调整
});

• 确保服务器上的上传目录（比如wwwroot/uploads）存在，并且应用有读写权限

这样调整后，Kendo上传组件的请求就会正确指向Razor Page的Handler方法，不会再出现404错误啦。

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