visual-1
Progress Telerik REPL for Blazor

Predefined Code Snippets

Start Fast with Pre-Built Blazor Examples

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

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 Most Comprehensive Blazor UI Library You Can Possibly Get

Telerik UI for Blazor is a leading UI component library, allowing you to elevate Blazor apps with polished, performant UI. Develop new Blazor apps or modernize legacy web projects in half the time with a high-performing Grid and 100+ truly native, easy-to-customize Blazor components. Hit the ground running with our extensive demos, documentation, online technical training and outstanding support.

group_43313