This example shows how to embed DevExtreme widgets into your Blazor application.
DevExtreme widgets require DevExtreme scripts and stylesheets. The DevExpress Resource Manager automatically registers the DevExtreme script if your project includes the DevExpress.Blazor package. To add DevExtreme stylesheets, reference them in the App.razor file:
<head>
<link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.common.css") rel="stylesheet" />
<link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.material.purple.light.compact.css") rel="stylesheet" />
<!-- ... -->
</head>
@code{
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}DevExtremeGauge.razor and DevExtremeGauge.razor.js files wrap the DevExtreme Circular Gauge widget. During the wrapper's first render, the wrapper executes the LoadDxResources method to force the Resource Manager to load all client scripts:
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender) {
await JS.LoadDxResources();
ClientModule = await JS.InvokeAsync<IJSObjectReference>("import", "./DevExtremeComponents/DevExtremeGauge.razor.js");
ClientGauge = await ClientModule.InvokeAsync<IJSObjectReference>("initializeGauge", Gauge, DataSource);
}
await base.OnAfterRenderAsync(firstRender);
}You can use the wrapper as a regular Blazor component. The following code adds a DevExtremeGauge wrapper component to a page:
<DevExtremeGauge />The DevExpress Blazor UI Component Library includes multiple DevExtreme-based components (for example, DxHtmlEditor or DxMap). Refer to class descriptions for more information.
Add JavaScript-Based Components to an Application
(you will be redirected to DevExpress.com to submit your response)