Smart.Blazor 8.1.12

There is a newer version of this package available.
See the version list below for details.
dotnet add package Smart.Blazor --version 8.1.12
NuGet\Install-Package Smart.Blazor -Version 8.1.12
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Smart.Blazor" Version="8.1.12" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Smart.Blazor --version 8.1.12
#r "nuget: Smart.Blazor, 8.1.12"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Smart.Blazor as a Cake Addin
#addin nuget:?package=Smart.Blazor&version=8.1.12

// Install Smart.Blazor as a Cake Tool
#tool nuget:?package=Smart.Blazor&version=8.1.12

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:

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)

dotnet new blazorwasm -o BlazorApp

Blazor Server (blazorserver)

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

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <RootNamespace>BlazorApp</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Smart.Blazor" Version="8.1.3" />
  </ItemGroup>

</Project>

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

<link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />

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

<script src="_content/Smart.Blazor/js/smart.blazor.js"></script>
<script src="_content/Smart.Blazor/js/smart.elements.js"></script>

If you would like to use only a specific component, instead of referring the smart.elements.js, you can refer the component like that:

<script type="module" src="_content/Smart.Blazor/js/modules/smart.table.js"></script>

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

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>("#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.

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<WeatherForecastService>();
	    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. <Button>Click Me</Button> If you are using client-side WebAssembly Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element): <BlazorLinkOnBuild>false</BlazorLinkOnBuild>

Data binding a property

<Input Value="@text"></Input>
@code {
	string text = " Hi from Smart!";
}

Events Handing

<Calendar id="calendar" OnChange=@OnChange></Calendar>
<div class="options">
	<div class="caption">Events</div>
	<div class="option" id="log">
	@eventLog
	</div>
</div>

