Binding to a Core Razor Page - Here's a simple Sample

[John]

Hi,

Just putting this here in case anybody else might like to use the new Razor Pages:

Here is how I bound to a PageModel (ie no Action or Controller)

 

So the PageModel simply has a public property

public List<MyOjectToBindTo> {get;set;}

 

@(Html.Kendo().DropDownList()
                  .Name("size")
                  .BindTo(new List<MyOjectToBindTo>(Model.MyOjectToBindTo))
                  .DataValueField("Id")
                  .DataTextField("Name")
                  .HtmlAttributes(new { style = "width: 100%" })
    )

 

[Dimitar]

Hello John,

Thank you for sharing this example with the rest of the community.

Regards,
Dimitar
Progress Telerik

[Gilles]

Hi, is it possible to have a RazorPage application sample ?

Actually, all is fine if I use Views and Controllers but with Razor page, I'm not able to have controls run correcty.

[Dimitar]

Hello Gilles,

Attached you will find a small sample demonstrating how to bind the items of the DropDownList widget to a property from the PageModel. The property value is populated on the initial load of the page:

public class IndexModel : Microsoft.AspNetCore.Mvc.RazorPages.PageModel
{
  public List<SelectListItem> Data { get; set; } = new List<SelectListItem>();

  public void OnGet()
  {
    for (int i = 1; i <= 100; i++)
    {
      Data.Add(new SelectListItem() { Text = "product" + i, Value = i.ToString() });
    }
  }
}

And it is later referenced in the DropDownList initialization:

@page
@model PageModel.Pages.IndexModel

@(Html.Kendo().DropDownList()
.Name("fabric")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.Data)
)

Regards,
Dimitar
Progress Telerik

[Joe]

Hello;

Do you have a link to anything showing how the kendo menu works with Razor Pages?

I cannot get it to work.

Also, is there plans to update or add another Telerik Template to VS for Razor page support?

 

Thank you,

 

Joe

[Ianko]

Hi Joe,

The Menu wrapper is to be used the same as with the plain Core demos here: https://demos.telerik.com/aspnet-core/menu. You should use the same Razor syntax in Razor Pages. 

If, however, you have some specific issues with the case I suggest you to open a new ticket or forum thread with more details about the difficulties you encounter and eventually provide a project which can be used to examine the problems you encounter. 

As for templates utilizing Razor Pages, I am not aware of any plans to create such. You can suggest that idea here: http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback. 

Regards,
Ianko
Progress Telerik

[Igor]

This is a very simple example.

How about creating new items, updating/deleting existing items. lets say, in the grid?

Thanks

[Ianko]

Hello Igor,

You can check out the Grid examples for that: https://demos.telerik.com/aspnet-core/grid/editing. 

Regards,
Ianko
Progress Telerik

[Volker]

Hello


I have a WebCoreApplication and try to buid a DropDownList


@(Html.Kendo().DropDownList()
.Name("dropdownlist")
.DataTextField("Text")
.DataValueField("Value")
.Filter("startswith")
.BindTo(new List<SelectListItem>()
{
new SelectListItem() {
Text = "Item1", Value = "1"
},
new SelectListItem() {
Text = "Item2", Value = "2"
},
new SelectListItem() {
Text = "Item3", Value = "3"
}
})
.Events(e =>
{
e.Change("onChange").Select("onSelect").Open("onOpen").Close("onClose").DataBound("onDataBound").Filtering("onFiltering");
})
.HtmlAttributes(new { style = "width: 100%" })
)


It is a simple example from the homepage.


The problem is, that there are no entries to see in the DroptDownList.


What ist wrong?

[Volker]

When I build the DropDownList in an original Telerik App it is gray and can not work.

[Volker]

The problem is

unselectable=on

see the picture

 

[Dimitar]

Hello Volker,

I am attaching an ASP.NET Core solution, where the exact configuration for initializing the DropDownList is used. With it, the component is successfully bound to the data and displays it correctly. I would suggest using the example as a starting point and configure it further to match the project requirements.

Regards,
Dimitar
Progress Telerik

[Bill]

Do you have any examples of using AutoComplete in a ViewComponent for a Razor Pages app?

I'm trying to put an AutoComplete in the layout page, but I can't figure out how to wire up the Read event so that it calls the class attached to the ViewComponent.

[Dimitar]

Hello Bill,

There is an available example with ViewComponents and the DropDownList attached in the following forum thread:

• https://www.telerik.com/forums/telerik-controls-inside-asynchronous-view-components

Also, in the above thread, you could find additional information regarding the binding. Generally, a View Component method is not reachable directly as an HTTP endpoint and does not handle requests. This is described in greater details in the following Microsoft Docs Article:

• https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-3.0

Taking the above into consideration, in case you would like to bind a Telerik UI Component to a remote service in this scenario, this could be achieved by executing an $.ajax request to retrieve the data and then use the setDataSource() method to populate it.

Regards,
Dimitar
Progress Telerik

[Chris]

HI

Is there have a full example for Razor Pages (similar to MVC Example) ?

C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R3 2019\wrappers\aspnetcore\Examples\AspNet.Core\VS2019\Kendo.Mvc.Examples\

Developers want to know how to use Telerik Control in Razor Pages Application.

Best regards

Chris

[Dimitar]

Hello Chris,

You can find examples for using Telerik UI for ASP.NET Core with Razor Pages in the following GitHub Repository:

• https://github.com/telerik/ui-for-aspnet-core-examples

Also, you can scaffold a ready to use application with the Telerik Grid in Razor Pages through the Telerik UI Create New Project Wizard:

• https://docs.telerik.com/aspnet-core/installation/vs-integration/new-project-wizard

Regards,
Dimitar
Progress Telerik