如何在剃须刀中将InputText绑定到模型

时间:2020-01-12 16:56:57

标签: c# asp.net-core razor blazor

我有一个名为Patient的模型类,一个处理与Patient相关的服务的类以及一个接口。除接口外,所有其他都是公共的,并且都在单独的文件中。当我尝试将Razor页面上的InputText绑定到患者属性时,ide找不到它们。

剃须刀页面:

@using BlazorApp.Data;

<EditForm Model="@patient"> 
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">first name: </label>
        <InputText class="form-control col-3" @bind-Value="patient.Name"/>
        placeholder="first name" />
    </div>
</EditForm>

@code {
public Patient patient {get;set;}
protected override void OnInitialized()
{
    patient =  new Patient();
}

}

模型类:

public class Patient
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string LastName { get; set; }
    public DateTime DateOfBirth { get; set; }
    public Patient(){}

    public Patient(int id, string name, string lname, DateTime date)
    {
        ID = id;
        Name = name;
        LastName = lname;
        DateOfBirth = date;
    }
}

1 个答案:

答案 0 :(得分:0)

当我尝试将Razor页面上的InputText绑定到患者属性时,ide找不到它们。

命名空间非常耀眼,是的,它们也使用指令添加。

我根据您的描述和代码进行了测试,这对我来说很有效。请重新检查Patient类的名称空间,并确保已通过@using指令导入它。

患者类别

namespace blazor 
{
    public class Patient
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime DateOfBirth { get; set; }
        public Patient() { }

        public Patient(int id, string name, string lname, DateTime date)
        {
            ID = id;
            Name = name;
            LastName = lname;
            DateOfBirth = date;
        }
    }
}

在_Imports.razor

@using blazor

在组件中

<EditForm Model="@patient">
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">first name: </label>
        <InputText class="form-control col-3" @bind-Value="patient.Name" placeholder="first name" />
    </div>
</EditForm>

@code{
    public Patient patient {get;set;}

    protected override void OnInitialized()
    {
        patient =  new Patient() {  Name = "test user"};
    }
}

测试结果

enter image description here