Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 16 de febrero de 2021
Blazor

Es frecuente que alumnos de mi curso de Blazor en CampusMVP me pregunten sobre la existencia de bibliotecas de componentes que les ayuden a desarrollar aplicaciones profesionales más rápidamente, por lo que no podía pasar por alto la noticia que publicaban hace unos días los amigos de Radzen en su cuenta de Twitter:

Los componentes Radzen para Blazor son ahora open source

En efecto, ¡los componentes para Blazor de Radzen han pasado a ser open source y distribuidos bajo licencia MIT!

Para los que no los conozcan, Radzen es uno de los referentes en el mundo de las herramientas y componentes visuales para el desarrollo rápido de aplicaciones web, pero lo que nos ocupa ahora son el conjunto de más de 60 componentes visuales para Blazor Server y WebAssembly que ahora podremos utilizar de forma totalmente gratuita (bueno, aunque existen opciones para pagar por servicios de soporte profesional).

Componentes Radzen para Blazor

¿Qué componentes podemos encontrar ahí?

Radzen es una de las suites de componentes más extensa, por lo que podemos encontrar componentes Blazor prácticamente para todo. Aunque para haceros una idea lo mejor es que acudáis al sitio web de demostración, más o menos se incluye lo siguiente:

  • General
    • Button
    • GoogleMap
    • Gravatar
    • SplitButton
    • Icon
    • Image
    • Link
    • Login
    • ProgressBar
    • Dialog
    • Notification
    • Tooltip
    • Menu
    • PanelMenu
    • ContextMenu
    • ProfileMenu
    • Upload
  • Containers
    • Accordion
    • Card
    • Fieldset
    • Panel
    • Tabs
    • Steps
  • Forms
    • AutoComplete
    • Switch
    • CheckBox
    • CheckBoxList
    • ColorPicker
    • DatePicker
    • DropDown
    • DropDownDataGrid
    • FileInput
    • ListBox
    • Numeric
    • Password
    • RadioButtonList
    • Rating
    • SelectBar
    • Slider
    • TemplateForm
    • TextBox
    • Mask
    • TextArea
  • Validators
    • RequiredValidator
    • LengthValidator
    • NumericRangeValidator
    • CompareValidator
    • EmailValidator
    • RegexValidator
  • Data
    • DataList
    • Pager
    • Tree
    • Scheduler
  • DataGrid
    • Binding to IQueryable
    • Binding with LoadData event
    • Binding to OData service
    • Footer Totals
    • Custom Column FilterTemplate
    • Hierarchy
    • Hierarchy on demand
    • Master/Detail
    • InLine Editing
    • Conditional styles and templates
    • Export to Excel and CSV
    • Cascading DropDowns
  • HTML Editor
    • Default tools
    • Custom tools
  • Charts
    • Line Chart
    • Area Chart
    • Column Chart
    • Bar Chart
    • Pie Chart
    • Donut Chart
  • Gauges
    • Radial Gauge
    • Arc Gauge
    • Styling Gauge

¿Cómo utilizarlos?

Desde el repositorio Radzen Blazor Components de GitHub podríamos descargar el código fuente completo de los componentes e incluirlos directamente en nuestra solución, aunque normalmente lo más sencillo será utilizarlos instalando el paquete NuGet Radzen.Blazor en nuestro proyecto Blazor.

Hecho esto, para mayor comodidad, es interesante incluir en el archivo _Imports.razor general los espacios de nombres donde se incluyen los componentes, así los tendremos siempre a mano:

@using Radzen
@using Radzen.Blazor

A continuación, hay que incluir en la página contenedora del proyecto Blazor, ya sea _Host.cshtml (Blazor Server) o index.html (WebAssembly) las referencias a los scripts utilizados por los componentes Radzen, justo antes del </body> que cierra el cuerpo:

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

De la misma forma, en esa misma página hay que añadir la hoja de estilos del tema visual utilizar:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">

La versión gratuita de los componentes, además del tema por defecto, incluye tres temas adicionales: dark, humanistic y software, y las versiones de pago ofrecen algunos temas premium más. Para usar alguno de estos temas, lo único que hay que hacer es sustituir el nombre en el <link> anterior, por ejemplo software-base.css.

Algunos componentes, como los cuadros de diálogo, menús contextuales, o tooltips requieren el registro de servicios en el inyector de dependencias. Por tanto, es buena idea dejarlos preparados desde un principio en la clase Startup de Blazor Server o en Program de Blazor WebAssembly:

// Blazor Server:
services.AddScoped<DialogService>();
services.AddScoped<NotificationService>();
services.AddScoped<TooltipService>();
services.AddScoped<ContextMenuService>();

// Blazor Wasm:
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();

¡Y esto es todo! Con estos simples pasos ya tenemos toda la potencia de los componentes Radzen a nuestra disposición 🙂

Publicado en Variable not found.

3 Comentarios:

Livingstone Cano dijo...

Jose Maria excelente ayuda, vamos a probarlo y gracias por la sugerencia, como siempre excelentes aportes a la comunidad.

Anónimo dijo...

buenos días.

Que diferencia existe entre un componente drowdown y drowdowngrid

José María Aguilar dijo...

Hola!

Nada más viendo el nombre seguro que te puedes hacer una idea ;) El dropdown es un desplegable con una lista de opciones, mientras que dropdowndatagrid muestra las opciones mediante una rejilla que puede usar paginación, varias columnas, etc.

En la web de Radzen tienes ejemplos de uso:

- Dropdown
- Dropdown Datagrid

Saludos!