C# ASP.NET Core视图：将Complete按钮置于Search旁并提交选中ID

方案一：同一表单内通过按钮指定目标Action #

把两个按钮放在同一个表单中，利用HTML5的formaction属性让不同按钮提交到对应Action，同时保证复选框ID能正常绑定传递。

视图代码 #

<!-- 用flex布局实现按钮并排，无Bootstrap可替换为inline-block样式 -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
    <form asp-action="Search" method="get">
        <!-- 搜索输入框 -->
        <input type="text" name="searchTerm" placeholder="输入搜索内容" />
        
        <!-- 复选框列表，从视图模型绑定数据 -->
        @foreach (var item in Model.Items)
        {
            <div style="margin: 8px 0;">
                <input type="checkbox" name="selectedIds" value="@item.Id" id="chk-@item.Id" />
                <label for="chk-@item.Id">@item.DisplayName</label>
            </div>
        }
        
        <!-- Search按钮，提交到Search Action -->
        <button type="submit" style="padding: 6px 12px;">Search</button>
        
        <!-- Complete按钮，指定提交到Complete Action，POST方法 -->
        <button type="submit" formaction="@Url.Action("Complete")" formmethod="post" style="padding: 6px 12px;">Complete</button>
    </form>
</div>

后端Action代码 #

// 处理搜索请求的Action
public IActionResult Search(string searchTerm, List<int> selectedIds = null)
{
    // 搜索逻辑，selectedIds可选，根据需求处理
    var model = _yourDataService.GetFilteredItems(searchTerm);
    return View(model);
}

// 处理完成操作的Action，接收选中的ID列表
[HttpPost]
public IActionResult Complete(List<int> selectedIds)
{
    if (selectedIds == null || !selectedIds.Any())
    {
        ModelState.AddModelError("", "请至少选择一项");
        // 重新构建视图模型返回原页面
        var model = _yourDataService.GetAllItems();
        return View("Index", model);
    }
    
    // 执行标记完成的业务逻辑
    _yourDataService.MarkItemsAsCompleted(selectedIds);
    return RedirectToAction("Index");
}

关键注意事项 #

• 所有复选框的name必须统一为selectedIds，ASP.NET Core模型绑定才能自动收集选中的ID
• formaction属性支持主流浏览器，若需兼容旧版IE，可改用方案二
• 若搜索无需传递选中ID，可在Search Action中忽略selectedIds参数

方案二：JavaScript收集选中ID并提交 #

如果需要将两个按钮放在不同表单，或更灵活控制提交逻辑，可通过JS收集选中ID，动态创建表单提交到Complete Action。

视图代码 #

<!-- 按钮并排布局 -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
    <!-- Search独立表单 -->
    <form asp-action="Search" method="get" style="display: inline;">
        <input type="text" name="searchTerm" placeholder="输入搜索内容" />
        <button type="submit" style="padding: 6px 12px;">Search</button>
    </form>
    
    <!-- Complete按钮，无需嵌套在表单内 -->
    <button id="btn-complete" style="padding: 6px 12px;">Complete</button>
</div>

<!-- 复选框列表 -->
@foreach (var item in Model.Items)
{
    <div style="margin: 8px 0;">
        <input type="checkbox" class="item-chk" value="@item.Id" id="chk-@item.Id" />
        <label for="chk-@item.Id">@item.DisplayName</label>
    </div>
}

<!-- 防伪造令牌，ASP.NET Core POST请求必须 -->
@Html.AntiForgeryToken()

<script>
document.getElementById('btn-complete').addEventListener('click', function() {
    // 收集所有选中的复选框ID
    const selectedIds = Array.from(document.querySelectorAll('.item-chk:checked'))
        .map(chk => chk.value);
    
    if (selectedIds.length === 0) {
        alert('请至少选择一项');
        return;
    }
    
    // 创建临时表单
    const form = document.createElement('form');
    form.method = 'post';
    form.action = '@Url.Action("Complete")';
    
    // 添加防伪造令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]');
    form.appendChild(token.cloneNode(true));
    
    // 将选中ID添加为隐藏字段
    selectedIds.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'selectedIds';
        input.value = id;
        form.appendChild(input);
    });
    
    // 提交表单
    document.body.appendChild(form);
    form.submit();
});
</script>

后端Action代码 #

与方案一的Complete Action完全一致，无需修改。

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