MicrosoftTeams-image

Telerik REPL for Blazor

Getting started

Writing code

  • You can write a Blazor component that contains HTML and C# code in the default __Main.razor file
  • If you want to use multiple components or C# files (models, services, code-behind, etc...), use the plus icon on top of the editor to create them.
  • When your components are ready, you can run the code by clicking on the Run icon in the header or pressing CTRL + S on your keyboard.

Install NuGet packages

icn1Click the NuGet icon on the left sidebar

icn1

icn1Search for and choose the package of your choice

icn1

icn1Select a version and click the install button

icn1

Add static asset URLs

icn1Click the documents icon
on the left sidebar

icn1

icn1Put the link of the JS or CSS file

icn1

icn1Click the add button

icn1Once a static asset is added, you can enable/disable using the switch.

icn1

Using Telerik UI for Blazor components

icon

You can use Telerik UI for Blazor components inside the REPL. Additionally, you can style and configure the Theme of the components using the dropdown placed in the third tab of the drawer. There is a set of predefined themes (Default, Material, Bootstrap) and swatches, so when you select one, the component look will be updated.

group_50625

Embed your work anywhere

icn1Once you ready with the code you want to embed, just click Share icon

icn1Choose the tab Embed

icn1Configure the options you want for your embedded snippet

icn1Choose the place you want to put the REPL iframe and paste the generated code

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

Get Compilation output

icn1Once you compile your code, you can see the compilation diagnostics in the form of warnings and errors in the Error List.

icn1Find your error precisely with the file name and line number shown in the Error List.

icn1

Editor features

We are using Microsoft’s 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

Snippets

Button

Simple example showing simple HTML button:

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

Counter

Counter demo showing how to increment a number when clicking a button:

<h1>Counter Demo</h1>

<button class="btn btn-primary" @onclick="@Increment">Increment</button>

<div>Counter: @Counter</div>

@code {
    public int Counter { get; set; }

    public void Increment()
    {
        if (Counter < 10)
        {
            Counter++;
        }
        else if (Counter < 100) 
        {
            Counter += 10;
        }
        else 
        {
            Counter += 100;
        }
    }
}
Run in Telerik REPL

An example that shows how to dynamically change the background color of an HTML element. The user can choose from different colors defined in the dropdown list:

<select @bind="@Color">
    <option value="#FFBF00">Orange</option>
    <option value="#FFFF00">Yellow</option>
    <option value="#FF0000">Red</option>
    <option value="#008000">Green</option>
    <option value="#0000FF">Blue</option>
    <option value="#800080">Purple</option>
    <option value="#000000">Black</option>
    <option value="#FFFFFF">White</option>
</select>

<div style="width: 400px; height: 200px; background-color: @Color"> 
    <h4>Choose a color to change the background color </h4>
</div>

@code {
    public string Color {get; set;} = "#FFFFFF";
}
Run in Telerik REPL

Child Component

The demo shows how to define Blazor components in a separate file. It allows you to add new components dynamically based on the given input.


Name: <input @bind="@Name"/>
Age:<input type="number" @bind="@Age"/>

<button @onclick="@AddPerson">Add Person</button>

@foreach(var person in People)
{
    <Person Name="@person.Name" Age="@person.Age"></Person>
}


@code {
    public string Name {get; set;}
    public int Age {get; set;}

    public void AddPerson()
    {
        People.Add(new PersonModel {Name = Name, Age = Age});
    }

    public List<PersonModel> People {get; set;} = new() 
    { 
        new PersonModel{ Name = "Jack", Age = 35}
    };

    public class PersonModel
    {
        public string Name {get; set;}

        public int Age {get; set;}
    }
}
Run in Telerik REPL

Events

Simple example that visualizes how to create your own custom button component and expose OnClick event: 

<ButtonComponent ButtonText="Click Me!" OnClick="@HandleOnButtonClick"/>

@Message

@code {
    public string Message {get; set;}

    public void HandleOnButtonClick()
    {
        Message = string.Format("Button was clicked at {0:HH:mm:ss} on {0:dd MMM yy}.", DateTime.Now);
    }
}
Run in Telerik REPL

Two-way binding

Shows how to enable two-way binding in Blazor: 

<ButtonComponent ButtonText="Click Me!" OnClick="@HandleOnButtonClick"/>

@Message

@code {
    public string Message {get; set;}

    public void HandleOnButtonClick()
    {
        Message = string.Format("Button was clicked at {0:HH:mm:ss} on {0:dd MMM yy}.", DateTime.Now);
    }
}
Run in Telerik REPL

Component lifecycle

The example shows all the component life-cycle in Blazor: 

<Component Param="@Count"/>

<button @onclick="@Increment"> Update Component Parameter </button>
@code {
    public int Count {get; set;}

    public void Increment()
    {
        Count++;
    }
}
Run in Telerik REPL

Simple Form

An example with a simple form: 

<h2>New Person Form</h2>

