|
1 | 1 | --- |
2 | 2 | layout: post |
3 | | -title: Code Snippets - Blazor Extension Visual Studio Code | Syncfusion |
4 | | -description: Learn here all about how to use code snippet utility of Syncfusion Blazor Extension for Visual Studio Code and much more. |
| 3 | +title: Code snippets for the Syncfusion Blazor extension | Syncfusion |
| 4 | +description: Learn here about that how to use the code snippet utilities in the Syncfusion Blazor extensions for the Visual Studio Code. Explore here to more details. |
5 | 5 | platform: Blazor |
6 | | -component: Common |
| 6 | +control: Common |
7 | 7 | documentation: ug |
8 | 8 | --- |
9 | 9 |
|
10 | 10 | # Add Syncfusion® Blazor component in the Blazor application |
11 | 11 |
|
12 | | -The Syncfusion® Blazor code snippet utility for Visual Studio Code includes snippets for inserting a Syncfusion® Blazor component with various features into the Blazor Application's Razor code editor. |
| 12 | +The Syncfusion<sup style="font-size:70%">®</sup> Blazor code snippet utility for Visual Studio Code provides snippets to insert Syncfusion<sup style="font-size:70%">®</sup> Blazor components with common features into a Blazor application's Razor code editor. |
13 | 13 |
|
14 | | - N> The Syncfusion® Blazor code snippet is available from Essential Studio® 2021 Volume 1 (`v19.1.0.54`). |
| 14 | + N> The Syncfusion<sup style="font-size:70%">®</sup> Blazor code snippet feature is available from Essential Studio<sup style="font-size:70%">®</sup> 2021 Volume 1 (`v19.1.0.54`). |
15 | 15 |
|
16 | 16 | ## Add a Syncfusion® Blazor component |
17 | 17 |
|
18 | | -The instructions below guide you the process of using the Syncfusion® Blazor code snippet in your Blazor application. |
| 18 | +The following steps describe how to use the Syncfusion<sup style="font-size:70%">®</sup> Blazor code snippets in a Blazor application. |
19 | 19 |
|
20 | | -1. In Visual Studio Code, open an existing Blazor Application or create a new Blazor Application. |
| 20 | +1. In Visual Studio Code, open an existing Blazor application or create a new one. |
21 | 21 |
|
22 | | -2. Open the razor file that you need and place the cursor in required place where you want to add Syncfusion® component. |
| 22 | +2. Open the required Razor file and place the cursor where the Syncfusion<sup style="font-size:70%">®</sup> component should be inserted. |
23 | 23 |
|
24 | | -3. You can find the Syncfusion® Blazor component with the various features by typing the **sf** word in the format shown below. |
| 24 | +3. Type the prefix **sf** and use the following format to discover component snippets and features. |
25 | 25 |
|
26 | 26 | ``` |
27 | 27 | sf<Syncfusion component name>-<Syncfusion component feature> |
28 | | - For Example, sfgrid-grouping |
| 28 | + For example, sfgrid-grouping |
29 | 29 | ``` |
30 | | -4. Choose the Syncfusion® component and click the **Enter** or **Tab** key, the Syncfusion® Blazor component will be added in the razor file. |
| 30 | +4. Select the desired Syncfusion component and press **Enter** or **Tab**. The corresponding component markup is inserted into the Razor file. |
31 | 31 |
|
32 | | -  |
| 32 | +  |
33 | 33 |
|
34 | | -5. After adding the Syncfusion® Blazor component to the razor file, use the tab key to fill in the required values to render the component with data. You can find the comment section in the code snippet to see what values are required. |
| 34 | +5. After inserting the Syncfusion<sup style="font-size:70%">®</sup> Blazor component, use the Tab key to navigate placeholders and provide the required values. Review the inline comments in the snippet to identify which values are required. |
35 | 35 |
|
36 | | -  |
| 36 | +  |
37 | 37 |
|
38 | | -6. You can also find the Syncfusion® help link at the top of the added snippet to learn more about the new Syncfusion® Blazor component feature. |
| 38 | +6. A Syncfusion<sup style="font-size:70%">®</sup> help link is included at the top of the snippet to learn more about the inserted component or feature. |
39 | 39 |
|
40 | | -  |
| 40 | +  |
41 | 41 |
|
42 | 42 | ## Configure Blazor application with Syncfusion |
43 | 43 |
|
44 | | -The Syncfusion® Blazor snippet simply inserts the code into the razor file. You must configure the Blazor application with Syncfusion® by installing the Syncfusion® Blazor NuGet package, namespace, themes, and registering the Syncfusion® Blazor Service. To configure, follow the steps below: |
| 44 | +The Syncfusion<sup style="font-size:70%">®</sup> Blazor snippet only inserts code into the Razor file. Configure the Blazor application by adding the required NuGet packages, namespaces, themes, and registering the Syncfusion<sup style="font-size:70%">®</sup> Blazor service. Follow these steps: |
45 | 45 |
|
46 | 46 | 1. Open the Blazor application file and manually add the required Syncfusion® Blazor individual NuGet package(s) for the Syncfusion® Blazor components as a package reference. Refer to [this section](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages) to learn about the advantages of the individual NuGet packages. This NuGet package will be automatically restored when building the application. |
47 | 47 |
|
48 | 48 |  |
49 | 49 |
|
50 | 50 | N> Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion® provides [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for our Syncfusion® Blazor components. We highly recommend this new standard for your Blazor production applications. |
51 | 51 |
|
52 | | -2. To render the Syncfusion® components in your application, open the **~/_Imports.razor** file and add the required Syncfusion® Blazor namespace entries. |
| 52 | +2. To render Syncfusion<sup style="font-size:70%">®</sup> components, open **~/_Imports.razor** and add the required Syncfusion<sup style="font-size:70%">®</sup> Blazor namespace entries. |
53 | 53 |
|
54 | 54 |  |
55 | 55 |
|
56 | | -3. Add the Syncfusion® Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes) in the `<head>` element of the **~/Components/App.razor** page for Web App and `<head>` element of the **~/Pages/_Host.html** page for server application and **~/wwwroot/index.html** page for a client application. |
| 56 | +3. Add a Syncfusion<sup style="font-size:70%">®</sup> Blazor [theme](https://blazor.syncfusion.com/documentation/appearance/themes) in the `<head>` element of **~/Components/App.razor** for Blazor Web App, in **~/Pages/_Host.cshtml** for Blazor Server, and in **~/wwwroot/index.html** for a Blazor WebAssembly (client) application. |
57 | 57 |
|
58 | 58 |  |
59 | 59 |
|
60 | | -4. Open the **~/Program.cs** file for Web App and server application and client application then register the Syncfusion® Blazor Service. |
| 60 | +4. Open the relevant **~/Program.cs** file(s) for Web App and server application and client application and register the Syncfusion<sup style="font-size:70%">®</sup> Blazor service. |
61 | 61 |
|
62 | | -If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. |
| 62 | +If the Blazor Web App uses an interactive render mode of `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">®</sup> Blazor service in both **~/Program.cs** files of the Blazor Web App. |
63 | 63 |
|
64 | | -  |
| 64 | + |
65 | 65 |
|
66 | 66 | 5. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. |
0 commit comments