@code {
	private string eventLog;

	private void OnChange(Event eventObj)
	{
		CalendarChangeEventDetail detail = eventObj\[" Detail & quot;\];

		eventLog = detail.Value\[0\].ToString();
	}
}

Alternatively you can do that:

@page "/calendar"

<Calendar OnReady="OnReady" id="calendar" ></Calendar>
<div class="options">
	<div class="caption">Events</div>
	<div class="option" id="log">
	@eventLog
	</div>
</div>


@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.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.1 is compatible. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
18.0.6 1,090 1/19/2024
18.0.0 627 1/16/2024
17.0.89 576 1/16/2024
17.0.35 1,260 12/1/2023
17.0.6 2,294 10/26/2023
16.0.2 4,579 8/4/2023
15.2.1 3,160 5/17/2023
15.1.1 2,757 4/1/2023
15.1.0 1,707 3/31/2023
15.0.63 2,035 3/20/2023
15.0.60 1,703 3/31/2023
14.4.136 2,992 1/18/2023
14.4.39 3,232 10/28/2022
14.2.18 4,382 7/21/2022
14.2.12 1,884 7/18/2022
14.1.1 2,647 7/5/2022
14.1.0 1,900 7/5/2022
14.0.94 2,147 6/15/2022
14.0.75 2,166 6/3/2022
14.0.51 3,102 5/17/2022
14.0.45 2,046 5/14/2022
13.1.29 3,196 4/7/2022
13.1.27 1,910 4/5/2022
13.1.25 1,917 4/4/2022
13.1.21 2,039 4/2/2022
13.1.20 1,620 4/1/2022
13.1.17 1,875 3/31/2022
13.1.12 1,744 3/29/2022
13.1.2 1,980 3/23/2022
13.0.20 1,870 3/8/2022
13.0.10 1,769 2/22/2022
13.0.8 1,911 2/21/2022
12.0.35 1,899 2/15/2022
12.0.20 1,702 2/4/2022
12.0.8 2,697 1/24/2022
12.0.1 1,788 1/20/2022
11.0.46 1,826 1/4/2022
11.0.38 1,599 12/29/2021
11.0.36 1,502 12/29/2021
11.0.35 1,610 12/29/2021
11.0.16 1,761 12/9/2021
11.0.7 1,666 12/3/2021
11.0.6 2,247 12/3/2021
11.0.4 1,523 12/2/2021
11.0.3 1,530 12/2/2021
11.0.0 1,554 11/29/2021
10.2.2 4,048 10/19/2021
10.2.1 1,571 10/19/2021
10.2.0 1,637 10/19/2021
10.0.83 1,631 10/18/2021
10.0.81 1,631 10/17/2021
10.0.77 1,649 10/14/2021
10.0.74 1,568 10/13/2021
10.0.73 1,569 10/13/2021
10.0.48 1,924 9/29/2021
10.0.45 1,587 9/27/2021
10.0.44 1,619 9/26/2021
10.0.41 1,589 9/23/2021
10.0.37 1,516 9/22/2021
10.0.36 1,630 9/22/2021
10.0.35 1,599 9/22/2021
10.0.31 1,736 9/17/2021
10.0.18 1,676 8/27/2021
10.0.15 1,532 8/26/2021
10.0.14 1,611 8/24/2021
10.0.1 1,742 8/16/2021
9.4.18 1,861 7/28/2021
9.4.15 1,598 7/16/2021
9.4.13 1,647 7/15/2021
9.4.8 1,490 7/12/2021
9.4.1 1,729 7/5/2021
9.4.0 1,775 6/30/2021
9.3.115 1,736 7/2/2021
9.3.113 1,584 6/25/2021
9.3.108 1,661 6/21/2021
9.3.97 1,551 6/8/2021
9.3.92 1,675 6/3/2021
9.3.82 1,694 5/26/2021
9.3.80 1,642 5/26/2021
9.3.66 1,599 5/19/2021
9.3.54 1,672 5/10/2021
9.3.45 1,791 5/6/2021
9.3.42 3,830 5/5/2021
9.3.39 1,760 5/1/2021
9.3.38 1,569 4/30/2021
9.3.36 1,570 4/30/2021
9.3.35 1,682 4/30/2021
9.3.34 1,687 4/29/2021
9.3.33 1,660 4/29/2021
9.3.32 1,616 4/28/2021
9.3.31 1,571 4/28/2021
9.3.30 1,783 4/27/2021
9.3.29 1,581 4/27/2021
9.3.25 1,537 4/26/2021
9.3.23 1,617 4/24/2021
9.3.22 1,582 4/23/2021
9.3.21 1,666 4/23/2021
9.3.20 1,624 4/22/2021
9.3.19 1,550 4/22/2021
9.3.18 1,591 4/22/2021
9.3.17 1,620 4/22/2021
9.3.16 1,542 4/22/2021
9.3.15 1,563 4/22/2021
9.3.14 1,666 4/22/2021
9.3.12 1,694 4/22/2021
9.3.11 1,643 4/21/2021
9.3.10 1,608 4/21/2021
9.3.9 1,666 4/21/2021
9.3.8 1,594 4/20/2021
9.3.6 1,690 4/20/2021
9.3.5 1,658 4/20/2021
9.3.4 1,687 4/19/2021
9.3.3 1,628 4/18/2021
9.3.2 1,588 4/17/2021
9.2.7 1,685 4/17/2021
9.2.5 1,564 4/16/2021
9.2.2 1,558 4/15/2021
9.2.1 1,656 4/13/2021
9.2.0 1,725 4/10/2021
9.1.6 1,540 4/7/2021
9.1.5 1,821 3/25/2021
9.1.4 1,828 3/5/2021
9.1.3 1,850 2/26/2021
9.1.1 1,893 2/3/2021
9.1.0 1,733 2/3/2021
9.0.6 1,764 2/2/2021
9.0.5 1,774 1/15/2021
9.0.4 1,833 1/14/2021
9.0.3 1,717 1/11/2021
9.0.2 1,941 12/27/2020
9.0.1 1,917 12/27/2020
9.0.0 1,867 12/27/2020
8.2.0 2,800 12/22/2020
8.1.17 1,945 12/9/2020
8.1.14 1,791 12/8/2020
8.1.13 1,914 12/2/2020
8.1.12 1,832 11/26/2020
8.1.10 1,915 11/25/2020
8.1.9 1,744 11/25/2020
8.1.8 1,775 11/24/2020
8.1.7 1,874 11/5/2020
8.1.6 1,759 11/3/2020
8.1.5 1,916 11/1/2020
8.1.4 1,788 10/29/2020
8.1.3 1,786 10/13/2020
8.1.2 269 10/13/2020
8.1.1 249 10/13/2020
8.1.0 327 10/13/2020