Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blazor Text Editor not able to bind value on form (create/edit)

I am using Blazor Text Editor from source below.

Source - https://github.com/Blazored/TextEditor

I successfully integrated it with my create and edit form, however not able to bind-Value to it. Because of this my Data Annotation Validation is failing.

Internally blazor is using Quill Editor, I am not looking for javascript option.

Sample Code of editor

<BlazoredTextEditor  @ref="@QuillNative" Placeholder="Enter non HTML format like centering...">
      <ToolbarContent>Some editor stuff here</ToolbarContent>
<BlazoredTextEditor

Could anyone please help me. How to bind-Value or correct approach without javascript.

like image 310
ZKS Avatar asked Dec 17 '25 09:12

ZKS


1 Answers

Vencovsky - thanks of you prompt response, I was already aware of these methods however was curious to know if anybody had tried different option.

Below is what I did..

FORM -- This is common form for create & edit. OnValidSubmit will call respective Create/Edit method.

<EditForm Model="Entity" class="contact-form" OnValidSubmit="OnValidSubmit">
//My form fields here
//Commented the validation from that particular field
@*<ValidationMessage For="@(() =>Entity.field)" />*@

<div class="col-sm-1">
    <button type="submit" @onclick="***getEditorData***" class="btn" 
    style="border:2px solid #555555;"><span>Save</span></button>
 </div>
</EditForm>

METHOD -- getEditorData() gets fired before OnValidSubmit()

public async void getEditorData()
{
  Enity.field = await this.QuillNative.GetHTML();
}

So in my final Entity on OnValidSubmit() I receive all fields along with editor data..

Hope this help if anyone is trying to do so..

like image 95
ZKS Avatar answered Dec 21 '25 04:12

ZKS



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!