如何在ASP.NET Core MVC中实现Accept功能：点击后禁用编辑并隐藏按钮

一、前端纯JavaScript实现（无需后端交互） #

直接在视图页面编写HTML结构和JS逻辑，点击Accept按钮后立即禁用所有可编辑表单元素，并隐藏指定按钮。

视图代码（.cshtml） #

<form id="editForm">
    <!-- 示例表单控件 -->
    <div class="form-group">
        <label>姓名</label>
        <input type="text" class="form-control" name="Name" value="测试用户" />
    </div>
    <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" name="Email" value="test@example.com" />
    </div>
    <!-- 操作按钮 -->
    <button type="button" id="editBtn" class="btn btn-primary">编辑</button>
    <button type="button" id="acceptBtn" class="btn btn-success">Accept</button>
</form>

JavaScript逻辑 #

// 监听Accept按钮点击事件
document.getElementById('acceptBtn').addEventListener('click', function() {
    // 禁用表单内所有可编辑元素（输入框、下拉框、文本域等）
    const formElements = document.getElementById('editForm').elements;
    for (let elem of formElements) {
        if (['INPUT', 'SELECT', 'TEXTAREA'].includes(elem.tagName)) {
            elem.disabled = true;
        }
    }
    // 隐藏编辑按钮和Accept按钮
    document.getElementById('editBtn').style.display = 'none';
    document.getElementById('acceptBtn').style.display = 'none';
});

二、前后端结合的持久化实现（防止页面刷新后恢复） #

如果需要状态持久化（比如用户刷新页面后依然保持禁用状态），可以通过后端记录状态，再在视图中根据状态渲染页面。

1. 定义ViewModel #

public class UserEditViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    // 标记是否已点击Accept
    public bool IsAccepted { get; set; }
}

2. 后端Action（示例） #

public IActionResult Edit(int id)
{
    // 从数据库获取用户数据，组装ViewModel
    var user = _dbContext.Users.Find(id);
    var viewModel = new UserEditViewModel
    {
        Id = user.Id,
        Name = user.Name,
        Email = user.Email,
        IsAccepted = user.IsAccepted
    };
    return View(viewModel);
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Accept(int id)
{
    var user = _dbContext.Users.Find(id);
    if (user == null) return BadRequest();
    
    // 更新数据库中的状态
    user.IsAccepted = true;
    _dbContext.SaveChanges();
    
    return Ok();
}

3. 视图代码（.cshtml） #

@model UserEditViewModel

<form id="editForm">
    <input type="hidden" name="Id" value="@Model.Id" />
    <div class="form-group">
        <label>姓名</label>
        <input type="text" class="form-control" name="Name" value="@Model.Name" disabled="@Model.IsAccepted" />
    </div>
    <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" name="Email" value="@Model.Email" disabled="@Model.IsAccepted" />
    </div>
    <!-- 仅当未点击Accept时显示按钮 -->
    @if (!Model.IsAccepted)
    {
        <button type="button" id="editBtn" class="btn btn-primary">编辑</button>
        <button type="button" id="acceptBtn" class="btn btn-success">Accept</button>
    }
</form>

@* 引入防伪令牌，用于AJAX提交 *@
@Html.AntiForgeryToken()

<script>
    document.getElementById('acceptBtn')?.addEventListener('click', function() {
        const userId = @Model.Id;
        // AJAX提交到后端更新状态
        fetch('/Home/Accept', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify({ id: userId })
        }).then(response => {
            if (response.ok) {
                // 禁用表单元素并隐藏按钮
                const formElements = document.getElementById('editForm').elements;
                for (let elem of formElements) {
                    if (['INPUT', 'SELECT', 'TEXTAREA'].includes(elem.tagName)) {
                        elem.disabled = true;
                    }
                }
                document.getElementById('editBtn').style.display = 'none';
                document.getElementById('acceptBtn').style.display = 'none';
            }
        });
    });
</script>

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