在ASP.NET Core Action中能否跨表单获取不同表单元素的值？

问题原因 #

提交表单时，浏览器只会发送当前表单内的表单控件数据，通用surname输入框属于独立表单，不会被自动包含到person1或person2的提交请求中，因此后端无法接收到surname参数。

可行实现方式 #

方式一：隐藏字段+JS同步值 #

在每个提交表单中添加隐藏的surname字段，通过JavaScript实时同步通用输入框的值，提交时隐藏字段会自动携带surname数据。

修改后的表单代码：

<form id="commonSurname">
    <input type="text" id="surname" name="surname" />
</form>
    
<form id="person1" asp-action="getPerson1" method="post">
    <input type="text" id="name1" name="name1" />
    <input type="hidden" name="surname" id="surname1" />
    <input type="submit" id="get1" name="get1" value="get1" />
</form>

<form id="person2" asp-action="getPerson2" method="post">
    <input type="text" id="name2" name="name2" />
    <input type="hidden" name="surname" id="surname2" />
    <input type="submit" id="get2" name="get2" value="get2" />
</form>

<script>
// 监听通用姓氏输入框的变化，同步到两个隐藏字段
document.getElementById('surname').addEventListener('input', function() {
    const surnameValue = this.value;
    document.getElementById('surname1').value = surnameValue;
    document.getElementById('surname2').value = surnameValue;
});
</script>

控制器代码无需修改，提交后即可正常获取surname参数。

方式二：JS拦截提交事件，手动构造FormData #

通过JavaScript拦截表单提交事件，手动收集通用surname的值并添加到当前表单的FormData中，再发起提交请求。

修改后的表单代码（无需添加隐藏字段）：

<form id="commonSurname">
    <input type="text" id="surname" name="surname" />
</form>
    
<form id="person1" asp-action="getPerson1" method="post">
    <input type="text" id="name1" name="name1" />
    <input type="submit" id="get1" name="get1" value="get1" />
</form>

<form id="person2" asp-action="getPerson2" method="post">
    <input type="text" id="name2" name="name2" />
    <input type="submit" id="get2" name="get2" value="get2" />
</form>

<script>
// 绑定person1表单提交事件
document.getElementById('person1').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    const formData = new FormData(this);
    // 添加通用姓氏值
    formData.append('surname', document.getElementById('surname').value);
    // 手动发起请求
    fetch(this.action, {
        method: this.method,
        body: formData
    }).then(response => {
        window.location.href = response.url; // 处理跳转
    });
});

// 绑定person2表单提交事件
document.getElementById('person2').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    formData.append('surname', document.getElementById('surname').value);
    fetch(this.action, {
        method: this.method,
        body: formData
    }).then(response => {
        window.location.href = response.url;
    });
});
</script>

控制器代码保持不变，提交后即可获取到surname参数。

方式三：合并表单结构（最简方案） #

如果页面布局允许，直接将通用surname输入框放到每个提交表单内部，提交时会自动携带该字段：

<form id="person1" asp-action="getPerson1" method="post">
    <input type="text" name="surname" placeholder="输入姓氏" />
    <input type="text" id="name1" name="name1" />
    <input type="submit" id="get1" name="get1" value="get1" />
</form>

<form id="person2" asp-action="getPerson2" method="post">
    <input type="text" name="surname" placeholder="输入姓氏" />
    <input type="text" id="name2" name="name2" />
    <input type="submit" id="get2" name="get2" value="get2" />
</form>

这种方式无需JavaScript，但仅适用于不需要统一输入框的场景。

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