Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Blazor UI Components & Examples

NotificationsYou must be signed in to change notification settings

HTMLElements/smart-blazor

Repository files navigation

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 theSmart.Blazor Nuget package. You can use any of the following options:

  • Install the package from command line by runningdotnet add package Smart.Blazor.
  • Alternatively, you can add the project from the Visual Nuget Package Manager.

Image of Smart.Blazor Nuget

  • Edit the .csproj file and add a project reference
<ProjectSdk="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

<linkhref="_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

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

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

<scripttype="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

usingSystem;usingSystem.Net.Http;usingSystem.Collections.Generic;usingSystem.Threading.Tasks;usingSystem.Text;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Logging;usingSmart.Blazor;namespaceBlazorApp{publicclassProgram{publicstaticasyncTaskMain(string[]args){varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.Services.AddSmart();builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});awaitbuilder.Build().RunAsync();}}}

Blazor Server

This step is going only into the Startup.cs of your Blazor Server project. You will need to addservices.AddSmart(); in the ConfigureServices method andusing Smart.Blazor; in the using statements.

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Components;usingMicrosoft.AspNetCore.Hosting;usingMicrosoft.AspNetCore.HttpsPolicy;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Hosting;usingBlazorApp.Data;usingSmart.Blazor;namespaceBlazorApp{publicclassStartup{publicStartup(IConfigurationconfiguration){Configuration=configuration;}publicIConfigurationConfiguration{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=398940publicvoidConfigureServices(IServiceCollectionservices){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.publicvoidConfigure(IApplicationBuilderapp,IWebHostEnvironmentenv){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

<InputValue="@text"></Input>@code{string text= " Hifrom Smart!";}

Events Handing

<Calendarid="calendar"OnChange=@OnChange></Calendar><div class="options"><div class="caption">Events</div><div class="option" id="log">@eventLog</div></div>@code{private string eventLog;privatevoidOnChange(EventeventObj){CalendarChangeEventDetaildetail= 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{privatestringeventLog;privatevoidOnReady(Calendarcalendar){calendar.Changed+=delegate(objectsender,CalendarChangedEventArgsargs){stringvalue=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:
dotnet new blazorwasm -o BlazorApp
  • Navigate to the application:
cd BlazorApp
  • Add the Smart.Blazor package:
dotnet add package Smart.Blazor
  • Open _Imports.razor and add the following at the bottom:
@usingSmart.Blazor
  • Open wwwroot/index.html and add the needed styles and scripts.
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>Blazor WebAssembly App</title><base href="/"/><link href="css/bootstrap/bootstrap.min.css"rel="stylesheet"/><link href="css/app.css"rel="stylesheet"/><link href="_framework/scoped.styles.css"rel="stylesheet"/><link href="_content/Smart.Blazor/css/smart.default.css"rel="stylesheet"/><script src="_content/Smart.Blazor/js/smart.blazor.js"></script><script src="_content/Smart.Blazor/js/smart.elements.js"></script></head><body><div id="app">Loading...</div><div id="blazor-error-ui">An unhandled error has occurred.<a href="">Reload</a><a class="dismiss">🗙</a></div><script src="_framework/blazor.webassembly.js"></script></body></html>
  • Open Pages/Index.razor and replace the code as follows:
@page"/"@injectHttpClientHttp<h1>Weather forecast</h1><p>This component demonstrates fetching datafrom the server.</p>@if(forecasts==null){<p><em>Loading...</em></p>}else{<Table Selection="true"SortMode="TableSortMode.One"class="table"><table><thead><tr><th>Date</th><th>Temp.(C)</th><th>Temp.(F)</th><th>Summary</th></tr></thead><tbody>@foreach(varforecastin forecasts){<tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></tr>}</tbody></table></Table>}@code{privateWeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts=awaitHttp.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");}public class WeatherForecast{public DateTime Date{get;set;}publicint TemperatureC{get;set;}publicstring Summary{get;set;}publicint TemperatureF=>32+(int)(TemperatureC/0.5556);}}
  • Edit Program.cs
usingSystem;usingSystem.Net.Http;usingSystem.Collections.Generic;usingSystem.Threading.Tasks;usingSystem.Text;usingMicrosoft.AspNetCore.Components.WebAssembly.Hosting;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Logging;usingSmart.Blazor;namespaceBlazorApp{publicclassProgram{publicstaticasyncTaskMain(string[]args){varbuilder=WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.Services.AddSmart();builder.Services.AddScoped(sp=>newHttpClient{BaseAddress=newUri(builder.HostEnvironment.BaseAddress)});awaitbuilder.Build().RunAsync();}}}
  • Start the app and check the result
dotnet watch run

Wait for the app to display that it's listening onhttp://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

Image of Smart.Blazor table

Blazor Server (blazorserver) Example

  • Create a blazor application:
dotnet new blazorserver -o BlazorServerApp
  • Navigate to the application:
cd BlazorServerApp
  • Add the Smart.Blazor package:
dotnet add package Smart.Blazor
  • Open _Imports.razor and add the following at the bottom:
@usingSmart.Blazor
  • Open Pages/_Host.cshtml and add the needed styles and scripts.
@page"/"@namespacesmart_blazor_app.Pages@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers@{Layout=null;}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>smart-blazor-app</title><basehref="~/"/><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /><link href="css/site.css"rel="stylesheet"/><link href="_content/smart-blazor-app/_framework/scoped.styles.css"rel="stylesheet"/><link href="_content/Smart.Blazor/css/smart.default.css"rel="stylesheet"/><script src="_content/Smart.Blazor/js/smart.blazor.js"></script><script src="_content/Smart.Blazor/js/smart.elements.js"></script></head><body><component type="typeof(App)"render-mode="ServerPrerendered"/><div id="blazor-error-ui"><environment include="Staging,Production">An error has occurred. This application may no longer respond until reloaded.</environment><environment include="Development">An unhandled exception has occurred. See browser dev toolsfor details.</environment><a href=""class="reload">Reload</a><a class="dismiss">🗙</a></div><script src="_framework/blazor.server.js"></script></body></html>
  • Open Pages/Index.razor and replace the code as follows:
@page"/"@injectHttpClientHttp<h1>Weather forecast</h1><p>This component demonstrates fetching datafrom the server.</p>@if(forecasts==null){<p><em>Loading...</em></p>}else{<Table Selection="true"SortMode="TableSortMode.One"class="table"><table><thead><tr><th>Date</th><th>Temp.(C)</th><th>Temp.(F)</th><th>Summary</th></tr></thead><tbody>@foreach(varforecastin forecasts){<tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></tr>}</tbody></table></Table>}@code{privateWeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts=awaitHttp.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");}public class WeatherForecast{public DateTime Date{get;set;}publicint TemperatureC{get;set;}publicstring Summary{get;set;}publicint TemperatureF=>32+(int)(TemperatureC/0.5556);}}
  • Edit Startup.cs

You will need to addservices.AddSmart(); in the ConfigureServices method andusing Smart.Blazor; in the using statements.

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Components;usingMicrosoft.AspNetCore.Hosting;usingMicrosoft.AspNetCore.HttpsPolicy;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Hosting;usingBlazorServerApp.Data;usingSmart.Blazor;namespaceBlazorServerApp{publicclassStartup{publicStartup(IConfigurationconfiguration){Configuration=configuration;}publicIConfigurationConfiguration{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=398940publicvoidConfigureServices(IServiceCollectionservices){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.publicvoidConfigure(IApplicationBuilderapp,IWebHostEnvironmentenv){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
dotnet watch run

Wait for the app to display that it's listening onhttp://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

Image of Smart.Blazor table

[8]ページ先頭
©2009-2025 Movatter.jp