{"id":13807387,"url":"https://github.com/htmlelements/smart-blazor","last_synced_at":"2025-04-30T01:16:09.386Z","repository":{"id":65347031,"uuid":"301074069","full_name":"HTMLElements/smart-blazor","owner":"HTMLElements","description":"Blazor UI Components \u0026 Examples","archived":false,"fork":false,"pushed_at":"2022-05-09T10:14:12.000Z","size":55938,"stargazers_count":66,"open_issues_count":2,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-30T01:16:00.988Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.htmlelements.com/blazor/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HTMLElements.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-04T08:09:25.000Z","updated_at":"2025-03-06T16:12:35.000Z","dependencies_parsed_at":"2023-01-18T18:17:37.020Z","dependency_job_id":null,"html_url":"https://github.com/HTMLElements/smart-blazor","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HTMLElements%2Fsmart-blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HTMLElements%2Fsmart-blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HTMLElements%2Fsmart-blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HTMLElements%2Fsmart-blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HTMLElements","download_url":"https://codeload.github.com/HTMLElements/smart-blazor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251608465,"owners_count":21616859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-04T01:01:24.963Z","updated_at":"2025-04-30T01:16:09.363Z","avatar_url":"https://github.com/HTMLElements.png","language":"HTML","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Component bundles"],"readme":"Smart.Blazor Component Library\n==============================\n\nSmart Blazor Components is a commercial set of 60+ Blazor UI controls. Both server-side and client-side.\n\nGetting Started\n---------------\n\n### \n\n### Create a new Blazor App\n\nTo start building .NET apps, download and install the .NET SDK (Software Development Kit).\n\n* Check everything installed correctly\n\nOnce you've installed, open a new command prompt and run the following command:\n\n```console\ndotnet\n```\n\nIf the command runs, printing out information about how to use dotnet, you're good to go.\n\n* Got an error?\n\nIf you receive a 'dotnet' is not recognized as an internal or external command error, make sure you opened a new command prompt\n\n* The Blazor framework provides templates to develop apps for each of the Blazor hosting models:\n\nBlazor WebAssembly (blazorwasm)\n\n```console \ndotnet new blazorwasm -o BlazorApp\n```\n\nBlazor Server (blazorserver)\n\n```console \ndotnet new blazorserver -o BlazorServerApp\n```\n\n### Installation\n\nSmart.Blazor Components are distributed as the **Smart.Blazor** Nuget package. You can use any of the following options:\n\n* Install the package from command line by running **dotnet add package Smart.Blazor**.\n* Alternatively, you can add the project from the Visual Nuget Package Manager.\n\n\n\n* Edit the .csproj file and add a project reference\n\n```csharp\n\u003cProject Sdk=\"Microsoft.NET.Sdk.Web\"\u003e\n\n \u003cPropertyGroup\u003e\n \u003cTargetFramework\u003enet5.0\u003c/TargetFramework\u003e\n \u003cRootNamespace\u003eBlazorApp\u003c/RootNamespace\u003e\n \u003c/PropertyGroup\u003e\n\n \u003cItemGroup\u003e\n \u003cPackageReference Include=\"Smart.Blazor\" Version=\"8.1.3\" /\u003e\n \u003c/ItemGroup\u003e\n\n\u003c/Project\u003e\n```\n\n### Import the Smart.Blazor namespace.\n\nOpen the \\_Imports.razor file of your Blazor application and add `@using Smart.Blazor`\n\n### Set a Theme\n\nOpen 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\n\n```html\n\u003clink href=\"_content/Smart.Blazor/css/smart.default.css\" rel=\"stylesheet\" /\u003e\n```\n\nYou can include 14+ additional CSS themes for the Controls - 7 dark and 7 light themes.\n\n### Source files\n\nOpen the \\_Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include this snippet\n```html\n\u003cscript src=\"_content/Smart.Blazor/js/smart.blazor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"_content/Smart.Blazor/js/smart.elements.js\"\u003e\u003c/script\u003e\n```\t\n\nIf you would like to use only a specific component, instead of referring the ```smart.elements.js```, you can refer the component like that:\n\n```html\n\u003cscript type=\"module\" src=\"_content/Smart.Blazor/js/modules/smart.table.js\"\u003e\u003c/script\u003e\n```\n\n### \n\n### Registrations\n\n#### \n\n#### Blazor WebAssembly\n\nThis 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\n```csharp\nusing System;\nusing System.Net.Http;\nusing System.Collections.Generic;\nusing System.Threading.Tasks;\nusing System.Text;\nusing Microsoft.AspNetCore.Components.WebAssembly.Hosting;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.Extensions.Logging;\nusing Smart.Blazor;\n\nnamespace BlazorApp\n{\n public class Program\n {\n\tpublic static async Task Main(string[] args)\n\t{\n\t var builder = WebAssemblyHostBuilder.CreateDefault(args);\n\t builder.RootComponents.Add\u003cApp\u003e(\"#app\");\n\n\t builder.Services.AddSmart();\n\t builder.Services.AddScoped(sp =\u003e new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });\n\n\t await builder.Build().RunAsync();\n\t}\n }\n}\n```\n\t\t\t\n#### \n\n#### Blazor Server\n\nThis 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.\n\n```csharp\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Components;\nusing Microsoft.AspNetCore.Hosting;\nusing Microsoft.AspNetCore.HttpsPolicy;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.Extensions.Hosting;\nusing BlazorApp.Data;\nusing Smart.Blazor;\n\nnamespace BlazorApp\n{\n public class Startup\n {\n public Startup(IConfiguration configuration)\n {\n Configuration = configuration;\n }\n\n public IConfiguration Configuration { get; }\n\n // This method gets called by the runtime. Use this method to add services to the container.\n // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940\n public void ConfigureServices(IServiceCollection services)\n {\n services.AddRazorPages();\n services.AddServerSideBlazor();\n services.AddSingleton\u003cWeatherForecastService\u003e();\n\t services.AddSmart();\n\t }\n\n // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n {\n if (env.IsDevelopment())\n {\n app.UseDeveloperExceptionPage();\n }\n else\n {\n app.UseExceptionHandler(\"/Error\");\n // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.\n app.UseHsts();\n }\n\n app.UseHttpsRedirection();\n app.UseStaticFiles();\n\n app.UseRouting();\n\n app.UseEndpoints(endpoints =\u003e\n {\n endpoints.MapBlazorHub();\n endpoints.MapFallbackToPage(\"/_Host\");\n });\n }\n }\n}\n```\t\t\t\t\t\t\t\n### \n\n### Using Smart.Blazor Components\n \nUse any Smart Blazor component by typing its tag name in a Blazor page e.g. \u003cButton\u003eClick Me\u003c/Button\u003e If you are using client-side WebAssembly Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element): \u003cBlazorLinkOnBuild\u003efalse\u003c/BlazorLinkOnBuild\u003e\n\n### \n\n### Data binding a property\n```csharp\n\u003cInput Value=\"@text\"\u003e\u003c/Input\u003e\n@code {\n\tstring text = \" Hi from Smart!\";\n}\n```\n\t\t\n### Events Handing\n```csharp\n\u003cCalendar id=\"calendar\" OnChange=@OnChange\u003e\u003c/Calendar\u003e\n\u003cdiv class=\"options\"\u003e\n\t\u003cdiv class=\"caption\"\u003eEvents\u003c/div\u003e\n\t\u003cdiv class=\"option\" id=\"log\"\u003e\n\t@eventLog\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n@code {\n\tprivate string eventLog;\n\n\tprivate void OnChange(Event eventObj)\n\t{\n\t\tCalendarChangeEventDetail detail = eventObj\\[\" Detail \u0026 quot;\\];\n\n\t\teventLog = detail.Value\\[0\\].ToString();\n\t}\n}\n```\nAlternatively you can do that:\n```csharp\n@page \"/calendar\"\n\n\u003cCalendar OnReady=\"OnReady\" id=\"calendar\" \u003e\u003c/Calendar\u003e\n\u003cdiv class=\"options\"\u003e\n\t\u003cdiv class=\"caption\"\u003eEvents\u003c/div\u003e\n\t\u003cdiv class=\"option\" id=\"log\"\u003e\n\t@eventLog\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n\n@code {\n\tprivate string eventLog;\n\n\tprivate void OnReady(Calendar calendar)\n\t{\n\t\tcalendar.Changed += delegate (object sender, CalendarChangedEventArgs args)\n\t\t{\n\t\t\tstring value = args.Value\\[0\\].ToString();\n\t\t\teventLog = value;\n\t\t\tStateHasChanged();\n\t\t};\n\t}\n}\n```\n\n`OnReady` callback is called for each Blazor component, after it is initialized and rendered.\n\n### Blazor WebAssembly (blazorwasm) Example\n\n* Create a blazor application:\n\n```console\ndotnet new blazorwasm -o BlazorApp\n```\n\n* Navigate to the application:\n\n```console\ncd BlazorApp\n```\n\n* Add the Smart.Blazor package:\n\n```console\ndotnet add package Smart.Blazor\n```\n\n* Open _Imports.razor and add the following at the bottom:\n\n```csharp\n@using Smart.Blazor\n```\n\n* Open wwwroot/index.html and add the needed styles and scripts. \n```csharp\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\n\u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /\u003e\n \u003ctitle\u003eBlazor WebAssembly App\u003c/title\u003e\n \u003cbase href=\"/\" /\u003e\n \u003clink href=\"css/bootstrap/bootstrap.min.css\" rel=\"stylesheet\" /\u003e\n \u003clink href=\"css/app.css\" rel=\"stylesheet\" /\u003e\n \u003clink href=\"_framework/scoped.styles.css\" rel=\"stylesheet\" /\u003e\n \u003clink href=\"_content/Smart.Blazor/css/smart.default.css\" rel=\"stylesheet\" /\u003e\n \u003cscript src=\"_content/Smart.Blazor/js/smart.blazor.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"_content/Smart.Blazor/js/smart.elements.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n \u003cdiv id=\"app\"\u003eLoading...\u003c/div\u003e\n\n \u003cdiv id=\"blazor-error-ui\"\u003e\n\tAn unhandled error has occurred.\n\t\u003ca href=\"\" class=\"reload\"\u003eReload\u003c/a\u003e\n\t\u003ca class=\"dismiss\"\u003e🗙\u003c/a\u003e\n \u003c/div\u003e\n \u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n* Open Pages/Index.razor and replace the code as follows:\n```csharp\n@page \"/\"\n\n@inject HttpClient Http\n\n\u003ch1\u003eWeather forecast\u003c/h1\u003e\n\n\u003cp\u003eThis component demonstrates fetching data from the server.\u003c/p\u003e\n\n@if (forecasts == null)\n{\n\t\u003cp\u003e\u003cem\u003eLoading...\u003c/em\u003e\u003c/p\u003e\n}\nelse\n{\n\t\u003cTable Selection=\"true\" SortMode=\"TableSortMode.One\" class=\"table\"\u003e\n\t\t\u003ctable\u003e\n\t\t\t\u003cthead\u003e\n\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003eDate\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eTemp. (C)\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eTemp. (F)\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eSummary\u003c/th\u003e\n\t\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/thead\u003e\n\t\t\t\u003ctbody\u003e\n\t\t\t\t@foreach (var forecast in forecasts)\n\t\t\t\t{\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.Date.ToShortDateString()\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.TemperatureC\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.TemperatureF\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.Summary\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t}\n\t\t\t\u003c/tbody\u003e\n\t\t\u003c/table\u003e\n\t\u003c/Table\u003e\n}\n\n@code {\n\tprivate WeatherForecast[] forecasts;\n\n\tprotected override async Task OnInitializedAsync()\n\t{\n\t\tforecasts = await Http.GetFromJsonAsync\u003cWeatherForecast[]\u003e(\"sample-data/weather.json\");\n\t}\n\n\tpublic class WeatherForecast\n\t{\n\t\tpublic DateTime Date { get; set; }\n\n\t\tpublic int TemperatureC { get; set; }\n\n\t\tpublic string Summary { get; set; }\n\n\t\tpublic int TemperatureF =\u003e 32 + (int)(TemperatureC / 0.5556);\n\t}\n}\n```\n\n* Edit Program.cs\n\n```csharp\nusing System;\nusing System.Net.Http;\nusing System.Collections.Generic;\nusing System.Threading.Tasks;\nusing System.Text;\nusing Microsoft.AspNetCore.Components.WebAssembly.Hosting;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.Extensions.Logging;\nusing Smart.Blazor;\n\nnamespace BlazorApp\n{\n public class Program\n {\n\tpublic static async Task Main(string[] args)\n\t{\n\t var builder = WebAssemblyHostBuilder.CreateDefault(args);\n\t builder.RootComponents.Add\u003cApp\u003e(\"#app\");\n\n\t builder.Services.AddSmart();\n\t builder.Services.AddScoped(sp =\u003e new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });\n\n\t await builder.Build().RunAsync();\n\t}\n }\n}\n```\n\n* Start the app and check the result\n```console\ndotnet watch run\n```\n\nWait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.\n\nOnce you get to the following page, you have successfully run your first Blazor WebAssembly app using Smart UI for Blazor Components!\n\n\n* Output\n\n\n\n### Blazor Server (blazorserver) Example\n\n\n* Create a blazor application:\n\n```console\ndotnet new blazorserver -o BlazorServerApp\n```\n\n* Navigate to the application:\n\n```console\ncd BlazorServerApp\n```\n\n* Add the Smart.Blazor package:\n\n```console\ndotnet add package Smart.Blazor\n```\n\n* Open _Imports.razor and add the following at the bottom:\n\n\n```csharp\n@using Smart.Blazor\n```\n\n* Open Pages/_Host.cshtml and add the needed styles and scripts. \n```csharp\n@page \"/\"\n@namespace smart_blazor_app.Pages\n@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers\n@{\n Layout = null;\n}\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"utf-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n \u003ctitle\u003esmart-blazor-app\u003c/title\u003e\n \u003cbase href=\"~/\" /\u003e\n \u003clink rel=\"stylesheet\" href=\"css/bootstrap/bootstrap.min.css\" /\u003e\n \u003clink href=\"css/site.css\" rel=\"stylesheet\" /\u003e\n \u003clink href=\"_content/smart-blazor-app/_framework/scoped.styles.css\" rel=\"stylesheet\" /\u003e\n \u003clink href=\"_content/Smart.Blazor/css/smart.default.css\" rel=\"stylesheet\" /\u003e\n \u003cscript src=\"_content/Smart.Blazor/js/smart.blazor.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"_content/Smart.Blazor/js/smart.elements.js\"\u003e\u003c/script\u003e\n\t\n\u003c/head\u003e\n\u003cbody\u003e\n \u003ccomponent type=\"typeof(App)\" render-mode=\"ServerPrerendered\" /\u003e\n\n \u003cdiv id=\"blazor-error-ui\"\u003e\n \u003cenvironment include=\"Staging,Production\"\u003e\n An error has occurred. This application may no longer respond until reloaded.\n \u003c/environment\u003e\n \u003cenvironment include=\"Development\"\u003e\n An unhandled exception has occurred. See browser dev tools for details.\n \u003c/environment\u003e\n \u003ca href=\"\" class=\"reload\"\u003eReload\u003c/a\u003e\n \u003ca class=\"dismiss\"\u003e🗙\u003c/a\u003e\n \u003c/div\u003e\n\n \u003cscript src=\"_framework/blazor.server.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n* Open Pages/Index.razor and replace the code as follows:\n```csharp\n@page \"/\"\n\n@inject HttpClient Http\n\n\u003ch1\u003eWeather forecast\u003c/h1\u003e\n\n\u003cp\u003eThis component demonstrates fetching data from the server.\u003c/p\u003e\n\n@if (forecasts == null)\n{\n\t\u003cp\u003e\u003cem\u003eLoading...\u003c/em\u003e\u003c/p\u003e\n}\nelse\n{\n\t\u003cTable Selection=\"true\" SortMode=\"TableSortMode.One\" class=\"table\"\u003e\n\t\t\u003ctable\u003e\n\t\t\t\u003cthead\u003e\n\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003eDate\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eTemp. (C)\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eTemp. (F)\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003eSummary\u003c/th\u003e\n\t\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/thead\u003e\n\t\t\t\u003ctbody\u003e\n\t\t\t\t@foreach (var forecast in forecasts)\n\t\t\t\t{\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.Date.ToShortDateString()\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.TemperatureC\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.TemperatureF\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e@forecast.Summary\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t}\n\t\t\t\u003c/tbody\u003e\n\t\t\u003c/table\u003e\n\t\u003c/Table\u003e\n}\n\n@code {\n\tprivate WeatherForecast[] forecasts;\n\n\tprotected override async Task OnInitializedAsync()\n\t{\n\t\tforecasts = await Http.GetFromJsonAsync\u003cWeatherForecast[]\u003e(\"sample-data/weather.json\");\n\t}\n\n\tpublic class WeatherForecast\n\t{\n\t\tpublic DateTime Date { get; set; }\n\n\t\tpublic int TemperatureC { get; set; }\n\n\t\tpublic string Summary { get; set; }\n\n\t\tpublic int TemperatureF =\u003e 32 + (int)(TemperatureC / 0.5556);\n\t}\n}\n```\n\n* Edit Startup.cs\n\n You will need to add ```services.AddSmart();``` in the ConfigureServices method and ```using Smart.Blazor;``` in the using statements.\n\n```csharp\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing Microsoft.AspNetCore.Builder;\nusing Microsoft.AspNetCore.Components;\nusing Microsoft.AspNetCore.Hosting;\nusing Microsoft.AspNetCore.HttpsPolicy;\nusing Microsoft.Extensions.Configuration;\nusing Microsoft.Extensions.DependencyInjection;\nusing Microsoft.Extensions.Hosting;\nusing BlazorServerApp.Data;\nusing Smart.Blazor;\n\nnamespace BlazorServerApp\n{\n public class Startup\n {\n public Startup(IConfiguration configuration)\n {\n Configuration = configuration;\n }\n\n public IConfiguration Configuration { get; }\n\n // This method gets called by the runtime. Use this method to add services to the container.\n // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940\n public void ConfigureServices(IServiceCollection services)\n {\n services.AddRazorPages();\n services.AddServerSideBlazor();\n services.AddSingleton\u003cWeatherForecastService\u003e();\n\t services.AddSmart();\n\t }\n\n // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\n public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n {\n if (env.IsDevelopment())\n {\n app.UseDeveloperExceptionPage();\n }\n else\n {\n app.UseExceptionHandler(\"/Error\");\n // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.\n app.UseHsts();\n }\n\n app.UseHttpsRedirection();\n app.UseStaticFiles();\n\n app.UseRouting();\n\n app.UseEndpoints(endpoints =\u003e\n {\n endpoints.MapBlazorHub();\n endpoints.MapFallbackToPage(\"/_Host\");\n });\n }\n }\n}\n```\n* Start the app and check the result\n```console\ndotnet watch run\n```\n\nWait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.\n\nOnce you get to the following page, you have successfully run your first Blazor Server app using Smart UI for Blazor Components!\n\n\n* Output\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlelements%2Fsmart-blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtmlelements%2Fsmart-blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlelements%2Fsmart-blazor/lists"}