ImageBrowser and FileBrowser in razor page

[Renjith]

How do we call Kendo UI ajax calls like read,update etc.. in razor pages. The demo is for MVC. Appreciate if you can provide one with an example.

[Dimitar]

Hello Renjith,

In case you would like to use the built-in sever implementation of the Editor, a new Controller has to be defined that inherits from the built-in EditorImageBrowserController in the Kendo.Mvc.dll. This scenario is demonstrated on the following Demo, where the code for the controller can be inspected:

• Editor ImageBrowser for ASP.NET Core.

Alternatively, if the above does not suit the project requirements, you could provide you own implementation by configuring the page handlers as follows:

@(Html.Kendo().Editor()
  .Name("editor")
  .HtmlAttributes(new { style = "height:440px" })
  .ImageBrowser(imageBrowser => imageBrowser
  .Image("~/Content/UserFiles/Images/{0}")
    .Transport(t => {
      t.Read(r => r.Url("/Index?handler=read"));
      t.Create(c => c.Url("/Index?handler=create"));
      t.Destroy(d => d.Url("/Index?handler=destroy"));
      t.ThumbnailUrl("/Index?handler=thumbnail");
    })
  )
)

Regards,
Dimitar
Progress Telerik

[Joel]

Hi Dimiatr,

   Can the ImageBrowser run as a standalone widget without the Editor in ASP.Net Core?

   There is a link here Using Image Browser Without Editor but it is for ASP.Net MVC.

p/s: i am very new in ASP.Net Core. So do pardon me if i need things to be more explicit.

[Joel]

Let me answer my own question.

Here is what i have done & it is working.

<div>
                    @(Html.Kendo().PanelBar()
                        .Name("panelbar")
                        .ExpandMode(PanelBarExpandMode.Multiple)
                        .Items(panelbar =>
                        {
                            panelbar.Add().Text("Image Browser")
                                .Expanded(false)
                                .Content(@<div id="imgBrowser"/>);
                        })
                    )
</div>

<script>
   $("#imgBrowser").kendoImageBrowser({
        transport: {
            type: "imagebrowser-aspnetmvc",
            read: "/ImageBrowser/Read",
            destroy: {
                url: "/ImageBrowser/Destroy",
                type: "POST"
            },
            create: {
                url: "/ImageBrowser/Create",
                type: "POST"
            },
            imageUrl: "@Url.Content("~/shared/UserFiles/Images/{0}")",
            thumbnailUrl: "/ImageBrowser/Thumbnail",
            uploadUrl: "/ImageBrowser/Upload",
        },
        change: insertImagePath
    });
</script>