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>

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