Asp.Net托管Blazor WASM动态自定义元素实现及绑定异常排查

核心错误原因 #

你遇到的ValueExpression缺失错误，根源在于MarkupString中的Blazor指令不会被编译解析。当你把<custom-input-text @bind-value="$field1"...>放进MarkupString后，Blazor只会把它当作普通HTML输出，不会处理@bind-value指令，自然无法自动生成ValueExpression参数，导致组件报错。

另外，bind-Value自动变为小写是正常现象——HTML属性不区分大小写，Blazor自定义元素会自动将组件的PascalCase参数（如Value）映射为kebab-case的HTML属性（如value），所以@bind-value的写法是正确的，但前提是Blazor能解析这个绑定指令。

解决方案 #

方案1：放弃MarkupString，改用动态组件渲染交互内容 #

如果你的库生成的HTML中包含需要Blazor交互的控件，不能直接用MarkupString输出，而是要解析HTML结构，将自定义元素替换为Blazor的DynamicComponent渲染：

1. 先注册自定义元素对应的Blazor组件：

// Program.cs中注册自定义组件
builder.RootComponents.RegisterCustomElement<CustomInputText>("custom-input-text");

2. 解析HTML片段，识别出<custom-input-text>标签，提取属性（如name），然后用DynamicComponent渲染：

@foreach (var element in ParsedInteractiveElements)
{
    if (element.TagName == "custom-input-text")
    {
        <DynamicComponent Type="typeof(CustomInputText)" 
                          Parameters="@element.Parameters" />
    }
    else
    {
        <!-- 静态内容用MarkupString输出 -->
        @((MarkupString)element.StaticContent)
    }
}

方案2：用JavaScript手动处理绑定（适合保留MarkupString的场景） #

如果必须保留MarkupString输出，可通过JS桥接实现自定义元素与Blazor字段的双向绑定：

1. 自定义Blazor组件CustomInputText.razor，添加自定义事件触发值变化：

<input type="text" value="@Value" @oninput="HandleInput" />

@code {
    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }

    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    [Parameter]
    public string? Name { get; set; }

    private async Task HandleInput(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString();
        await ValueChanged.InvokeAsync(newValue);
        // 触发自定义事件通知外部
        await JSRuntime.InvokeVoidAsync("triggerElementEvent", Name, "value-updated", newValue);
    }
}

2. 在页面中，初始化时将Blazor字段值同步到自定义元素，同时监听自定义事件更新字段：

<div>
    @((MarkupString)document)
</div>

@code {
    private string? field1;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 初始化设置值
            await JSRuntime.InvokeVoidAsync("setCustomElementValue", "field1", field1);
            // 监听值变化事件
            await JSRuntime.InvokeVoidAsync("listenCustomElementEvent", "field1", DotNetObjectReference.Create(this), "UpdateField1");
        }
    }

    [JSInvokable]
    public void UpdateField1(string? value)
    {
        field1 = value;
        StateHasChanged();
    }
}

3. 对应的JavaScript代码（可放在wwwroot/js/interop.js）：

window.setCustomElementValue = (name, value) => {
    const element = document.querySelector(`custom-input-text[name="${name}"]`);
    if (element) element.value = value;
};

window.listenCustomElementEvent = (name, dotNetRef, methodName) => {
    const element = document.querySelector(`custom-input-text[name="${name}"]`);
    if (element) {
        element.addEventListener('value-updated', (e) => {
            dotNetRef.invokeMethodAsync(methodName, e.detail);
        });
    }
};

window.triggerElementEvent = (name, eventName, detail) => {
    const element = document.querySelector(`custom-input-text[name="${name}"]`);
    if (element) {
        element.dispatchEvent(new CustomEvent(eventName, { detail }));
    }
};

方案3：调整自定义组件，手动传递ValueExpression（仅限非MarkupString场景） #

如果是直接在Blazor组件中使用自定义元素而非MarkupString，可确保组件正确接收ValueExpression参数，绑定即可正常工作：

<!-- 直接在组件中使用，而非MarkupString -->
<custom-input-text @bind-Value="field1" Name="field1"></custom-input-text>

对应的自定义组件必须包含ValueExpression参数：

<input type="text" @bind="Value" />

@code {
    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<string?>>? ValueExpression { get; set; }
}

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