ASP.NET 6 Razor Pages中Web Component表单值传递至后端的实现合理性及优化方案咨询

一、你的现有实现是否正确？ #

完全正确！你的实现完全符合Razor Pages的表单提交和模型绑定规范：

• 你添加了AntiForgeryToken，规避了CSRF风险，这是Razor Pages表单提交的必要操作；
• 通过asp-for绑定后端[BindProperty]标记的模型属性，这是Razor Pages模型绑定的标准用法；
• 针对Web Component的Shadow DOM封装特性，用自定义事件mycomp-submit传递表单值，再同步到绑定的隐藏字段后提交，这个思路完美解决了Web Component内部元素无法直接被外部表单绑定的问题，逻辑通顺且有效。

二、更优的实现方案 #

既然你是新手，我给你两种更简洁的优化方向，根据你的Web Component是否可修改来选择：

方案1：让Web Component直接适配Razor模型绑定（推荐，最简洁）

如果这个my-component是你自己开发的，可以修改组件代码，让内部的输入框直接参与Razor的表单绑定，省去隐藏字段的中间层：

• 思路：在组件的connectedCallback生命周期里，给内部的用户名、密码输入框设置和Razor模型属性一致的name属性（比如BoundCredentialsModel.UserName），这样表单提交时，浏览器会自动把这些值发送到后端，Razor的模型绑定就能直接捕获。

示例组件代码片段：

class MyComponent extends HTMLElement {
  connectedCallback() {
    // 假设组件内部输入框的id是username和password
    this.shadowRoot.getElementById('username').name = 'BoundCredentialsModel.UserName';
    this.shadowRoot.getElementById('password').name = 'BoundCredentialsModel.Password';
  }
}
customElements.define('my-component', MyComponent);

简化后的TestMyComp.cshtml：

<form method="post">
  @Html.AntiForgeryToken()
  <my-component></my-component>
  <!-- 组件内部的提交按钮可以直接触发表单提交，也可以保留外部按钮 -->
  <button type="submit">提交</button>
</form>

这样用户输入后直接提交表单，后端OnPost方法里的BoundCredentialsModel就能直接拿到值，不用再写事件监听和隐藏字段的代码，流程更清爽。

方案2：用AJAX异步提交（无需刷新页面，体验更好）

如果无法修改Web Component的代码，也可以直接用AJAX提交组件传递的表单数据，不用刷新整个页面：

修改后的TestMyComp.cshtml：

@Html.AntiForgeryToken()
<my-component></my-component>

<script>
  // 监听组件的自定义提交事件
  document.querySelector('my-component').addEventListener('mycomp-submit', async (event) => {
    // 获取防伪造令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
    
    try {
      const response = await fetch('/TestMyComp', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'RequestVerificationToken': token // 携带防伪造令牌
        },
        body: JSON.stringify({
          BoundCredentialsModel: {
            UserName: event.detail.username,
            Password: event.detail.password
          }
        })
      });

      const result = await response.json();
      // 这里可以处理返回结果，比如给用户弹提示
      console.log('提交成功：', result);
    } catch (err) {
      console.error('提交失败：', err);
    }
  });
</script>

后端代码几乎不用改，只需要确保OnPost返回JSON结果即可：

public class TestMyCompModel : PageModel
{
    [BindProperty]
    public Credentials BoundCredentialsModel { get; set; }

    public void OnGet() { }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
        return new JsonResult(new { 
            Success = true, 
            UserName = BoundCredentialsModel.UserName, 
            Password = BoundCredentialsModel.Password 
        });
    }
}

public class Credentials
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

这种方案的好处是页面不会刷新，用户体验更流畅，同时也省去了维护隐藏字段的麻烦。

三、总结 #

你的现有实现是完全可靠的，作为新手能想到用自定义事件+隐藏字段的方式适配Web Component，已经很棒了！如果能修改组件，优先选方案1；如果不能改组件，方案2是更优的选择。

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