Episerver Forms客户端验证迁移及提交数据编辑技术问询

核心解决思路 #

Episerver Forms有独立的客户端初始化流程，不能直接绑定普通submit事件，必须在表单初始化完成后再绑定自定义逻辑，可通过epiFormsInitialized事件监听加载完成状态。

完整客户端代码实现 #

// 监听Episerver Forms初始化完成事件
$(document).on('epiFormsInitialized', function() {
    // 定位当前表单元素
    const form = $('.epi-forms__form');
    
    // 绑定表单提交事件
    form.on('submit', function(e) {
        // 先阻止默认提交流程，执行自定义校验逻辑
        e.preventDefault();
        
        // 获取上传控件及选中文件
        const fileInput = form.find('input[type="file"]');
        const selectedFile = fileInput[0]?.files[0];
        
        // 无文件时直接放行提交
        if (!selectedFile) {
            form.unbind('submit').submit();
            return;
        }
        
        const fileName = selectedFile.name;
        
        // Ajax请求获取当前表单下已提交的文件名列表
        $.ajax({
            url: '/api/FormSubmissions/GetExistingFileNames', // 自定义后端接口
            method: 'GET',
            data: { formId: form.data('formid') }, // 传递表单ID用于精准筛选
            success: function(existingFileNames) {
                if (existingFileNames.includes(fileName)) {
                    // 文件名重复，显示错误提示（复用Forms自带错误容器）
                    let errorElement = form.find('.epi-forms__error-summary');
                    if (!errorElement.length) {
                        errorElement = $('<div class="epi-forms__error-summary"></div>').prependTo(form);
                    }
                    errorElement.text('该文件名已存在，请更换文件后重新提交');
                } else {
                    // 将文件名存入隐藏字段，随表单提交到后台
                    $('<input>', {
                        type: 'hidden',
                        name: 'SubmittedFileName',
                        value: fileName
                    }).appendTo(form);
                    
                    // 解除绑定的submit事件，执行默认提交流程
                    form.unbind('submit').submit();
                }
            },
            error: function() {
                // 请求失败时默认放行提交（可根据业务需求调整为阻止提交）
                form.unbind('submit').submit();
            }
        });
    });
});

注意事项 #

• 需确保后端接口/api/FormSubmissions/GetExistingFileNames正确返回指定表单下的已提交文件名列表
• 错误提示优先复用Episerver Forms自带的错误容器，保持页面样式一致性

Episerver Forms提供了内置的IFormDataRepository接口，可直接用于查询、更新已提交的表单数据，实现编辑功能：

后端服务实现示例 #

public class FormSubmissionService
{
    private readonly IFormDataRepository _formDataRepository;

    public FormSubmissionService(IFormDataRepository formDataRepository)
    {
        _formDataRepository = formDataRepository;
    }

    // 更新指定ID的表单提交数据
    public bool UpdateSubmission(Guid submissionId, Dictionary<string, object> updatedFields)
    {
        // 获取目标提交数据条目
        var formData = _formDataRepository.GetFormDataById(submissionId);
        if (formData == null) return false;

        // 更新字段值
        foreach (var field in updatedFields)
        {
            if (formData.Data.ContainsKey(field.Key))
            {
                formData.Data[field.Key] = field.Value;
            }
            else
            {
                formData.Data.Add(field.Key, field.Value);
            }
        }

        // 保存修改
        _formDataRepository.UpdateFormData(formData);
        return true;
    }
}

Kendo Grid编辑功能整合步骤 #

1. 在Kendo Grid中配置编辑模板，允许用户修改目标字段
2. 编辑完成后，通过Ajax调用上述服务的接口，传递submissionId和修改后的字段数据
3. 确保操作用户拥有EPiServer.Forms.Security.FormDataPermission.Edit权限，否则会触发权限异常

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