Microsoft's new ASP.NET Blazor framework has been getting a ton of buzz recently, and rightfully so. Imagine .NET running in the browser. No plugins, no add-ons, no transpilation magic. It's every .NET developers dream. Since the initial previews of Blazor were released, we have been getting a number of questions about our intention to provide support for Blazor. My response was always something similar to "we're working on it, you just have to wait a little longer". I am happy to say that your wait is over!

Today, I am excited to announce the immediate availability of Infragistics Ignite UI for Blazor Preview. Yes, that's right... you can now take advantage of our blazing fast, feature rich, easy to use components in your Blazor applications today.

But wait a minute Brian…. the title says “Preview”, what’s up with that?  If you have been following my career here at Infragistics for the last 8 years, you know that I don’t like to keep things from my community.  I want your honest and candid feedback, and the best way to get that is to give you what we have now.  Not tomorrow, not next week, not next month, but now.  I wanted to get these components in your hands as soon as possible, because waiting sucks.  We have some loose ends to tie up before we can call these Blazor components RTM, but don’t let that “Preview” term fool you.  These controls are ready to be thrown into the fire and pushed to their limits.

Download the FREE Infragistics Ignite UI for Blazor Preview

What exactly do you get with the Ignite UI for Blazor preview? Well, let's find out.

Controls Shipping in Preview

Although this is just a preview, Ignite UI for Blazor is packed with 11 new Blazor components. I want to point out that we are providing a very simple Sample Browser to help you become familiar with the controls.  Fork it, run it, explore it.  This should do for now, at least until we can ship the official Infragistics Ignite UI for Blazor Sample Browser.

Now, let's take a moment to quickly cover all the great components you can start using in your Blazor applications today.

BulletGraph

The bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

CategoryChart

This touch-enabled charting control makes visualizing category data a breeze. Built on top of a high-performing and feature-rich data chart, the category chart filters the complexities of data visualization into a simplified API that anyone can use.

Data Grid (LiveGrid)

The Ignite UI for Blazor data grid is a tabular component that allows you to quickly bind and display your data with little coding or configuration. Features of the data grid include filtering, sorting, templates, row selection, row grouping, row pinning and movable columns. The data grid is optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns.

Note: When defining this component in your Blazor app, you should use the <LiveGrid> element for now. This name will be changing when we RTM the product.

DoughnutChart

Display your data with multiple series using this rich Doughnut Chart. Similar to a Pie Chart, the Doughnut Chart shows categorical statistics expressed in percentages. With its hollow center, it's best for displaying multiple series using concentric rings where each ring represents a data series. Bind easily to data, configure the inner radius, display exploded slices, customize themes, and more with this well-rounded control.

FinancialChart

This lightweight, high-performance chart is easy to configure to display mission-critical financial data using a simple and intuitive API. Just bind your data, and the chart takes care of everything else. The Blazor Financial Chart component is part of Infragistics’ best-in-breed UI for building high-performance, high-volume financial services, and capital market data applications.

LinearGauge

Make data visualizations and dashboards more engaging with a Linear Gauge that shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and highly configurable to present dashboards.

GeographicMap

Create highly-detailed, thematic geographical maps using an innovative feature set that includes: custom shape templates, the ability to render polylines and polyshapes, Map Progression, Scatter Area Plots, an intuitive Overview Pane, and more.

PieChart

Create simple or exploded pie charts. Customize the threshold for inclusion in the Other category, and display text labels and images that can be within or outside of the pie in a manner that avoids overlap. Users can click or drill down to view underlying data, explode out a section of the pie, and find information via tooltips.

RadialGauge

Radial Gauge makes your data visualizations and dashboards more engaging and shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and aircraft cockpits.

Sparkline

The Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations, and patterns in data in a clear and compact representation.

TreeMap

Show users the relative weighting of data points at more than one level with Blazor treemaps (also known as heatmaps in the financial industry) supporting strip, squarified, and slice-and-dice algorithms.

Getting Started

Now that you have a taste for what awesomeness is available to you. Your next question is how do you get started. Luckily, that can be done in three easy steps:

1. Create your Blazor app
2. Add the Infragistics.Blazor NuGet package
3. Add the "Infragistics.Blazor/app.bundle.js" script to the _Host.cshtml file (server project example)

<script src="_content/Infragistics.Blazor/app.bundle.js"></script> 
<script src="_framework/blazor.server.js"></script>

And that's it! You're now ready to start using the Ignite UI for Blazor components in your razor pages. Using a component in your razor page can be done in two steps:

1. Add a using statement

@using Infragistics.Blazor.Controls;

2. Define your component in HTML and bind your data

<FinancialChart Width="100%" Height="500px" DataSource="@data.StockMultipleSources">

</FinancialChart>

That's it! It's that easy.

Let’s Wrap this Baby Up!

Seeing this preview probably has you asking yourself, “Brian, these controls are amazing and I can’t wait to use them, but what’s next?  What’s your long term plan for Blazor?”.  Well, I’m glad you asked.  As I write this blog, we are researching many other components that really concentrate on line of business scenarios for web applications.  We have a long term plan for supporting your Blazor application needs, and we are committed to bringing you the markets best, highest performing, and most beautiful Blazor controls period.  In order to accomplish this, we need your help. 

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.