WinForms集成Blazor登录系统报错求助：InvalidOperationException

核心问题原因 #

报错InvalidOperationException: Error: No element is currently associated with component 1的主要诱因：

• RootComponent注册时指定了错误的组件类型（你注册了Counter但实际需要加载登录组件）
• RootComponent的DOM选择器与HostPage中的元素不匹配，且组件初始化时机过早

具体修复步骤 #

1. 修正RootComponent的组件注册 #

将Form1中的RootComponent注册改为你的登录组件，并确保选择器匹配HostPage的DOM元素：

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace Login_Forms
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            var services = new ServiceCollection();
            services.AddWindowsFormsBlazorWebView();
            
            blazorWebView1.HostPage = "wwwroot\\index.html";
            blazorWebView1.Services = services.BuildServiceProvider();
            
            // 替换为你的登录组件，选择器对应index.html中的元素ID
            blazorWebView1.RootComponents.Add<Login>("#app");
        }
    }
}

2. 检查并修正HostPage（wwwroot/index.html） #

确保index.html中存在与RootComponent选择器匹配的DOM元素，标准结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login System</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="Login_Forms.styles.css" rel="stylesheet" />
</head>
<body>
    <!-- 该div的ID需与RootComponent选择器一致 -->
    <div id="app"></div>

    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

3. 修复Razor组件的语法错误 #

登录组件存在两处语法问题，修正后代码如下：

@page "/login"
@using Login_Forms.Models
@using Microsoft.AspNetCore.Components.Forms

<h3>Login</h3>

<EditForm Model="@loginModel" OnValidSubmit="@Login">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label for="Username">Username:</label>
        <InputText id="Username" @bind-Value="@loginModel.Name" />
    </div>

    <div>
        <label for="Password">Password:</label>
        <InputText id="Password" @bind-Value="@loginModel.PassWord"/>
    </div>

    <!-- 补全标签闭合 -->
    <input type="submit" id="Login" />
</EditForm>

<!-- 合并重复的@code块 -->
@code {
    private Usuario loginModel = new Usuario(1, "Tiago", "12345");

    private void Login()
    {
        bool isAuthenticated = Authenticate(loginModel.Name, loginModel.PassWord);

        if (isAuthenticated)
        {
            Console.WriteLine("Login bem-sucedido!");
        }
        else
        {
            Console.WriteLine("Falha no login. Credenciais inválidas.");
        }
    }

    private bool Authenticate(string username, string password)
    {
        return username == "admin" && password == "admin";
    }
}

4. 验证项目设置 #

• 确保wwwroot/index.html的属性设置为复制到输出目录：如果较新则复制
• 确认已正确安装Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet包

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