Customizing generated application (Blazor) (Blazor)
Radzen generates code with a lot of extensibility points. This allows for adding custom behavior without losing the design time features. To do this you can use your favorite code editor, for example Visual Studio 2019 or Visual Studio Code.
Code generation ignore list
Radzen generates code for your Radzen application pages and data sources (Blazor components, pages, services, etc). If you want to tweak the code you can do so in one of two ways:
- By following the Radzen extensibility rules and writing your custom code in the provided extensibility hooks listed later in this article.
- By adding the file(s) you want to modify to Radzen’s code generation ignore list. This section shows how this is done.
The Code generation ignore list is advanced feature that should be used only if none of the provided extensibility hooks would work for you.
You can add a certain file, list of files or entire directories to Radzen’s code generation ignore list by going to the application settings (the three dots button in the top right corner). Then add a list of files or directories separated with a new line in the Code generation ignore list textbox.
The ignore list follows the gitignore conventions.
Here is a quick FAQ about ignored files:
What happens to ignored files
Radzen will not longer output code to files that match the ignore list. For example if you ignore the server\Pages\Products.razor
page and you make changes with Visual Studio, those changes will remain.
If you later modify that page from Radzen’s designer you will not see any code generated for those changes. The changes will be persisted in the metadata though.
Will Radzen preview my changes in design time
Radzen uses the metadata (stored in the meta
directory) to generate the design time experience. This is why any custom modifications to the generated code will not be previewed.
Remove files from ignore list
Remove the ignore rule that matches those files from the application setting and run the application. Radzen will update the files that were in the ignore list.
Customizing the code
Radzen generates services for your application data sources. Tables, views and stored procedures are represented by methods and you can customize every read, add, update, delete operation or stored procedure execution using C# partial classes and methods.
You have to add a new file to the server\Services
directory which defines a partial class with the same name as the service you would like to extend.
For example to extend the NorthwindService add a file server\Services\Northwind.Custom.cs
with the following content:
namespace <YourAppNamespace>
{
public partial class NorthwindService
{
partial void OnOrdersRead(ref IQueryable<Models.Northwind.Order> items)
{
// Executed when invoking the getOrders data source method in Radzen.
// Use to perform additional operations over the data e.g. filtering.
items = items.Where(order => order.OrderDate > new DateTime(2019, 1, 1));
}
partial void OnOrderGet(ref IQueryable<Models.Northwind.Order> items)
{
// Executed when invoking the getOrderById data source method.
}
partial void OnOrderDeleted(Models.Sample.Order item)
{
// Executed before pesisting the changes to the database
}
partial void OnAfterOrderDeleted(Models.Sample.Order item)
{
// Executed after persisting the changes to the database.
}
partial void OnOrderUpdated(Models.Sample.Order item)
{
// Executed before pesisting the changes to the database
}
partial void OnAfterOrderUpdated(Models.Sample.Order item)
{
// Executed after persisting the changes to the database.
}
partial void OnOrderCreated(Models.Sample.Order item)
{
// Executed before pesisting the changes to the database
}
partial void OnAfterOrderCreated(Models.Sample.Order item)
{
// Executed after persisting the changes to the database.
}
}
}
For a complete example check the CRM tutorial
Adding custom CSS and JavaScript files
You can add custom CSS and JavaScript files to server/Pages/_Host.cshtml
(server-side) or client/wwwroot/index.html
(wasm)
via the application settings. Use the “+” button to add the path or URL of your custom JS or CSS files.
Importing custom namespaces
You can import custom namespaces in the server/_Imports.razor
(server-side) or client/_Imports.razor
(WASM) from the application settings.
Use the “+” button to add a namespace.
Custom Startup
You can extend your .NET application configuration too by adding a partial Startup class e.g. Startup.Custom.cs. There are two partial methods
that you can specify - OnConfigureServices
and OnConfigure
.
namespace <YourAppNamespace>
{
public partial class Startup
{
partial void OnConfigureServices(IServiceCollection services)
{
}
partial void OnConfigure(IApplicationBuilder app)
{
}
}
}