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>

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

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

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

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

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

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

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

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

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>

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

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