ASP.Net Core - How to send message to view from controller without refreshing?

Question

I'd like to show a custom success/error message from controller without refreshing.
I've tried this but it looks like it needs a page refresh to show the data:

The view:

@if (ViewBag.Message != null)
{
   <span>@ViewBag.Message</span>
}

Controller:

if (CurrentOrgLevel < MaxOrgLevel)
        {
            if (ModelState.IsValid && CurrentOrgLevel < MaxOrgLevel)
            {
                orgStructure.Insert(org, ModelState);
            }
        }
        else
        {
            ViewBag.Message = "Error: Max level reached.";
        }

This is triggered from a telerik control treelist add child event: https://demos.telerik.com/aspnet-core/treelist/editing

Treelist:

@(Html.Kendo().TreeList<OCIT.Data.Models.OrgStructure>()
            .Name("treelist")
            .Toolbar(toolbar => toolbar.Create().Text("Add " + sessionUser.Level1Name))
            .Columns(columns =>
            {
                columns.Add().Field(e => e.LevelName).Width(40);
                columns.Add().Field(e => e.Name).Width(100);
                columns.Add().Field(e => e.Level).Width(26);
                columns.Add().Width(100).Command(c =>
                {
                    c.CreateChild().Text("Add child");
                    c.Edit();
                    c.Destroy();
                })
                        .HtmlAttributes(new {style = "text-align: center;"});
            })
            .Editable()
            .Sortable()
            .Filterable()
            .DataSource(dataSource => dataSource
                .Create(create => create.Action("Create", "OrgStructure"))
                .Read(read => read.Action("All", "OrgStructure").Data("treelistParam"))
                .Update(update => update.Action("Update", "OrgStructure"))
                .Destroy(delete => delete.Action("Destroy", "OrgStructure"))
                .ServerOperation(false)
                .Model(m =>
                {
                    m.Id(f => f.NodeId);
                    m.ParentId(f => f.ParentNodeId).DefaultValue(sessionUser.DepartmentId);
                    m.Field(f => f.FiscalYear).DefaultValue(sessionUser.CurrentFiscalYearId);
                    m.Field(f => f.CreatedDateTime);
                    m.Field(f => f.DepartmentCode);
                    m.Field(f => f.Acronym);
                    m.Field(f => f.DepartmentId).DefaultValue(sessionUser.DepartmentId);
                    m.Field(f => f.RequiresChildSelect);
                    m.Expanded(false);
                    m.Field(f => f.Name);
                    m.Field(f => f.Level).Editable(false);
                    m.Field(f => f.LevelName).Editable(false);
                    m.Field(f => f.ParentNodeId);
                })

            )
            .Height(505)
.Events(events =>
{
    events.FilterMenuOpen("onFilterMenuOpen");
    events.DataBound("dataBound");
    events.DataBinding("dataBinding");
    events.Save("onSave");
    events.Remove("saveExpandState");
    events.Cancel("onCancel");
})
)

When add child is clicked, it triggers the onSave javascript function:

function onSave() {

}

I believe we'll need Ajax, but how to implement it in this case where the treelist control already the handles the ajax post, but we'll need a custom postback?

Answer 1

I needed to show an error without reloading, the treelist control has an Error handler in datasource .Events(ev=>ev.Error("onError")):

.DataSource(dataSource => dataSource
     .Create(create => create.Action("Create", "OrgStructure"))
     .Read(read => read.Action("All", "OrgStructure").Data("treelistParam"))
     .Update(update => update.Action("Update", "OrgStructure"))
     .Destroy(delete => delete.Action("Destroy", "OrgStructure"))
   .Events(ev=>ev.Error("onError"))
     .ServerOperation(false)
     .Model(m =>
     {
         m.Id(f => f.NodeId);
         m.ParentId(f => f.ParentNodeId).DefaultValue(sessionUser.DepartmentId);
         m.Field(f => f.FiscalYear).DefaultValue(sessionUser.CurrentFiscalYearId);
         m.Field(f => f.CreatedDateTime);
         m.Field(f => f.DepartmentCode);
         m.Field(f => f.Acronym);
         m.Field(f => f.DepartmentId).DefaultValue(sessionUser.DepartmentId);
         m.Field(f => f.RequiresChildSelect);
         m.Expanded(false);
         m.Field(f => f.Name);
         m.Field(f => f.Level).Editable(false);
         m.Field(f => f.LevelName).Editable(false);
         m.Field(f => f.ParentNodeId);
     })

 )