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>

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>

Razor local methods

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

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

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>

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"))
    )
)

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"))
    )
)

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()
    )
)

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>
@(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"))
)

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"
    };
}

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" }
    };
}

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"))
)

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"))
    )
)
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