HTML Editor as a reusable ViewComponent

[sayitfast]

I'm trying to make the HTML editor into a reusable component that I can add to a page inside the CSHML and set the model/bind to a property at that point. 

I cannot seem to pass the model as needed to the VeiwComponent. 

If anyone has been able to accomplish this I would really appreciate some guidance.

asp.net core razor pages web site.

[Alexander]

Hi,

From a personal standpoint, I understand the importance this may have for you and indeed this seems to be a rather feasible approach that would remove further code redundancy down the line.

In this regard please allow me to elaborate on such an approach, particularly for your scenario:

• Create an Editor Model that will hold the to-be-depicted editor value:
  

public class EditorModel
{
    public string Value { get; set; }
}

• Within a specified page model bind the previously declared model by using the [BindProperty] attribute:
  

public class IndexModel : PageModel
{
    [BindProperty]
    public static EditorModel EditorModel { get; set; }

    public void OnGet()
    {
        EditorModel = new EditorModel() { Value = "Some Value" };
    }
}

• Create a ViewComponent which will process the EditorModel:
  

public class EditorViewComponent : ViewComponent
{
    private readonly IHttpContextAccessor _httpContextAccessor;
    public EditorViewComponent(IHttpContextAccessor httpContextAccessor)
    {
        this._httpContextAccessor = httpContextAccessor;
    }

    public async Task<IViewComponentResult> InvokeAsync(EditorModel editorModel)
    {
        return View("default", editorModel);
    }

}

• Create a corresponding ViewComponent that will hold the Editor component and will process the EditoModel by using the <WidgetName>ForHelper:
  

@model EditorModel

@using TelerikAspNetCoreApp312.Data
@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

@(Html.Kendo().EditorFor(m => m.Value)
    .HtmlAttributes(new { style = "width: 100%; height:840px" })
    .Tools(tools => tools
          .Clear()
          .Bold().Italic().Underline()
          .JustifyLeft().JustifyCenter().JustifyRight()
          .InsertUnorderedList().InsertOrderedList()
          .Outdent().Indent()
          .CreateLink().Unlink()
          .InsertImage()
          .TableEditing()
          .FontName()
          .FontSize()
          .ForeColor().BackColor()
    )
)

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }
</script>

This will then allow you to invoke from an external page the ViewComponent whilst passing the EditorModel:

@page
@model IndexModel


@await Component.InvokeAsync("Editor", IndexModel.EditorModel)

Which will then produce the following visual incarnation:

For your convenience, I am also attaching a runnable sample for you to review that tackles the aforementioned in a more live-action scenario.

I hope this helps during your endeavors.

Kind Regards,
Alexander
Progress Telerik

[sayitfast]

Thank you!