在ASP.NET MVC（.NET 4.8）中为Html.TextBoxFor添加内置清空按钮

1. 修改HTML结构，整合文本框与清空按钮 #

将原有的@Html.TextBoxFor(m => m.CrewId)包裹在容器中，同时加入清空按钮，确保按钮与文本框关联：

<div class="input-with-clear">
    @Html.TextBoxFor(m => m.CrewId, new { @class = "form-control", placeholder = "输入人员ID" })
    <button type="button" class="clear-btn" data-target="#@Html.IdFor(m => m.CrewId)">×</button>
</div>

2. 添加JavaScript点击逻辑 #

在页面底部（或单独的JS文件中）添加按钮点击事件，实现清空文本框的功能：

// 监听清空按钮点击
document.querySelectorAll('.clear-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const targetId = this.getAttribute('data-target');
        const inputElement = document.querySelector(targetId);
        if (inputElement) {
            inputElement.value = '';
            // 若需触发表单验证，可添加以下代码（根据项目需求选择）
            inputElement.dispatchEvent(new Event('input'));
            inputElement.dispatchEvent(new Event('change'));
        }
    });
});

3. 可选：添加CSS样式让按钮嵌入文本框 #

通过CSS调整按钮位置，使其看起来像是文本框的一部分：

.input-with-clear {
    position: relative;
    display: inline-block;
}

.clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 0 4px;
}

.clear-btn:hover {
    color: #333;
}

/* 确保文本框右侧留出按钮空间 */
.input-with-clear .form-control {
    padding-right: 30px;
}

补充说明 #

• 利用@Html.IdFor(m => m.CrewId)动态获取文本框ID，避免硬编码，适配模型字段变更
• 按钮使用type="button"防止触发表单提交
• 若项目使用jQuery，可将JS逻辑替换为：

$('.clear-btn').on('click', function() {
    const targetId = $(this).data('target');
    $(targetId).val('').trigger('input').trigger('change');
});

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