You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在ASP.NET中获取字段数量未知的表单的所有值?

问题

我做了一个表单,允许用户编辑另一个表单里的下拉列表。用户能查看当前下拉列表的值,还可以编辑、删除或者添加新值——点击后会在模态框打开表单,编辑现有值、删除或新增,最终表单返回的值数量不固定。

对应的CSHTML代码:

@using (Html.BeginForm("EditDropDown", "Incidents", FormMethod.Post, new { onsubmit = "validateCustomTolerances()", id = "modal-form" }))
{
  @foreach (var opt in Model.IncRptOptions)
  {
    @if (opt.Type == "Action")
      {
        <div class="IncRpt-opt-modalDisp">
          <input type="text" id="" name="" value="@opt.TypeValue">
          <a class="edit-dropdown delete-existing"><i class="bi bi-trash3-fill"></i></a>
        </div>
      }
   }
   <div id="additional-options-here"></div>
   <a class="btn btn-sm btn-secondary" id="add-option">Add Option</a>
   <br>
   <!-- Hidden form content (required by controller action) -->
   <input id="optionType" type="hidden" name="optionType" value="Action" />

   <!-- Form buttons -->
   <div class="modal-form-btns">
     <button type="submit" class="btn btn-sm btn-primary modal-save-btn">Save</button>
     <button type="button" class="btn btn-sm btn-secondary">Cancel</button>
   </div>
}

对应的JS代码:

<script>
    // Deletes the existing option next to the 'bin' button user clicks it. 
    document.querySelectorAll('.delete-existing').forEach(item => {
        item.addEventListener('click', event => {
            let existingParent = item.parentElement;
            existingParent.remove();
        });
    });

    // Event listeners for the 'add option' button
    let addOption = document.querySelector('#add-option');

    // Creates the form input element for an additional option when button clicked
    addOption.addEventListener('click', function () {
        let parent = document.querySelector('#additional-options-here');
        let html = `
                <input type="text" id="test" name="" value="">
                <a class="edit-dropdown delete-added"><i class="bi bi-trash3-fill"></i></a>
                `;
        let template = document.createElement('div');
        template.setAttribute('class', 'IncRpt-opt-modalDisp')
        template.innerHTML = html;
        let finalHTML = template;
        finalHTML.querySelector('.delete-added').addEventListener('click', deleteAddedElement);
        parent.appendChild(finalHTML);
    });

    // Deletes the added option elements when user clicks on the 'bin' icons
    function deleteAddedElement() {
        let parent = this.parentElement;
        parent.remove();
    }
</script>

因为无法确定表单返回的值数量,之前在Flask中我用request.form.getList("Input-name-value")来获取所有值,想问下ASP.NET里的等效方法是什么?


解决方案

在ASP.NET中,和Flask的request.form.getList()功能对等的实现分两种方式,前提是你要先给所有动态输入框设置统一的name属性(比如ActionOptions),否则后端无法识别并收集这些值:

1. 直接通过Request对象获取

使用Request.Form.GetValues("inputName")方法,它会返回一个string[]数组,包含所有提交的同名表单值。

步骤:

  • 修改CSHTML中循环生成的input:<input type="text" name="ActionOptions" value="@opt.TypeValue">
  • 修改JS中新增的input:<input type="text" name="ActionOptions" value="">

控制器代码示例:

[HttpPost]
public ActionResult EditDropDown()
{
    // 获取所有提交的选项值
    string[] actionOptions = Request.Form.GetValues("ActionOptions");
    // 获取隐藏域的optionType
    string optionType = Request.Form["optionType"];

    // 可选:过滤空值或无效值
    var validOptions = actionOptions?.Where(opt => !string.IsNullOrWhiteSpace(opt)).ToList() ?? new List<string>();

    // 后续保存逻辑...
    return RedirectToAction("YourTargetAction");
}

2. 强类型模型绑定(推荐)

如果想利用ASP.NET的强类型特性,可以定义一个视图模型,让框架自动收集表单值:

定义视图模型:

public class DropDownEditViewModel
{
    public string OptionType { get; set; }
    public List<string> ActionOptions { get; set; } = new List<string>();
}

控制器代码示例:

[HttpPost]
public ActionResult EditDropDown(DropDownEditViewModel model)
{
    // model.ActionOptions就是所有提交的有效选项值列表
    // model.OptionType对应隐藏域的value

    // 可选:过滤空值
    model.ActionOptions = model.ActionOptions.Where(opt => !string.IsNullOrWhiteSpace(opt)).ToList();

    // 后续保存逻辑...
    return RedirectToAction("YourTargetAction");
}

同样要确保所有输入框的name属性为ActionOptions,模型绑定才能自动将同名值收集到List<string>中。

额外注意事项

  • 提交前可以在JS的validateCustomTolerances()函数里校验,过滤空输入框,避免无效值提交;
  • 页面上被删除的输入框不会被提交,后端直接处理提交上来的数组/列表即可,无需额外处理删除操作。

内容的提问来源于stack exchange,提问作者Chris

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.19 05:25:38