https://github.com/htmlelements/smart-blazor
Blazor UI Components & Examples
https://github.com/htmlelements/smart-blazor
asp-net-core aspnetcore blazor blazor-application blazor-client blazor-component blazor-components blazor-example blazor-server blazor-ui-components blazor-wasm blazor-wasm-frontend blazor-webassembly csharp dotnet dotnet6 microsoft-blazor webassembly
Last synced: 5 months ago
JSON representation
Blazor UI Components & Examples
- Host: GitHub
- URL: https://github.com/htmlelements/smart-blazor
- Owner: HTMLElements
- Created: 2020-10-04T08:09:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-09T10:14:12.000Z (almost 3 years ago)
- Last Synced: 2024-04-25T04:46:16.456Z (12 months ago)
- Topics: asp-net-core, aspnetcore, blazor, blazor-application, blazor-client, blazor-component, blazor-components, blazor-example, blazor-server, blazor-ui-components, blazor-wasm, blazor-wasm-frontend, blazor-webassembly, csharp, dotnet, dotnet6, microsoft-blazor, webassembly
- Language: HTML
- Homepage: https://www.htmlelements.com/blazor/
- Size: 53.3 MB
- Stars: 62
- Watchers: 6
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-blazor - Smart UI for Blazor -  Component library for Blazor including Grid, Kanban, Gantt, Chart, Docking, Pivot and more. [Website](https://www.htmlelements.com/blazor/). (Libraries & Extensions / Component bundles)
README
Smart.Blazor Component Library
==============================
Smart Blazor Components is a commercial set of 60+ Blazor UI controls. Both server-side and client-side.
Getting Started
---------------
###
### Create a new Blazor App
To start building .NET apps, download and install the .NET SDK (Software Development Kit).
* Check everything installed correctly
Once you've installed, open a new command prompt and run the following command:
```console
dotnet
```
If the command runs, printing out information about how to use dotnet, you're good to go.
* Got an error?
If you receive a 'dotnet' is not recognized as an internal or external command error, make sure you opened a new command prompt
* The Blazor framework provides templates to develop apps for each of the Blazor hosting models:
Blazor WebAssembly (blazorwasm)
```console
dotnet new blazorwasm -o BlazorApp
```
Blazor Server (blazorserver)
```console
dotnet new blazorserver -o BlazorServerApp
```
### Installation
Smart.Blazor Components are distributed as the **Smart.Blazor** Nuget package. You can use any of the following options:
* Install the package from command line by running **dotnet add package Smart.Blazor**.
* Alternatively, you can add the project from the Visual Nuget Package Manager.
* Edit the .csproj file and add a project reference
```csharp
net5.0
BlazorApp
```
### Import the Smart.Blazor namespace.
Open the \_Imports.razor file of your Blazor application and add `@using Smart.Blazor`
### Set a Theme
Open the \_Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include a theme CSS file by adding this snippet
```html
```
You can include 14+ additional CSS themes for the Controls - 7 dark and 7 light themes.
### Source files
Open the \_Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include this snippet
```html
```
If you would like to use only a specific component, instead of referring the ```smart.elements.js```, you can refer the component like that:
```html
```
###
### Registrations
####
#### Blazor WebAssembly
This step is mandatory for Blazor WebAssembly(client-side) and also for ASP.NET Core hosted project types. You should place the code into the Program.cs of your client project
```csharp
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Smart.Blazor;
namespace BlazorApp
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
builder.Services.AddSmart();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
}
```
####
#### Blazor Server
This step is going only into the Startup.cs of your Blazor Server project. You will need to add ```services.AddSmart();``` in the ConfigureServices method and ```using Smart.Blazor;``` in the using statements.
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using BlazorApp.Data;
using Smart.Blazor;
namespace BlazorApp
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton();
services.AddSmart();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
```
###
### Using Smart.Blazor Components
Use any Smart Blazor component by typing its tag name in a Blazor page e.g. Click Me If you are using client-side WebAssembly Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element): false
###
### Data binding a property
```csharp
@code {
string text = " Hi from Smart!";
}
```
### Events Handing
```csharp
@code {
private string eventLog;
private void OnChange(Event eventObj)
{
CalendarChangeEventDetail detail = eventObj\[" Detail & quot;\];
eventLog = detail.Value\[0\].ToString();
}
}
```
Alternatively you can do that:
```csharp
@page "/calendar"
@code {
private string eventLog;
private void OnReady(Calendar calendar)
{
calendar.Changed += delegate (object sender, CalendarChangedEventArgs args)
{
string value = args.Value\[0\].ToString();
eventLog = value;
StateHasChanged();
};
}
}
```
`OnReady` callback is called for each Blazor component, after it is initialized and rendered.
### Blazor WebAssembly (blazorwasm) Example
* Create a blazor application:
```console
dotnet new blazorwasm -o BlazorApp
```
* Navigate to the application:
```console
cd BlazorApp
```
* Add the Smart.Blazor package:
```console
dotnet add package Smart.Blazor
```
* Open _Imports.razor and add the following at the bottom:
```csharp
@using Smart.Blazor
```
* Open wwwroot/index.html and add the needed styles and scripts.
```csharp
Blazor WebAssembly App
Loading...
```
* Open Pages/Index.razor and replace the code as follows:
```csharp
@page "/"
@inject HttpClient Http
Weather forecast
This component demonstrates fetching data from the server.
@if (forecasts == null)
{
Loading...
}
else
{
Date
Temp. (C)
Temp. (F)
Summary
@foreach (var forecast in forecasts)
{
@forecast.Date.ToShortDateString()
@forecast.TemperatureC
@forecast.TemperatureF
@forecast.Summary
}
}
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync("sample-data/weather.json");
}
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public string Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
```
* Edit Program.cs
```csharp
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Smart.Blazor;
namespace BlazorApp
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
builder.Services.AddSmart();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
}
```
* Start the app and check the result
```console
dotnet watch run
```
Wait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.
Once you get to the following page, you have successfully run your first Blazor WebAssembly app using Smart UI for Blazor Components!
* Output
### Blazor Server (blazorserver) Example
* Create a blazor application:
```console
dotnet new blazorserver -o BlazorServerApp
```
* Navigate to the application:
```console
cd BlazorServerApp
```
* Add the Smart.Blazor package:
```console
dotnet add package Smart.Blazor
```
* Open _Imports.razor and add the following at the bottom:
```csharp
@using Smart.Blazor
```
* Open Pages/_Host.cshtml and add the needed styles and scripts.
```csharp
@page "/"
@namespace smart_blazor_app.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
smart-blazor-app
An error has occurred. This application may no longer respond until reloaded.
An unhandled exception has occurred. See browser dev tools for details.
Reload
🗙
```
* Open Pages/Index.razor and replace the code as follows:
```csharp
@page "/"
@inject HttpClient Http
Weather forecast
This component demonstrates fetching data from the server.
@if (forecasts == null)
{
Loading...
}
else
{
Date
Temp. (C)
Temp. (F)
Summary
@foreach (var forecast in forecasts)
{
@forecast.Date.ToShortDateString()
@forecast.TemperatureC
@forecast.TemperatureF
@forecast.Summary
}
}
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync("sample-data/weather.json");
}
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public string Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
```
* Edit Startup.cs
You will need to add ```services.AddSmart();``` in the ConfigureServices method and ```using Smart.Blazor;``` in the using statements.
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using BlazorServerApp.Data;
using Smart.Blazor;
namespace BlazorServerApp
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton();
services.AddSmart();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
```
* Start the app and check the result
```console
dotnet watch run
```
Wait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.
Once you get to the following page, you have successfully run your first Blazor Server app using Smart UI for Blazor Components!
* Output
