Getting started with Blazor Button component
This section briefly explains about how to include Button Component in your Blazor server-side application. You can refer Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 page page for the introduction and configuring the common specifications.
To get start quickly with Button Component using Blazor, you can check on this video:
Importing Syncfusion Blazor component in the application
- Install the Syncfusion.Blazor NuGet package to the application by using the
NuGet Package Manager. - You can add the client-side style resources through CDN or from NuGet package in the
<head>element of the~/Pages/_Host.cshtmlpage.
Please ensure to check the Include prerelease option.
<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
@*<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />*@
</head>For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.
<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>Adding component package to the application
Open /_Imports.razor file and import the Syncfusion.Blazor.Buttons package.
@using Syncfusion.Blazor.ButtonsAdd SyncfusionBlazor service in Startup.cs
Open the Startup.cs file and add services required by Syncfusion components. Add services.AddSyncfusionBlazor() method in the ConfigureServices function as follows.
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.
<head>
<environment include="Development">
<script src="https://cdn.syncfusion.com/blazor/18.4.42/syncfusion-blazor.min.js">
</script>
</environment>
</head>Adding component package to the application
Open /_Imports.razor file and import the Syncfusion.Blazor.Buttons packages otherwise import these packages in the individual razor pages.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.ButtonsAdding Button component to the application
Now, add the Syncfusion Blazor Button component in razor page in the Pages folder. For example the Button component is added in the ~/Pages/Index.razor page.
<SfButton>Button</SfButton>Run the application
After successful compilation of your application, simply press F5 to run the application. The Blazor Button component will render in the web browser as shown below
