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:
NuGet Package Manager
.<head>
element of the ~/Pages/_Host.cshtml
page.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>
Open /_Imports.razor file
and import the Syncfusion.Blazor.Buttons package.
@using Syncfusion.Blazor.Buttons
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>
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.Buttons
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>
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