如何向Razor View Component传递模型属性解决for.Model为null问题

DevOps 小满

2026-9-30

问题原因

你当前的实现仅提取了ModelExpression的Model属性值，未保留完整的绑定元数据，同时如果调用组件时参数名和RegisterModel的属性名不匹配、或者上层视图返回的RegisterModel实例未给username赋值，都会出现for.Model为null的问题。

完整修改方案

1. 修改InputComponentModel类

将原来的object model属性替换为完整的ModelExpression类型，保留绑定的所有元数据和值：

public class InputComponentModel
{
    public ComponentType Type { get; set; }
    public string FieldId { get; set; }
    public ModelExpression For { get; set; }
}

2. 修改TextInput组件的Invoke方法

直接将接收到的for参数赋值给模型，不要仅提取for.Model：

public class TextInput
{
    public TextInput(ComponentType type)
    {
        ComponentType = type;
    }

    private ComponentType ComponentType { get;}

    public IViewComponentResult Invoke(string id, ModelExpression for)
    {
        InputComponentModel model = new()
        {
            FieldId = id,
            Type = ComponentType,
            For = for
        };
        return View(model);
    }
}

3. 修改组件的Razor视图

直接用For属性绑定标签助手，自动解析元数据和值：

@using MyLibrary.Models
@model InputComponentModel

<label asp-for="@Model.For" class="control-label"></label>
<input asp-for="@Model.For" class="form-control" type="@Model.Type" id="@Model.FieldId" />
<span asp-validation-for="@Model.For" class="text-danger"></span>

4. 修正组件调用写法

确保for参数的取值和RegisterModel的属性名完全匹配（注意大小写，C#类属性默认推荐帕斯卡命名）：
假设你的RegisterModel定义如下：

public class RegisterModel
{
    public string Username { get; set; }
    // 其他属性
}

调用组件的写法改为：

@model Web.Models.RegisterModel

<vc:text-input id="username" for="Username"></vc:text-input>

额外检查项

如果是新增表单的GET请求，Username属性默认值为null属于正常现象，提交表单后框架会自动填充对应值
如果是编辑场景，确保控制器返回视图时已经给RegisterModel的Username属性赋值：

public IActionResult Edit()
{
    var model = new RegisterModel { Username = "已存在的用户名" };
    return View(model);
}

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