Blazor Server拆分Razor页面UI与代码类时遇错误求助

出现这两个错误的核心原因是Razor页面的编译类与后台逻辑类没有正确关联，具体问题和修复步骤如下：

问题根源 #

1. 类名不匹配：Blazor会将Search.razor编译为名为Search的partial类，而你的后台逻辑类名为SearchRequest，两者无法合并，导致Razor页面无法访问后台类的成员。
2. 未正确关联基类：Blazor组件必须继承ComponentBase，即便你继承了但类名不匹配，Razor页面也无法识别后台类的成员。
3. 类型不统一：你的RadzenTemplateForm指定TItem="SearchRequestModel"，但绑定的model是SearchModel，类型不一致会引发潜在的表单绑定问题。

修复步骤 #

1. 统一类名并继承ComponentBase #

将后台逻辑类的名称改为和Razor页面文件名一致（即Search），同时继承ComponentBase并标记为partial类：

namespace MyApp.Pages
{
    public partial class Search : ComponentBase
    {
        public SearchModel model { get; set; } = new SearchModel();

        void OnSubmit(SearchModel searchModel)
        {
            // 编写提交逻辑
        }
    }
}

2. 修正Razor页面的类型匹配与绑定 #

将RadzenTemplateForm的TItem改为和model一致的SearchModel，同时给输入框加上双向绑定（否则表单无法收集用户输入）：

@page "/search"
@using Models

<RadzenTemplateForm TItem="SearchModel" Data=@model Submit=@OnSubmit>
    <div class="row px-3">
        <div class="col-12 col-lg-6 p-3">
            <RadzenCard>

                <div class="row">
                    <div class="col-md-4 align-items-center d-flex">
                        <RadzenLabel Text="Cardholder" />
                    </div>
                    <div class="col-md-8">
                        <RadzenTextBox style="width: 100%;" Name="CardHolder" @bind-Value=@model.CardHolder />
                    </div>
                </div>

            </RadzenCard>
        </div>
    </div>
</RadzenTemplateForm>

3. 确保命名空间一致 #

后台逻辑类的命名空间MyApp.Pages必须和Razor页面的命名空间一致（Blazor默认根据文件目录生成命名空间，Pages目录下的页面默认就是MyApp.Pages），否则partial类无法合并。

额外说明 #

如果坚持要使用SearchRequest作为后台类名，也可以在Razor页面顶部添加@inherits SearchRequest，但不推荐这种做法——保持类名和文件名一致能让代码结构更清晰，避免混淆。

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