MicrosoftTeams-image
Progress Telerik REPL for ASP.NET Core

Predefined Code Snippets

Start Fast with Pre-Built Examples

Code snippets make it easier to enter repetitive code patterns. Leverage the predefined ASP.NET Core snippets and examples for a fast start with Telerik REPL. Quickly add and configure a selection of Telerik UI for ASP.NET Core components in the REPL UI.

Button

Simple example showing simple HTML button:

<button>Hello World</button>
Run in Telerik REPL

Razor code block

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>
Run in Telerik REPL

Razor local methods

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}
Run in Telerik REPL

Razor @functions directive

@using Microsoft.AspNetCore.Html

@functions {

    public class Pet {
        public string Name { get; set; }        
    }
    
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times,
        Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

@{
    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>
Run in Telerik REPL

Telerik UI for ASP.Net Core Grid

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.ProductID))
        .Create(update => update.Action("EditingInline_Create", "Home"))
        .Read(read => read.Action("EditingInline_Read", "Home"))
        .Update(update => update.Action("EditingInline_Update", "Home"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Home"))
    )
)
Run in Telerik REPL

Data Grid and Form integrated into a Wizard

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(110);
        columns.Bound(e => e.LastName).Width(110);
        columns.Bound(e => e.Country).Width(110);
    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:350px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(7)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
    )
)
Run in Telerik REPL

Responsive HTML Editor Component

@(Html.Kendo().Editor()
    .Name("editor")
    .HtmlAttributes(new { style = "width: 100%; height:300px"})
    .Tools(tools => tools
        .Clear()
        .Bold().Italic().Underline().Strikethrough()
        .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
        .InsertUnorderedList().InsertOrderedList().InsertUpperRomanList().InsertLowerRomanList()
        .Outdent().Indent()
        .CreateLink().Unlink()
        .InsertImage()
        .InsertFile()
        .SubScript()
        .SuperScript()
        .TableEditing()
        .ViewHtml()
        .Formatting()
        .CleanFormatting()
        .FormatPainter()
        .FontName()
        .FontSize()
        .ForeColor().BackColor()
        .Print()
    )
)
Run in Telerik REPL

TagHelper Grids with a shared DataSource

@addTagHelper *, Kendo.Mvc

<kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="10">
    <schema>
        <model id="ProductID">
            <fields>
                <field name="ProductID" type="number"></field>
                <field name="ProductName" type="string"></field>
                <field name="LastSupply" type="date"></field>
                <field name="UnitPrice" type="number"></field>
                <field name="UnitsInStock" type="number"></field>
                <field name="Discontinued" type="bool"></field>
                <field name="UnitsOnOrder" type="number"></field>
            </fields>
        </model>
    </schema>
    <transport>
        <read url="@Url.Action("TagHelper_Products_Read", "DataSource")" />
    </transport>
</kendo-datasource>
Run in Telerik REPL 
@(Html.Kendo().DropDownList()
    .Name("products")
    .HtmlAttributes(new { style = "width:100%" })
    .OptionLabel("Select product...")
    .DataTextField("ProductName")
    .DataValueField("ProductID")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("RemoteDataSource_GetProducts", "DropDownList");
        });
    })
    .Events(ev => ev.Change("onProductSelect"))
)
Run in Telerik REPL

Button & Window

@using Kendo.Mvc

@functions {

    public class UserViewModel {
        public int ID { get; set; }     
        public string Name { get; set; }   
        public string Address { get; set; }      
        public string Phone { get; set; }   
    }
}

@{
    UserViewModel user = new UserViewModel()
    {
        ID = 100,
        Name = "John Smith",
        Address = "4836 Lake Forest Drive, NY",
        Phone = "1254 125 458"
    };
}
Run in Telerik REPL

Display Model data

@functions {

    public class UserViewModel {
        public string ID { get; set; }     
        public string FirstName { get; set; }   
        public string LastName { get; set; }
        public string BackgroundColor { get; set; }         
    }
}

@{
    var attendees = new List<UserViewModel>
    {
        new UserViewModel(){ ID = "1", FirstName = "Steven", LastName = "White", BackgroundColor = "#1EBEDC" },
        new UserViewModel(){ ID = "2", FirstName = "Nancy", LastName = "King", BackgroundColor = "#1EDCA1" },
        new UserViewModel(){ ID = "3", FirstName = "Nancy", LastName = "Davolio", BackgroundColor = "#2ADC1E" },
        new UserViewModel(){ ID = "4", FirstName = "Michael", LastName = "Leverling", BackgroundColor = "#E4EA08" },
        new UserViewModel(){ ID = "5", FirstName = "Andrew", LastName = "Callahan", BackgroundColor = "#EA8608" },
        new UserViewModel(){ ID = "6", FirstName = "Michael", LastName = "Suyama", BackgroundColor = "#EF8CE4" }
    };
}
Run in Telerik REPL

Change Chart type dynamically

@(Html.Kendo().ComboBox()
    .Name("chartType")
    .DataTextField("Text")
    .DataValueField("Value")
    .SelectedIndex(0)
    .BindTo(new List<SelectListItem>() {
        new SelectListItem() {
            Text = "Column", Value = "1"
        },
        new SelectListItem() {
            Text = "Line", Value = "2"
        },
        new SelectListItem() {
            Text = "Bar", Value = "3"
        }
    })
    .Events(ev => ev.Change("onChangeType"))
)
Run in Telerik REPL

Data Grid Column ToolTip 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock)
        .ClientTemplate("<span class='units-container'>#=UnitsInStock#</span>");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.ProductID))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )
)
Run in Telerik REPL
group_43317

The Most Comprehensive ASP.NET Core Library You Can Possibly Get

Leverage the most complete ASP.NET Core UI library on the market with 110+ customizable and highly accessible components that empower you to create engaging cross-platform apps or migrate legacy apps in half the time and for half the cost. Hit the ground running with our extensive demos, documentation, online technical training and outstanding support.

group_43313