问题描述
我正在尝试在表单中使用 blazorise RichTextEdit 组件。我似乎无法将初始值设置为提供的模型属性的值。
<Form Model="@company">
<Validations @ref="validations" Mode="ValidationMode.Auto" ValidateOnLoad="false" Model="@model">
<Validation>
<Field>
<FieldLabel>Company Website</FieldLabel>
<TextEdit Role="TextRole.Url" @bind-Text="@model.Property1" Placeholder="Enter your website" Size="Size.Large">
<Feedback>
<ValidationError />
</Feedback>
</TextEdit>
</Field>
</Validation>
<Field>
<FieldLabel>About</FieldLabel>
<RichTextEdit @ref="richTextEditRef"
ContentChanged="@OnContentChanged"
Theme="RichTextEditTheme.SNow"
PlaceHolder="Tell us about the company..."
SubmitOnEnter="false"
ToolbarPosition="Placement.Top">
<Editor></Editor>
<Toolbar>
<RichTextEditToolbarGroup>
<RichTextEditToolbarButton Action="RichTextEditaction.Bold" />
<RichTextEditToolbarButton Action="RichTextEditaction.Italic" />
<RichTextEditToolbarSelect Action="RichTextEditaction.Size">
<RichTextEditToolbarSelectItem Value="small" />
<RichTextEditToolbarSelectItem Selected="true" />
<RichTextEditToolbarSelectItem Value="large" />
<RichTextEditToolbarSelectItem Value="huge">Very Big</RichTextEditToolbarSelectItem>
</RichTextEditToolbarSelect>
<RichTextEditToolbarButton Action="RichTextEditaction.List" Value="ordered" />
<RichTextEditToolbarButton Action="RichTextEditaction.List" Value="bullet" />
</RichTextEditToolbarGroup>
<!-- Custom toolbar content -->
<RichTextEditToolbarGroup Float="Float.Right">
</RichTextEditToolbarGroup>
</Toolbar>
</RichTextEdit>
</Field>
</Validations>
<Button Color="Color.Success" Clicked="@Submit">Save</Button>
</Form>
@code {
private Model model { get; set; } = new Model();
private RichTextEdit richTextEditRef;
Validations validations;
protected override async Task OnInitializedAsync()
{
model = await modelService.GetByAccount();
//await richTextEditRef.SetHtmlAsync(model.Property2);
}
public async Task OnContentChanged()
{
model.Property2 = await richTextEditRef.GetHtmlAsync();
}
async void Submit()
{
Console.WriteLine("Form Submitted");
var result = await modelService.Post(model);
}
}
modelService 只返回一条记录,id 成功。我可以使用 richTextEditRef.GetHtmlAsync()
检索输入值,但是我找不到使用
richTextEditRef.SetHtmlAsync(company.About)
方法来初始设置 RichTextEdit 的值。
我尝试在调用 modelService 之后调用它,如注释代码中所示,但这是不稳定的,因为它通常在服务返回记录之前执行。我也尝试过覆盖 OnAfterRenderAsync
方法,但我不确定我这样做是否正确。
在这上面浪费了太多时间,请帮忙!?
解决方法
经过多次试验和错误,我得到了这个工作。希望其他人能从中受益:
在编辑器组件中添加:
<Editor>@((MarkupString)model.Property2)</Editor>
在 @code
中添加一个新属性:
public string newRichTextValue { get; set; }
在 OnContentChanged()
方法中设置新属性:
newRichTextValue = await richTextEditRef.GetHtmlAsync();
在 Submit()
方法中将 model.Property2
值设置为新属性:
model.Property2 = newRichTextValue;