ASP.NET Razor表单提交时如何获取mgt-people-picker选中值？

嗨，这个问题我之前在项目里也遇到过！mgt-people-picker是Microsoft Graph Toolkit的Web Component，它不属于标准HTML表单控件范畴，所以默认不会被包含在表单的POST请求 payload 里，后端自然拿不到。不过有几个简单易懂的方案能解决这个问题，不需要太复杂的操作：

方案1：用隐藏输入框同步选中值（最兼容传统表单提交） #

这是最直接的方法，核心思路是把mgt-people-picker的选中人员数据，通过JavaScript同步到一个隐藏的input元素中，这样表单提交时，隐藏input的值就会被一起发送到后端。

前端代码示例：

<!-- 你的人员选择器 -->
<mgt-people-picker id="peoplePicker" selection-mode="multiple"></mgt-people-picker>

<!-- 新增隐藏输入框，用于承载选中人员数据 -->
<input type="hidden" name="SelectedPeople" id="selectedPeopleInput" />

<form method="post" onsubmit="syncSelectedPeople()">
    <!-- 其他表单元素（比如文本框、下拉框等） -->
    <input type="text" name="Title" />
    
    <button type="submit">提交表单</button>
</form>

<script>
function syncSelectedPeople() {
    // 获取人员选择器实例
    const picker = document.getElementById('peoplePicker');
    
    // 提取选中人员的关键信息（可根据你的需求调整属性）
    const selectedData = picker.selectedPeople.map(person => ({
        Id: person.id,
        DisplayName: person.displayName,
        Email: person.mail || person.userPrincipalName
    }));
    
    // 将数据序列化为JSON字符串，存入隐藏输入框
    document.getElementById('selectedPeopleInput').value = JSON.stringify(selectedData);
}
</script>

后端处理（Razor页面/Controller）：

首先，你可以定义一个简单的模型类来接收人员数据：

public class SelectedPerson
{
    public string Id { get; set; }
    public string DisplayName { get; set; }
    public string Email { get; set; }
}

然后在POST方法中接收并反序列化：

[HttpPost]
public IActionResult OnPost(string SelectedPeople, string Title)
{
    // 反序列化JSON字符串为人员列表
    var selectedPeople = JsonSerializer.Deserialize<List<SelectedPerson>>(SelectedPeople);
    
    // 这里就可以处理选中的人员数据了
    // ...
    
    return RedirectToPage();
}

如果是单选模式，只需要把selectedPeople.map改成直接取picker.selectedPerson即可，隐藏输入框的值也对应改成单个对象的JSON。

方案2：用AJAX直接提交数据（适合无刷新提交场景） #

如果你不想依赖传统表单提交，也可以用AJAX直接收集表单数据和人员选择器的选中值，一起发送到后端。

前端代码示例：

<mgt-people-picker id="peoplePicker" selection-mode="multiple"></mgt-people-picker>
<form id="myForm">
    <input type="text" name="Title" />
    <button type="button" onclick="submitFormViaAjax()">提交</button>
</form>

<script>
async function submitFormViaAjax() {
    const picker = document.getElementById('peoplePicker');
    const selectedData = picker.selectedPeople.map(p => ({
        Id: p.id,
        DisplayName: p.displayName,
        Email: p.mail
    }));
    
    // 收集表单其他数据
    const formData = new FormData(document.getElementById('myForm'));
    // 添加选中人员数据
    formData.append('SelectedPeople', JSON.stringify(selectedData));
    
    // 发送POST请求，注意带上防伪造令牌
    const response = await fetch('/YourPage/OnPost', {
        method: 'POST',
        body: formData,
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    });
    
    // 处理响应结果
    if (response.ok) {
        // 提交成功后的逻辑
        console.log('提交成功');
    }
}
</script>

后端的处理逻辑和方案1完全一致，不需要额外修改。

小结 #

个人最推荐方案1，因为它完全兼容传统的表单提交流程，改动最小，只需要新增一个隐藏input和几行同步数据的JavaScript代码，后端的接收逻辑也很直观。

内容的提问来源于stack exchange，提问作者Sébastien Pertus