MicrosoftTeams-image

Telerik REPL for ASP.NET Core

Getting started

Writing code

  • You can write razor code that contains HTML, C#, JS and CSS in the default .cshtml file.
  • You can run the code by clicking on the Run icon in the header or pressing CTRL + S on your keyboard. 
  • Your code will be redered and come to live in the second pane of the REPL.

Save and share your snippets

icn1Click the
Share icon

icn1

icn1Copy the URL of the snippet and paste it wherever you need

icn1

icn1Or choose a social network from the list to share the snippet directly there

icn1

icn1Share code snippets from Visual Studio & Visual Studio Code

icn1

Add static assets

  • As you are editing a .cshtml file, you can define your own script and style tags that reference static assets.

Using Telerik UI for ASP.NET Core components

  • Use Telerik UI for ASP.NET Core components inside the REPL. Additionally, you can style and configure the appearance of the components with a predefined set of 20+ themes and swatches.         

Editor features

We are using Microsoft's Monaco Editor (https://microsoft.github.io/monaco-editor/). It is the code editor that powers VS Code. You can access its Command Palette by focusing on the editor and clicking the F1 button on your keyboard. You will see the list of all available commands. You can use the commands' shortcuts too.

Some of the most commonly used commands are:

  • Ctrl+K Ctrl+C comments out the current line 
  • Ctrl+Shift+K deletes a line 
  • Command Palette -> Editor Font Zoom In/Out changes the font size 

If you want to dig a little deeper into Monaco Editor's features, you can do so here (https://code.visualstudio.com/docs/editor/editingevolved). 

Snippets

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 Only ASP.NET Core Component Library You Will Ever Need

Telerik UI for ASP.NET Core helps you deliver high-quality projects faster while enhancing and growing your business. Benefit from over а 110+ full-featured ASP.NET Core UI components and tons of customization options to ensure high-performance and sleek UI that covers any app scenario. Hit the ground running with our extensive demos, documentation, online technical training and outstanding support.

group_43313