如何在razor页面中为多行设置一个提交按钮？

Answer 1

我认为你需要重组你的表单以包含整个表格， 通过这种方式，您可以为整个表单设置一个提交按钮，而不是为每一行设置一个单独的表单。 然而，管理多个复选框并确保在选中复选框时仅提交相关的 id 和 isValid 值可能会很棘手。 下面的 Razor 视图和控制器操作来处理这种情况 首先调整您的视图以将整个表格包含在单个表单中，并使用隐藏输入来管理正在提交的联系人的“isValid”状态。 您可以使用 JS 根据选中的复选框来更新这些隐藏的输入

@model IEnumerable<ContactModel>
<form method="post" asp-action="EditContacts">
    <table class="table table-stripped table-bordered text-center">
        <thead>
            <tr>
                <th>no</th>
                <th>address</th>
                <th>confirm address</th>
            </tr>
        </thead>
        <tbody>
            @{
                int id = 0;
                foreach (var contact in Model)
                {
                    id++;
                    <tr>
                        <td>@id</td>
                        <td>@contact.Address</td>
                        <td>
                            <input type="checkbox" class="h4 form-check-input single-checkbox" name="SelectedContactId" value="@contact.Id" />
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
    <button type="submit" id="submitButton" style="display:none;">Submit</button>
</form>

然后调整你的 Js 以处理基于复选框操作的提交按钮的显示和隐藏。 由于您现在只有一个表单，因此确保一次只能选择一个复选框的 JavaScript 逻辑保持不变。

@section Scripts {
    <script>
        $(document).ready(function() {
            $('.single-checkbox').change(function() {
                $('.single-checkbox').not(this).prop('checked', false);
                $('#submitButton').toggle($('.single-checkbox:checked').length > 0);
            });
        });
    </script>
}

最后，您可以调整控制器操作以接受可能为空的

SelectedContactId

。此 ID 将代表其 isValid 状态正在更新的所选联系人。

[HttpPost]
public async Task<IActionResult> EditContacts(int? SelectedContactId)
{
    if (SelectedContactId.HasValue)
    {
        var dbContact = await _db.ContactModels.FindAsync(SelectedContactId.Value);
        if (dbContact != null)
        {
            var contactsWithInvalidAddress = await _db.ContactModels.Where(c => c.PostalCode == dbContact.PostalCode && c.Id != SelectedContactId.Value).ToListAsync();

            dbContact.IsValid = true;
            foreach (var contact in contactsWithInvalidAddress)
            {
                contact.IsValid = false;
            }
            await _db.SaveChangesAsync();
        }
    }
    // Redirect to a relevant view or action after processing
    return RedirectToAction("YourViewName");
}