Hello,
my blazor app is running extremely slow. For example, when a dialog is opened, it responds after 4 seconds or when closing, it responds after 4 seconds and does not do anything in the background, only the dialog opens and closes. It's the same even though I tried it on different computers and servers. Even when we want to make a different application, it works slowly, the page loads slowly, the dialogs are slow to open and close. In the picture below, the settings of my blazor application are shown:
Check if you do not have some heave content for these pages and dialogs - for example a DataGrid with many records and no paging.
Let me show you a page of mine like this:
@page "/Pdi"
@using Microsoft.AspNetCore.Components.WebAssembly.Services;
@using basicwebasbly.Api;
@using basicwebasbly.Components.Pdi;
@using blazorWebDAL.Models;
@using blazorWebDAL.Models.DbModel;
@inject DialogService dialogService;
<RadzenCard style="display: flex; align-items: center; gap: 0.5rem;background-color:#c6c3c6;">
<div class="m-auto">
<RadzenCard class="mx-auto " style="display: flex; text-align:end; align-items:end; gap: 0.6rem;background-color:#c6c3c6;">
<div class="container">
<div class="row float-end">
<div class="col-6">
<RadzenButton Text="Ekle" Style="border-radius:20px;" ButtonStyle="ButtonStyle.Success" Click="@(()=>OpenCustomerOrderDlg(null,"create"))" Icon="add_circle_outline"></RadzenButton>
</div>
<div class="col-6">
<RadzenButton Text="Yenile" Style="border-radius:20px;" ButtonStyle="ButtonStyle.Primary" Click="@(()=>GetAll())" Icon="refresh"></RadzenButton>
</div>
</div>
</div>
</RadzenCard>
<RadzenDataGrid @ref="radzenDataGrid"
FilterText="Ara..."
AllowFiltering="true"
AllowAlternatingRows="false"
FilterMode="FilterMode.Simple"
AllowSorting="true"
Filter="@OnFilter"
AllowPaging="true"
PagerHorizontalAlign="HorizontalAlign.Left"
Data="@customerOrderDtos"
TItem="CustomerOrderDto"
Style="background-color:#c6c3c6; --rz-cell-filter-width:20px"
GridLines="DataGridGridLines.Both"
SelectionMode="DataGridSelectionMode.Single"
Density="Density.Compact"
RowRender="@RowRender"
>
<Columns>
<RadzenDataGridColumn TItem="CustomerOrderDto" Filterable Property="CustomerOrderId" Title="Bobin Numarası" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="CustomerOrderStatusName" Title="Bobin Durumu" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="Name" Title="Kalınlık" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="Remark" Title="Genişlik" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Ağırlık" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Uzunluk" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="İç Çap" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="OrderNumber" Title="Dış Çap" Width="50px" />
<RadzenDataGridColumn TItem="CustomerOrderDto" Property="CustomerOrderId" Title="İşlemler" Width="50px">
<Template Context="data">
<RadzenButton ButtonStyle="ButtonStyle.Warning" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="pageview" class="m-1" Click="@(()=>OpenCustomerOrderDlg(data.CustomerOrderId,"update"))" />
<RadzenButton ButtonStyle="ButtonStyle.Danger" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="delete" class="m-1" Click="@(()=>DeleteCustomerOrder(data))" />
<RadzenButton ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Shade="Shade.Lighter" Icon="list" class="m-1" Click="@(()=>ChangePdiStatus(data.CustomerOrderId))" />
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</div>
</RadzenCard>
@code {
List<CustomerOrderDto> customerOrderDtos = new List<CustomerOrderDto>();
RadzenDataGrid<CustomerOrderDto>? radzenDataGrid;
[Inject]
CustomerOrderApi customerOrderApi { get; set; }
public CustomerOrderDto lazyParams = new CustomerOrderDto { };
protected override async Task OnInitializedAsync()
{
await GetAll();
}
async Task OpenCustomerOrderDlg(string customerOrderId, string dlgType)
{
DialogOptions dialogOptions = new DialogOptions
{
Width = "1000px",
Height = "650px",
ShowTitle = true,
};
Dictionary<string, object> dict = new Dictionary<string, object>()
{
{"CustomerOrderId",customerOrderId},
{"dlgType",dlgType}
};
var dialogTitle = (dlgType == "create" ? "Sipariş Ekle" : (customerOrderId + " Siparişi Düzenle"));
var obj = await dialogService.OpenAsync<PdiDlg>(dialogTitle, dict, dialogOptions);
if (true == true)
{
await GetAll();
}
}
async Task GetAll()
{
customerOrderDtos = await customerOrderApi.GetCustomerOrderList();
}
async void DeleteCustomerOrder(CustomerOrderDto customerOrderId)
{
var result = await dialogService
.Confirm(customerOrderId.CustomerOrderId + " bobinini silmek istiyor musunuz?", "Uyarı",
new ConfirmOptions { OkButtonText="Evet", CancelButtonText="Hayır" });
if (result == true)
{
await customerOrderApi.DeleteCustomerOrder(customerOrderId);
await GetAll();
}
}
async Task ChangePdiStatus(string coilId)
{
DialogOptions dialogOptions = new DialogOptions
{
Width = "330px",
Height = "310px",
ShowTitle = true,
CssClass = "rounded-1"
};
Dictionary<string, object> dict = new Dictionary<string, object>()
{
{"coilId",coilId},
};
var result = await dialogService.OpenAsync<PdiStatusDlg>("Bobin Durumu Değiştir", dict, dialogOptions);
if (result == true)
{
await GetAll();
}
}
async void OnFilter(DataGridColumnFilterEventArgs<CustomerOrderDto> args)
{
lazyParams.Page = 1;
lazyParams.First = 0;
lazyParams.Rows = 20;
lazyParams.TotalRecords=20;
lazyParams.SortOrder =(int)(args.Column.SortOrder.Value);
lazyParams.SortField = args.FilterValue.ToString();
//await GetAll();
}
void RowRender(RowRenderEventArgs<CustomerOrderDto> args)
{
if (args.Data.CustomerOrderStatusName == "Sipariş Oluşturuldu")
{
args.Attributes.Add("style", $"background-color:red");
}
}
}
Dialog Page:
@using Radzen;
@using basicwebasbly.Api;
@using basicwebasbly.Pages;
@using blazorWebDAL.Models;
@inject DialogService dialogService;
<!--<div class="container">
<div class="row">
<div class="col-sm">
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Sipariş Adı</RadzenText>
<RadzenTextBox @bind-Value=customerOrderDto.Name />
</div>
<div class="col-sm">
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Sipariş Durumu</RadzenText>
<CustomerOrderStatusDropDown @bind-customerOrderStatusId=customerOrderDto.CustomerOrderStatusId />
</div>
<div class="col-sm">
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Sipariş Numarası</RadzenText>
<RadzenTextBox @bind-Value=customerOrderDto.OrderNumber />
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Sipariş Açıklaması</RadzenText>
<RadzenTextArea @bind-Value=customerOrderDto.Remark Cols="30" Rows="3" />
</div>
</div>
<div class="d-flex justify-content-end">
<FooterTemplate>
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0">
<RadzenButton Variant="Variant.Text" class="rz-text-secondary-color" Click="@CloseDialog" Text="İptal" />
<RadzenButton Variant="Variant.Text" class="rz-text-secondary-color" Click="@SaveCustomerOrder" Text="Kaydet" />
</RadzenStack>
</FooterTemplate>
</div>
</div>-->
<RadzenTemplateForm Data="customerOrderDto">
<RadzenRow Gap="2rem" Class="rz-p-0 rz-p-lg-4">
<RadzenColumn Size="8" SizeMD="5">
<RadzenStack>
<RadzenFieldset Text="Sipariş Bilgileri">
<RadzenStack Gap="1rem">
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="Sipariş Adı" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<RadzenTextBox Style="width: 100%;" Name="CardNr" @bind-Value=customerOrderDto.Name />
</RadzenColumn>
</RadzenRow>
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="Sipariş Numarası" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<RadzenTextBox Style="width: 100%;" @bind-Value=customerOrderDto.OrderNumber />
</RadzenColumn>
</RadzenRow>
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="Sipariş Durumu" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<PdiStatusDropdwn @bind-pdiStatusId=customerOrderDto.CustomerOrderStatusId />
</RadzenColumn>
</RadzenRow>
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="Sipariş Açıklaması" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<RadzenTextArea Cols="20" Rows="4" @bind-Value="customerOrderDto.Remark" />
</RadzenColumn>
</RadzenRow>
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="Sipariş Oluşturma Tarihi" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<RadzenDatePicker TValue="DateTime?" Cols="20" Rows="4" @bind-Value="customerOrderDto.CreatedDate" />
</RadzenColumn>
</RadzenRow>
</RadzenStack>
</RadzenFieldset>
</RadzenStack>
</RadzenColumn>
<RadzenColumn Size="8" SizeMD="7">
<RadzenStack>
<RadzenFieldset Text="Bobin Bilgileri">
<RadzenStack Gap="1rem">
<RadzenRow AlignItems="AlignItems.Center">
<RadzenColumn Size="12" SizeMD="4">
<RadzenLabel Text="ScheduleId" />
</RadzenColumn>
<RadzenColumn Size="12" SizeMD="8">
<RadzenTextBox Disabled="true" Placeholder="ScheduleId" Style="width: 100%;" />
</RadzenColumn>
</RadzenRow>
</RadzenStack>
</RadzenFieldset>
</RadzenStack>
</RadzenColumn>
</RadzenRow>
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="1rem" Class="rz-mt-8 rz-mb-4">
<RadzenButton Icon="done" ButtonStyle="ButtonStyle.Success" class="dlgBtn" Click="@SaveCustomerOrder" Text="Kaydet" />
<RadzenButton ButtonStyle="ButtonStyle.Danger" class="dlgBtn" Click="@CloseDialog" Text="İptal" />
</RadzenStack>
</RadzenTemplateForm>
<style>
.dlgBtn {
border: 1px 2px;
border-radius: 10px;
}
</style>
@code {
[Parameter]
public string CustomerOrderId { get; set; } = "";
[Parameter]
public string dlgType { get; set; } = "create";
private CustomerOrderDto customerOrderDto = new CustomerOrderDto { };
[Inject]
CustomerOrderApi itemApi { get; set; }
protected override async Task OnInitializedAsync()
{
if (dlgType == "create")
{
customerOrderDto = new CustomerOrderDto { };
}
if (dlgType == "update")
{
customerOrderDto = await itemApi.GetCustomerOrder(CustomerOrderId);
}
await base.OnInitializedAsync();
}
void CloseDialog()
{
dialogService.Close(true);
}
async void SaveCustomerOrder()
{
customerOrderDto.CustomerId = 1;
if (dlgType == "create")
{
customerOrderDto.CustomerOrderId = Guid.NewGuid().ToString();
customerOrderDto.CreatedDate = DateTime.Now;
await itemApi.AddCustomerOrder(customerOrderDto);
}
if (dlgType == "update")
{
await itemApi.UpdateCustomerOrder(customerOrderDto);
}
CloseDialog();
}
}
Not only this page, but all the pages are empty, the page with only one datagrid is loading slowly, I can't solve this slowness.
Try to debug your app using Visual Studio and/or your browser developer tools to check what exactly is slow.
We are doing it, but when we create a new application and add the radzen, it works slowly even though we do nothing.
It also works slowly when we send it to the server.
I'm afraid I can't provide any additional tips. If you have active subscription for Radzen IDE you can send us your app at info@radzen.com to debug it locally.