如何识别视图中循环生成的多个表单里被提交的表单？

这里有几个简单可靠的方法，可以轻松确定是哪个表单被提交了，结合你的循环代码给你具体实现：

方案1：添加唯一隐藏字段（后端直接识别，最省心） #

在每个表单里加入一个隐藏字段，存储当前循环项的唯一标识（比如你的item值），后端接收请求时直接读取这个字段的值就能定位到对应的表单。

修改后的代码：

@foreach (var item in Enumerable.Range(0,4)){ 
    <form id="Form_ImgGallery_@item" method="post"> 
        <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
            <input type="file" class="form-control"> 
            <!-- 新增隐藏字段存储表单唯一标识 -->
            <input type="hidden" name="formIdentifier" value="@item">
            <div class="form-group"> 
                <input type="submit" class="btn btn-info waves-effect" value="upload"> 
            </div> 
        </div> 
    </form> 
}

后端处理时，只需要读取formIdentifier参数的值，就能立刻知道是第几个表单提交的。这个方案不需要额外JS，简单直接，适合大多数场景。

方案2：给表单设置带标识的Action属性 #

你可以给每个表单的action属性添加一个标识参数，或者直接给表单设置唯一ID，后端通过URL参数就能识别提交来源。

示例代码：

@foreach (var item in Enumerable.Range(0,4)){ 
    <!-- 在action里加入表单标识参数 -->
    <form id="Form_ImgGallery_@item" method="post" action="/YourUploadEndpoint?formId=@item"> 
        <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
            <input type="file" class="form-control"> 
            <div class="form-group"> 
                <input type="submit" class="btn btn-info waves-effect" value="upload"> 
            </div> 
        </div> 
    </form> 
}

后端可以从请求的查询字符串中获取formId参数，以此判断提交的表单。如果你的后端路由支持，也可以把标识整合到路由路径里，比如action="/Upload/Form@item"。

方案3：JavaScript监听提交事件（适合需要前端处理的场景） #

如果需要在提交前做前端逻辑（比如文件预览、表单验证），可以给每个提交按钮添加自定义data-*属性，然后监听表单的提交事件，获取标识后再处理提交。

示例代码：

@foreach (var item in Enumerable.Range(0,4)){ 
    <form id="Form_ImgGallery_@item" class="gallery-form" method="post"> 
        <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
            <input type="file" class="form-control"> 
            <div class="form-group"> 
                <!-- 添加data属性存储表单标识 -->
                <input type="submit" class="btn btn-info waves-effect" data-form-id="@item" value="upload"> 
            </div> 
        </div> 
    </form> 
}

<script>
document.querySelectorAll('.gallery-form').forEach(form => {
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止默认提交
        
        // 获取当前表单的标识
        const formId = this.querySelector('[data-form-id]').dataset.formId;
        
        // 这里可以添加前端逻辑，比如文件验证、预览等
        const formData = new FormData(this);
        formData.append('formId', formId);
        
        // 手动发送请求
        fetch(this.action, {
            method: 'POST',
            body: formData
        }).then(response => {
            // 处理提交后的响应
        });
    });
});
</script>

这个方案灵活性高，适合需要前端干预提交流程的场景。

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