Click the NuGet icon on the left sidebar
Search for and choose the package of your choice
Select a version and click the install button
Click the documents icon
on the left sidebar
Put the link of the JS or CSS file
Click the add button
Once a static asset is added, you can enable/disable using the switch.
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.
Once you ready with the code you want to embed, just click Share icon
Choose the tab Embed
Configure the options you want for your embedded snippet
Choose the place you want to put the REPL iframe and paste the generated code
Click the
Share icon
Copy the URL of the snippet and paste it wherever you need
Or choose a social network from the list to share the snippet directly there
Once you compile your code, you can see the compilation diagnostics in the form of warnings and errors in the Error List.
Find your error precisely with the file name and line number shown in the Error List.
Some of the most commonly used commands are:
If you want to dig a little deeper into Monaco Editor’s features, you can do so here
Simple example showing simple HTML button:
<button>Hello World</button>
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";
}
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;}
}
}
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);
}
}
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);
}
}
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++;
}
}
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 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; }
}
}
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>
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>>();
}
}
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);
}
}
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.