<EditForm Model="@PersonModel" OnValidSubmit="@OnSubmit">
    <div class="form-group">
        <label for="name">Name:</label>
        <InputText @bind-Value="@PersonModel.Name" class="form-control" id="name"/>
    </div>
    <div class="form-group">
        <label for="age">Age:</label>
        <InputNumber @bind-Value="@PersonModel.Age" class="form-control" id="age"/>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

<p>@FormMessage</p>

@code {
    public Person PersonModel { get; set; } = new Person();
    public string FormMessage { get; set; }
    private async Task OnSubmit()
    {   
        FormMessage = "You successfully submitted the form";
        PersonModel = new Person();
        await Task.Delay(3000);
        FormMessage = string.Empty;
    }
    
    public class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }
}
Run in Telerik REPL

Form with validation

Form with validation and different input types: 

<h2>New Ship Entry Form</h2>

<EditForm Model="@StarshipModel" OnValidSubmit="@OnSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group">
        <label for="identifier">Identifier:</label>
        <InputText @bind-Value="StarshipModel.Identifier" class="form-control" id="identifier"/>
    </div>
    <div class="form-group">
        <label for="desc">Description (optional):</label>
            <InputTextArea @bind-Value="StarshipModel.Description" class="form-control" id="desc"/>
    </div>
    <div class="form-group">
        <label for="classification">Primary Classification:</label>
        <InputSelect @bind-Value="StarshipModel.Classification" class="form-control" id="classification">
            <option value="">Select classification ...</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
            <option value="Defense">Defense</option>
        </InputSelect>
    </div>
    <div class="form-group">
        <label for="accommodation">Maximum Accommodation:</label>
        <InputNumber @bind-Value="StarshipModel.MaximumAccommodation" class="form-control" id="accommodation"/>
    </div>
    <div class="form-group">
        <label for="is-approved">Engineering Approval:</label>
        <InputCheckbox @bind-Value="StarshipModel.IsValidatedDesign" class="form-control" id="is-approved"/>
    </div>
    <div class="form-group">
        <label for="production-date">Production Date:</label>
        <InputDate @bind-Value="StarshipModel.ProductionDate" class="form-control" id="production-date"/>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

<p>@FormMessage</p>

@code {
    public Starship StarshipModel { get; set; } = new Starship();
    public string FormMessage { get; set; }
    private async Task OnSubmit()
    {   
        FormMessage = "You successfully submitted the form";
        StarshipModel = new Starship();
        await Task.Delay(3000);
        FormMessage = string.Empty;
    }
    
    public class Starship
    {
        [Required]
        [StringLength(16, ErrorMessage = "Identifier too long (16 character limit).")]
        public string Identifier { get; set; }

        public string Description { get; set; }

        [Required]
        public string Classification { get; set; }

        [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
        public int MaximumAccommodation { get; set; }

        [Required]
        [Range(typeof(bool), "true", "true", 
            ErrorMessage = "This form disallows unapproved ships.")]
        public bool IsValidatedDesign { get; set; }

        [Required]
        public DateTime ProductionDate { get; set; }
    }
}
Run in Telerik REPL

IJSRuntime

The demo shows how to call a JS code using IJSRuntime: 

@inject IJSRuntime js

<h4>Click the button to alert</h4>

<button @onclick="@MyClickHandler">Click me!</button>

@code {
    protected async Task MyClickHandler()
    {
        await js.InvokeVoidAsync("myFunction", "Hello");
    }
}

<script suppress-error="BL9992">
    window.myFunction = (text) => alert(text);
</script>
Run in Telerik REPL

HTTP Calls

This example shows how to send a HTTP request and parse the result: 

@inject HttpClient Http

<h1>HTTP Demo</h1>

<button class="btn btn-primary" @onclick="CallHttp">Click me</button>

<div>Words:</div>
<ul>
    @foreach (var word in Words)
    {
        <li>@word</li>
    }
</ul>

@code {
    public IEnumerable<string> Words { get; set; } = Enumerable.Empty<string>();

    private async Task CallHttp()
    {
        var result = await Http.GetAsync("https://random-word-api.herokuapp.com/word?number=5");

        Words = await result.Content.ReadFromJsonAsync<IEnumerable<string>>();        
    }
}
Run in Telerik REPL

Configuring services

The demo shows how to define custom user service and configure the Dependency Injection for them: 

@inject SumService SumService

A
<input type="number" @bind="@A"/>
<br/>
B

<input type="number" @bind="@B"/>

<br/>
<button @onclick="@Sum">Sum</button>


<br/>
Result: @Result
@code {
    public int A { get; set; }
    public int B { get; set; }

    public int? Result { get; set; }

    public void Sum ()
    {
        Result = SumService.Sum(A, B);
    }
}
Run in Telerik REPL
group_43317

The only Blazor component library you will ever need

Telerik UI for Blazor is the largest Blazor suite on the market with truly native controls built for the Blazor framework from the ground up (100% C#, no JS). We offer the only suite with full-featured Grid, in combination with Scheduler, Chart, Editors, built-in accessibility, keyboard navigation, DPL, localization & globalization. Get started in no time with extensive docs, demos, detailed technical training & industry-leading support.

group_43313