From e7aa9fe1be28b6044c47a83c84cded90891190ed Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 4 Nov 2025 18:38:53 +0530 Subject: [PATCH 1/7] Updated the Blazor common UG documentation --- blazor/getting-started/maui-blazor-app.md | 54 +++++++++---------- blazor/smart-ai-solutions/ai/azure-openai.md | 14 ++--- .../ai/custom-ai-service.md | 12 ++--- blazor/smart-ai-solutions/ai/ollama.md | 35 ++++++------ blazor/smart-ai-solutions/ai/openAI.md | 36 ++++++------- blazor/smart-ai-solutions/ai/overview.md | 16 +++--- 6 files changed, 85 insertions(+), 82 deletions(-) diff --git a/blazor/getting-started/maui-blazor-app.md b/blazor/getting-started/maui-blazor-app.md index 9fec95a970..5f28e36578 100644 --- a/blazor/getting-started/maui-blazor-app.md +++ b/blazor/getting-started/maui-blazor-app.md @@ -11,34 +11,34 @@ documentation: ug This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI Blazor) app with Syncfusion® Blazor components. -To get start quickly with Blazor MAUI App, you can check on this video. +To get started quickly with a .NET MAUI Blazor app, review the following video. {% youtube "youtube:https://www.youtube.com/watch?v=wnceZx-Xezs" %} ## What is .NET MAUI Blazor App? -.NET MAUI Blazor App is a .NET MAUI App where `Blazor Web App` is hosted in .NET MAUI app using `BlazorWebView` control. This enable a Blazor Web App to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of .NET MAUI app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all the platforms supported by .NET MAUI. +A .NET MAUI Blazor App is a .NET MAUI application where a Blazor Web App is hosted in the .NET MAUI app using the `BlazorWebView` control. This enables a Blazor Web App to integrate with platform features and UI controls. The `BlazorWebView` can be added to any page of a .NET MAUI app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all platforms supported by .NET MAUI. -Visual Studio provides **.NET MAUI Blazor app** template to create .NET MAUI Blazor Apps. +Visual Studio provides the **.NET MAUI Blazor App** template to create .NET MAUI Blazor Apps. ## Prerequisites * .NET SDK 8.0 or above -* The latest preview of Visual Studio 2022 17.1 or above, with required workloads: +* Visual Studio 2022 17.1 or above with the required workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor App in Visual Studio -You can create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0) +Create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). ## BlazorWebView in .NET MAUI Blazor App -The above steps creates a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. +The above steps create a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. -In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. +In `MainPage.xaml`, the `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -59,11 +59,11 @@ In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the B {% endhighlight %} {% endtabs %} -For more details refer [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. +For more details, refer to the [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of your MAUI Blazor App. +Next, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of the MAUI Blazor App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 3" %} @@ -111,11 +111,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes in a Blazor application. For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Home.razor` page under the `~/Components/Pages` folder. +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added to the `~/Home.razor` page under the `~/Components/Pages` folder. {% tabs %} {% highlight razor %} @@ -127,22 +127,22 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the app. -Before running the sample, make sure the mode is `Windows Machine`. +In the Visual Studio toolbar, select **Windows Machine** to build and run the app. +Ensure the run profile is set to `Windows Machine` before starting the app. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components). ## How to use images in .NET MAUI Blazor Application -Add the images in the images in the `wwwroot` folder of the application and refer it using `img` tag in Blazor App. +Add images to the `wwwroot` folder of the application and reference them using the `img` tag in the Blazor App. -In the below code images are added under `images` folder in `wwwroot` folder. +In the following example, images are added under the `images` folder in the `wwwroot` folder. {% tabs %} {% highlight razor %} @@ -158,7 +158,7 @@ In the below code images are added under `images` folder in `wwwroot` folder. ### How to solve deployment errors in Windows? -If you get error dialog like "There were deployment errors", Enable developer mode. For more details refer [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). +If the error dialog “There were deployment errors” appears, enable Developer Mode. For more details, refer to [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). ![Enable developer mode in system settings](images/maui/enable-developer-mode.png) @@ -166,11 +166,11 @@ If you get error dialog like "There were deployment errors", Enable developer mo ### How to solve deployment errors in iOS? -In iOS code is statically compiled ahead of time, so, configure Syncfusion® Blazor assemblies in `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploy on a real device. +In iOS, code is statically compiled ahead of time. Configure Syncfusion® Blazor assemblies in the `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploying to a real device. -Below are possible errors if `MtouchExtraArgs` tag is not configured, -1. App won't load on real device with error "An unhandled error has occurred" after you compile in Release mode with Visual Studio and deploy to real device. -2. AOT related failures like [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416) +Possible errors if the `MtouchExtraArgs` tag is not configured: +1. The app does not load on a real device with the error “An unhandled error has occurred” after compiling in Release mode with Visual Studio and deploying to a real device. +2. AOT-related failures such as [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416) ``` @@ -186,9 +186,9 @@ Reference: ### How to solve "The project doesn't know how to run the profile Windows Machine" while running MAUI Blazor App? -* This issue has been fixed in most recent release of Visual Studio. For more details refer [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). +* This issue has been addressed in a recent release of Visual Studio. For details, see the discussion [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). -* You can also fix this error by installing [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17). +* Alternatively, install [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17) to resolve this error. ## See also diff --git a/blazor/smart-ai-solutions/ai/azure-openai.md b/blazor/smart-ai-solutions/ai/azure-openai.md index 81b886feb1..65c002cb39 100644 --- a/blazor/smart-ai-solutions/ai/azure-openai.md +++ b/blazor/smart-ai-solutions/ai/azure-openai.md @@ -1,7 +1,7 @@ --- layout: post title: Azure OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. +description: Learn here about how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. platform: Blazor control: AI Integration documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Azure OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). ## Prerequisites -To integrate Azure OpenAI with a Blazor WebApp Server, ensure the following: +To integrate Azure OpenAI with a Blazor Web App (Server), ensure the following: - The following NuGet packages are installed: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -28,13 +28,13 @@ Install-Package Azure.AI.OpenAI - An [Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) is deployed to obtain `apiKey`, `deploymentName`, and `endpoint` values. - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Credentials are stored securely using Azure Key Vault or environment variables (see [Microsoft’s guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Credentials are stored securely using Azure Key Vault or environment variables (see the [Microsoft guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure Azure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure Azure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -370,8 +370,8 @@ This example illustrates how the Syncfusion Blazor AI library integrates with Az - **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components integrate with the AI service for dynamic query processing. ## Error Handling -- **Invalid Credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. -- **Rate Limits**: Azure OpenAI usage may be limited based on your subscription. Check [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. +- **Invalid credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. +- **Rate limits**: Azure OpenAI usage may be limited based on your subscription. See the [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. ## See Also - [Syncfusion Blazor QueryBuilder Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started-webapp) diff --git a/blazor/smart-ai-solutions/ai/custom-ai-service.md b/blazor/smart-ai-solutions/ai/custom-ai-service.md index 46d8081c53..c61cb673c5 100644 --- a/blazor/smart-ai-solutions/ai/custom-ai-service.md +++ b/blazor/smart-ai-solutions/ai/custom-ai-service.md @@ -95,16 +95,16 @@ builder.Services.AddSingleton(); This example illustrates how the Syncfusion Blazor AI library integrates with a custom AI service (DeepSeek): 1. **Setup**: Implement and register the custom AI service in `Program.cs` using secure credentials. -2. **Component Integration**: Inject `IChatInferenceService` to process AI requests within Syncfusion components like Smart TextArea. +2. **Component integration**: Inject `IChatInferenceService` into components (for example, Smart TextArea or other Syncfusion controls) to send AI prompts and receive responses. 3. **Request Formatting**: Convert Syncfusion AI parameters into the custom provider’s API format (e.g., DeepSeek’s JSON structure). 4. **Response Processing**: Parse the provider’s response and update the component (e.g., displaying text suggestions). ### Key Components -- **IChatInferenceService**: Interface for interacting with custom AI providers. -- **AIServiceCredentials**: Syncfusion class for managing API keys, endpoints, and model names. -- **GenerateResponseAsync**: Sends asynchronous requests to the custom AI provider and retrieves responses. +- `IChatInferenceService`: Interface used by Syncfusion Blazor AI to interact with custom AI providers through a unified contract. +- `AIServiceCredentials`: Class for managing API keys, endpoints, and model names through configuration. +- `GenerateResponseAsync`: Method that sends asynchronous requests to the custom AI provider and retrieves responses. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and stored securely in environment variables or a configuration service. -- **Rate Limits**: Check the custom AI provider’s documentation (e.g., [DeepSeek API docs](https://platform.deepseek.com)) for rate limit details. +- **Invalid API key**: Verify the API key and scope, and load it from configuration or a secure secret store. +- **Rate limits**: Review provider-specific rate limits and implement backoff or retries where appropriate (see the provider’s documentation, such as the [DeepSeek API docs](https://platform.deepseek.com)). - **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation. \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/ollama.md b/blazor/smart-ai-solutions/ai/ollama.md index 83f8cecf19..ffc5972945 100644 --- a/blazor/smart-ai-solutions/ai/ollama.md +++ b/blazor/smart-ai-solutions/ai/ollama.md @@ -1,7 +1,7 @@ --- layout: post title: Ollama Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. +description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Ollama Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent-child relationships). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent–child relationships). ## Prerequisites @@ -24,13 +24,13 @@ Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -- [Ollama](https://ollama.com/docs) is installed on your local system (no virtual machines required). -- An Ollama model (e.g., `llama2`) is downloaded using the command: +- [Ollama](https://ollama.com/docs) is installed on the local system (no virtual machines required). +- An Ollama model (for example, `llama2`) is downloaded using the command: ```bash ollama run llama2 ``` - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Sufficient hardware resources (e.g., CPU/GPU, memory) are available for local model performance. +- Sufficient hardware resources (for example, CPU/GPU and memory) are available for local model performance. ## Configuration Steps @@ -53,6 +53,10 @@ builder.Services.AddChatClient(chatClient); builder.Services.AddSingleton(); ``` +- The example targets the default Ollama endpoint at http://localhost:11434. If Ollama runs on a different host or port, update the base URL accordingly. +- Ensure the registered client implements or adapts to `Microsoft.Extensions.AI.IChatClient`. If using a third‑party client, provide an adapter that conforms to `IChatClient` so the dependency injection registration succeeds. +- `SyncfusionAIService` provides an implementation of `IChatInferenceService` that integrates with the configured chat client. + ## Smart Data Restructuring with Ollama and TreeGrid This example demonstrates using the Syncfusion Blazor AI library with Ollama to perform intelligent data restructuring in a Syncfusion Blazor TreeGrid component. The application organizes hierarchical data by leveraging Ollama to assign appropriate `ParentId` values based on `CategoryName` relationships, updating the TreeGrid to reflect the corrected hierarchical structure. @@ -125,7 +129,7 @@ await builder.Build().RunAsync(); {% endtabs %} **For Server Render Mode**: -If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor Service should be registered within that `~/Program.cs` file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor service should be registered within that `~/Program.cs` file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -285,22 +289,21 @@ namespace OllamaExample.Components.Pages This example illustrates how the Syncfusion Blazor AI library integrates with Ollama to reorganize hierarchical data in a TreeGrid: -1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (e.g., `llama2`). -2. **Component Integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. -3. **Prompt Engineering**: Craft a detailed prompt to instruct Ollama to analyze `CategoryName` relationships and assign appropriate `ParentId` values. -4. **Response Processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. +1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (for example, `llama2`). +2. **Component integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. +3. **Prompt engineering**: Provide instructions for analyzing `CategoryName` relationships and assigning appropriate `ParentId` values. +4. **Response processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. ### Key Components -- **IChatInferenceService**: Injected service for interacting with Ollama models. +- **IChatInferenceService**: Injected service for interacting with Ollama models via the configured chat client. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to Ollama and retrieves responses. - **UI Components**: Syncfusion TreeGrid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Model Not Found**: Ensure the specified Ollama model (e.g., `llama2`) is downloaded and available. -- **JSON Parsing Errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. -- **Resource Limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. +- **Model not found**: Ensure the specified Ollama model (for example, `llama2`) is downloaded and available. +- **JSON parsing errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. +- **Resource limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. ## See Also -- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) - +- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/openAI.md b/blazor/smart-ai-solutions/ai/openAI.md index b5ea39ba0a..6adb831850 100644 --- a/blazor/smart-ai-solutions/ai/openAI.md +++ b/blazor/smart-ai-solutions/ai/openAI.md @@ -1,7 +1,7 @@ --- layout: post title: OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, and practical examples. +description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, practical examples. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,12 +9,12 @@ documentation: ug # OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). ## Prerequisites -To integrate OpenAI with a Blazor WebApp Server, ensure the following: -- The following NuGet packages are installed: +To integrate OpenAI with a Blazor Web App (Server), ensure the following: +- Install these NuGet packages: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -25,15 +25,15 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- An [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) is obtained from the OpenAI platform. -- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- The API key is stored securely using environment variables or user secrets (see [Microsoft’s guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Obtain an [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) from the OpenAI platform. +- Ensure the [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. +- Store the API key securely using environment variables or user secrets (see the [Microsoft guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -54,7 +54,7 @@ builder.Services.AddSingleton(); ## Anomaly Detection with OpenAI and Syncfusion® Blazor Grid -This example demonstrates using the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with inconsistent production rates based on operational factors, updating the grid with anomaly descriptions and visual styling. +This example uses the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate). OpenAI analyzes operational factors to identify rows with inconsistent production rates and updates the grid with anomaly descriptions and visual styling. ### Setup Prerequisites - Install the following NuGet packages: @@ -354,23 +354,23 @@ namespace OpenAIExample.Components.Pages ## How It Works -This example illustrates how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: +This example shows how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: -1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (e.g., `gpt-4`). -2. **Component Integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. -3. **Prompt Engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (e.g., inconsistent ProductionRate relative to Temperature or MotorSpeed). -4. **Response Processing**: Parse OpenAI’s JSON response to update the Grid with anomaly descriptions and apply visual styling. +1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (for example, `gpt-4`). +2. **Component integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. +3. **Prompt engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (for example, inconsistent `ProductionRate` relative to `Temperature` or `MotorSpeed`). +4. **Response processing**: Parse OpenAI’s JSON response to update the grid with anomaly descriptions and apply visual styling. ### Key Components - **IChatInferenceService**: Injected service for interacting with OpenAI models. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to OpenAI and retrieves responses. -- **UI Components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. +- **UI components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. -- **Rate Limits**: OpenAI API usage may be limited based on your plan. -- **Network Issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. +- **Invalid API key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. +- **Rate limits**: OpenAI API usage may be limited based on the plan. +- **Network issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. ## See Also - [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/overview.md b/blazor/smart-ai-solutions/ai/overview.md index fd184976d4..87a62f05f5 100644 --- a/blazor/smart-ai-solutions/ai/overview.md +++ b/blazor/smart-ai-solutions/ai/overview.md @@ -1,20 +1,20 @@ --- layout: post title: Syncfusion Blazor AI Library Overview | Syncfusion -description: Discover the Syncfusion Blazor AI library, its key features, supported AI providers, and how it powers AI-driven features in Blazor applications. +description: Learn her about discover the Syncfusion Blazor AI library, its key features, supported AI providers, how it powers AI-driven features in Blazor applications. platform: Blazor control: AI Integration documentation: ug --- # Syncfusion® Blazor AI Library Overview -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling seamless connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. This library forms the backbone for Syncfusion’s intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), empowering developers to build AI-enhanced applications. It offers text completion capabilities, delivering real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. The library powers Syncfusion intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling AI‑enhanced applications. It offers text completion capabilities for real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. ## Prerequisites To use the Syncfusion Blazor AI library, ensure the following: -- Install the `Syncfusion.Blazor.AI` NuGet package. -- Obtain API keys for your chosen AI provider (e.g., OpenAI or Azure OpenAI). -- Configure the Blazor application to support HTTP requests for cloud-based AI services or local setup for Ollama. +- Install the `Syncfusion.Blazor.AI` NuGet package +- Obtain API keys for the chosen AI provider (for example, OpenAI, Azure OpenAI, or Ollama) +- Configure HTTP access for cloud-based providers or local setup for Ollama ## Key Features - **Multi-Provider AI Support**: @@ -36,6 +36,6 @@ To use the Syncfusion Blazor AI library, ensure the following: - Cloud-based AI services may have rate limits or require stable internet connectivity. - Local models like Ollama demand sufficient hardware resources for optimal performance. -## See Also -- [Smart TextArea Documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) -- [Smart Paste Button Documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) \ No newline at end of file +## See also +- [Smart TextArea documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) +- [Smart Paste Button documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) \ No newline at end of file From 30c5ff7a35219470ab4734f204badac73c6e9b29 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 4 Nov 2025 18:54:19 +0530 Subject: [PATCH 2/7] Cleared the spell error --- blazor/smart-ai-solutions/ai/custom-ai-service.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/smart-ai-solutions/ai/custom-ai-service.md b/blazor/smart-ai-solutions/ai/custom-ai-service.md index c61cb673c5..20e490d034 100644 --- a/blazor/smart-ai-solutions/ai/custom-ai-service.md +++ b/blazor/smart-ai-solutions/ai/custom-ai-service.md @@ -106,5 +106,5 @@ This example illustrates how the Syncfusion Blazor AI library integrates with a ## Error Handling - **Invalid API key**: Verify the API key and scope, and load it from configuration or a secure secret store. -- **Rate limits**: Review provider-specific rate limits and implement backoff or retries where appropriate (see the provider’s documentation, such as the [DeepSeek API docs](https://platform.deepseek.com)). +- **Rate limits**: Review provider-specific rate limits and implement back off or retries where appropriate (see the provider’s documentation, such as the [DeepSeek API docs](https://platform.deepseek.com)). - **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation. \ No newline at end of file From d96e34dfe15e6cffa75541bf5feb4dae225156f5 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 5 Nov 2025 15:38:46 +0530 Subject: [PATCH 3/7] Updated the Blazor common UG documentation --- blazor/getting-started/maui-blazor-app.md | 2 +- blazor/getting-started/maui-blazor-web-app.md | 35 +++++++++---------- blazor/getting-started/winforms-blazor-app.md | 19 +++++----- blazor/getting-started/wpf-blazor-app.md | 25 +++++++------ 4 files changed, 38 insertions(+), 43 deletions(-) diff --git a/blazor/getting-started/maui-blazor-app.md b/blazor/getting-started/maui-blazor-app.md index 5f28e36578..e7b81a340a 100644 --- a/blazor/getting-started/maui-blazor-app.md +++ b/blazor/getting-started/maui-blazor-app.md @@ -32,7 +32,7 @@ Visual Studio provides the **.NET MAUI Blazor App** template to create .NET MAUI ## Create a new .NET MAUI Blazor App in Visual Studio -Create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). +Create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). ## BlazorWebView in .NET MAUI Blazor App diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md index 13673f5079..f7ffd0c709 100644 --- a/blazor/getting-started/maui-blazor-web-app.md +++ b/blazor/getting-started/maui-blazor-web-app.md @@ -9,34 +9,32 @@ documentation: ug # Getting Started with .NET MAUI Blazor Hybrid and Web App -This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) app with Syncfusion® Blazor components. - +This section explains how to create and run a .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) using Syncfusion® Blazor components. ## What is .NET MAUI Blazor Hybrid and Web App? -[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and **reuse it across mobile, desktop, and browser platforms**. +[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server App and a .NET MAUI Blazor App. This approach enables a unified web-based UI that can be **reused across mobile, desktop, and browser platforms**. -By sharing UI components between native and web apps, this approach ensures consistent user experiences, promotes maximum code reuse, and simplifies maintenance for applications that target multiple environments. +By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments. -Visual Studio provides **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App. +Visual Studio provides the **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create a .NET MAUI Blazor Hybrid app with a Blazor Web App. ## Prerequisites -* .NET SDK 9.0 and later. - -* The latest preview of Visual Studio 2022 17.3 or above, with required workloads: +* .NET SDK 9.0 or later +* Visual Studio 2022 17.3 or later with the following workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio -You can create a **.NET MAUI Blazor Hybrid and Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) +Create a **.NET MAUI Blazor Hybrid and Blazor Web App** in Visual Studio using the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0). ![.NET MAUI Blazor Hybrid and Blazor Web App](images/maui/maui-web-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar component in the app's shared folder**, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor Calendar component in the app’s shared folder, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,11 +45,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** in both the `.Maui` and `.Web` Apps and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -60,7 +58,7 @@ Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Sy ``` -Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of your MAUI Blazor App and `~/Program.cs` file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of the MAUI Blazor App and the `~/Program.cs` file of the Blazor Web App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 4" %} @@ -89,7 +87,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and **~/Components/App.razor file** of your Blazor Web App. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and in the **~/Components/App.razor file** of your Blazor Web App. ```html @@ -108,7 +106,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Pages/Home.razor` page under the `~/Pages` folder of your `.Shared` App . +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added in `~/Pages/Home.razor` under the `~/Pages` folder of the `.Shared` App. {% tabs %} {% highlight razor %} @@ -120,16 +118,15 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the `.Maui` app. -Before running the sample, make sure the mode is `Windows Machine`. Also to build and run the `.Web` app, select the **IIS Express** button. +In the Visual Studio toolbar, select the **Windows Machine** target to build and run the `.Maui` app. To build and run the `.Web` app, select the **IIS Express** target. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for emulator or device setup. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfusion-Blazor-Components). ## See also diff --git a/blazor/getting-started/winforms-blazor-app.md b/blazor/getting-started/winforms-blazor-app.md index d9caa60f43..4838d7233b 100644 --- a/blazor/getting-started/winforms-blazor-app.md +++ b/blazor/getting-started/winforms-blazor-app.md @@ -9,18 +9,17 @@ documentation: ug # Getting Started with WinForms Blazor Application -This section explains how to create and run the first WinForms Blazor App UI (.NET WinForms Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WinForms Blazor App (.NET WinForms Blazor) that uses Syncfusion® Blazor components. ## What is WinForms Blazor App? -WinForms Blazor App is an app where `Blazor web app` is hosted in WinForms app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WinForms Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WinForms Blazor apps can run on all the platforms supported by WinForms. +A WinForms Blazor app hosts a Blazor web app inside a Windows Forms application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and UI controls. The `BlazorWebView` control can be added to any form in the WinForms app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WinForms Blazor apps run on platforms supported by WinForms (Windows). -Visual Studio provides **WinForms Application** template to create WinForms Blazor Apps. +Visual Studio provides the **WinForms Application** template to create WinForms Blazor Apps. ## Prerequisites * [Supported platforms (WinForms documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/winforms/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) ## Create a new WinForms Blazor App in Visual Studio @@ -29,7 +28,7 @@ To create a **WinForms Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,15 +39,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16` or later. ![Winforms Blazor App NuGet package reference](images/winforms/winforms-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -72,7 +71,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +The theme stylesheet and script are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -85,7 +84,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} diff --git a/blazor/getting-started/wpf-blazor-app.md b/blazor/getting-started/wpf-blazor-app.md index 1839a7337d..8662e5781c 100644 --- a/blazor/getting-started/wpf-blazor-app.md +++ b/blazor/getting-started/wpf-blazor-app.md @@ -9,23 +9,22 @@ documentation: ug # Getting Started with WPF Blazor Application -This section explains how to create and run the first WPF Blazor App UI (.NET WPF Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WPF Blazor app (.NET WPF Blazor) that uses Syncfusion® Blazor components. -To get start quickly with Blazor WPF App, you can check on this video. +To get started quickly with a WPF Blazor app, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=MxSGEbPUbMg" %} ## What is WPF Blazor App? -WPF Blazor App is an app where `Blazor web app` is hosted in WPF app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WPF Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WPF Blazor apps can run on all the platforms supported by WPF. +A WPF Blazor app hosts a `Blazor web app` inside a WPF application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and WPF UI. The `BlazorWebView` control can be added to any page in the WPF Blazor app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WPF Blazor apps run on platforms supported by WPF. -Visual Studio provides **WPF Application** template to create WPF Blazor Apps. +Visual Studio provides the **WPF Application** template to create WPF Blazor Apps. ## Prerequisites * [Supported platforms (WPF documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the .NET desktop development workload ## Create a new WPF Blazor App in Visual Studio @@ -34,7 +33,7 @@ To create a **WPF Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -45,15 +44,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16` or later. For details, see the package page in NuGet. ![WPF Blazor App NuGet package reference](images/wpf/wpf-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -62,7 +61,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of your WPF Blazor App. +Next, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of the WPF Blazor App. {% tabs %} {% highlight C# tabtitle="~/MainWindow.xaml.cs" hl_lines="1 3" %} @@ -77,7 +76,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +Theme stylesheets and scripts are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -90,7 +89,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file in the Blazor project. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} @@ -106,4 +105,4 @@ In the Visual Studio toolbar, select the start button to build and run the app. ![WPF Blazor App with Syncfusion Blazor Components](images/wpf/wpf-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) From 63e45aee1ace4f26c9c5cd31bf205ff6c3524fa3 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 5 Nov 2025 18:02:18 +0530 Subject: [PATCH 4/7] Updated the Blazor common UG documentation --- blazor/getting-started/blazor-single-nuget.md | 12 +++---- .../blazor-web-app-single-nuget.md | 31 +++++++++---------- blazor/getting-started/winforms-blazor-app.md | 2 +- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/blazor/getting-started/blazor-single-nuget.md b/blazor/getting-started/blazor-single-nuget.md index 08c07de6bb..ad0a8f38c3 100644 --- a/blazor/getting-started/blazor-single-nuget.md +++ b/blazor/getting-started/blazor-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Visual Studio -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Visual Studio and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Component using Syncfusion.Blazor NuGet -This section briefly explains how to include a Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Server App and Blazor WebAssembly Standalone App using Visual Studio. +This section explains how to add a Blazor component by using the consolidated Syncfusion.Blazor (Single NuGet) package in a Blazor Server App and a Blazor WebAssembly Standalone App in Visual Studio. ## Prerequisites @@ -17,11 +17,11 @@ This section briefly explains how to include a Blazor component with the Syncfus ## Create a new Blazor App in Visual Studio -You can create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone**using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Single NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for, and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, use the following Package Manager command. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -31,11 +31,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/Components/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml diff --git a/blazor/getting-started/blazor-web-app-single-nuget.md b/blazor/getting-started/blazor-web-app-single-nuget.md index e035ed1113..8f6b35a597 100644 --- a/blazor/getting-started/blazor-web-app-single-nuget.md +++ b/blazor/getting-started/blazor-web-app-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Blazor Web App -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Blazor Web App and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Web App using Syncfusion.Blazor NuGet -This section briefly explains how to include a Syncfusion® Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This section explains how to include a Syncfusion® Blazor component in a Blazor Web App by using the consolidated Syncfusion.Blazor “Single NuGet” package in [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -17,18 +17,17 @@ This section briefly explains how to include a Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web App. +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) during project creation. ## Install Syncfusion® Blazor Single NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,11 +37,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, except PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -51,9 +50,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -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. +If the **interactive render mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. ```cshtml @@ -67,7 +66,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file as shown: ```html @@ -81,12 +80,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> If you are using Syncfusion.Blazor single NuGet, you don’t have to refer Syncfusion.Blazor.Themes NuGet. Since style sheets already inside the assets of Syncfusion.Blazor NuGet. +N> When using the Syncfusion.Blazor Single NuGet, a separate Syncfusion.Blazor.Themes package is not required because the stylesheets are included in the Syncfusion.Blazor assets. N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Syncfusion® Blazor component -* Now, add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file.If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +* Add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: {% tabs %} {% highlight razor %} @@ -105,6 +104,6 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® Blazor Calendar component will be rendered in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. The Syncfusion® Blazor Calendar component is rendered in the default browser. -![Blazor Calendar Component](images/core-hosted/browser-output.png) +![Blazor Web App rendering the Syncfusion Blazor Calendar component](images/core-hosted/browser-output.png) diff --git a/blazor/getting-started/winforms-blazor-app.md b/blazor/getting-started/winforms-blazor-app.md index 4838d7233b..1793cd05b1 100644 --- a/blazor/getting-started/winforms-blazor-app.md +++ b/blazor/getting-started/winforms-blazor-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WinForms Blazor App in Visual Studio | Syncfusion -description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and much more. +description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and explore here to more details. platform: Blazor component: Common documentation: ug From 925dff13f98d0ddc60ebe7a0e79dfe592c0146b6 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 5 Nov 2025 18:43:13 +0530 Subject: [PATCH 5/7] Cleared broken link error --- blazor/getting-started/maui-blazor-web-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md index f7ffd0c709..8d30241c3a 100644 --- a/blazor/getting-started/maui-blazor-web-app.md +++ b/blazor/getting-started/maui-blazor-web-app.md @@ -126,7 +126,7 @@ N> To run the application on Android or iOS, refer to [MAUI Getting Started](htt ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfusion-Blazor-Components). +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components). ## See also From 38b91be17f44149932a29a69b86920908cf59708 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Thu, 6 Nov 2025 18:23:38 +0530 Subject: [PATCH 6/7] Updated the Blazor common UG documentation --- blazor/getting-started/blazor-electron-app.md | 30 ++++++------- .../blazor-server-side-visual-studio.md | 42 +++++++++--------- .../blazor-web-app-authentication.md | 36 +++++++-------- blazor/getting-started/blazor-web-app.md | 38 ++++++++-------- .../getting-started/blazor-webassembly-app.md | 30 ++++++------- .../blazor-webassembly-authentication.md | 24 +++++----- blazor/getting-started/microsoft-teams-app.md | 44 +++++++++---------- blazor/getting-started/razor-class-library.md | 24 +++++----- 8 files changed, 134 insertions(+), 134 deletions(-) diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index b9c5a50b07..7b4a0a3e0c 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -9,25 +9,25 @@ documentation: ug # Creating Desktop Application using Blazor and Electron -This section explains how to create and run desktop applications using Blazor and Electron Framework with Syncfusion® Blazor components. +This section explains how to create and run a desktop application by using Blazor and the Electron.NET framework with Syncfusion® Blazor components. ## What is Electron? -[Electron](https://www.electronjs.org/) framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application on a desktop shell. +[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application in a desktop shell. ## Create a Blazor server-side application -You can create Blazor Server application using either CLI or Visual Studio referring the below links +Create a Blazor Server application by using either the CLI or Visual Studio: -* [Create Blazor server application using CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Create a Blazor Server application by using the CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -* [Create Blazor Server application using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Create a Blazor Server application by using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -N> This setup does not work with Target Frameworks greater than .NET 6. For more details and troubleshooting, refer to this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). +N> This setup does not work with target frameworks greater than .NET 6. For details and troubleshooting, see this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). ## Configure Electron in Blazor App -You can run the below commands either in **Visual Studio Developer Command Prompt** or **CLI** based on the tool you are using for development. +Run the following commands in either the **Visual Studio Developer Command Prompt** or a **command-line interface (CLI)** based on the development environment. 1.Install [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application. @@ -35,13 +35,13 @@ You can run the below commands either in **Visual Studio Developer Command Promp dotnet add package ElectronNET.API ``` -2.Create a local .NET tool manifest file by running the following command. This will create a manifest file in the **~/.config/dotnet-tools.json** location. +2.Create a local .NET tool manifest file by running the following command. This creates a manifest file at **~/.config/dotnet-tools.json** in the current project. ``` dotnet new tool-manifest ``` -![.NET tool manifest file](images\electron\net-tool-manifest.png) +![.NET tool manifest file](images/electron/net-tool-manifest.png) 3.Install the tool locally in the project by running the below command. @@ -49,14 +49,14 @@ dotnet new tool-manifest dotnet tool install ElectronNET.CLI ``` -![Electron NET CLI](images\electron\net-cli.png) +![Electron.NET CLI installation](images/electron/net-cli.png) 4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application. ``` dotnet electronize init ``` -![Update launch profile](images\electron\update-launch-profile.png) +![Update launch profile for Electron.NET](images/electron/update-launch-profile.png) 5.To integrate `Electron.NET` in the application add the below code in **~/Program.cs** file of the application. @@ -113,9 +113,9 @@ var app = builder.Build(); dotnet electronize start ``` -![Electron app output](images\electron\electron-grid-output.png) +![Electron app output](images/electron/electron-grid-output.png) -N> To close the electron app when closed the electron window add the below code in **//Open the Electron-Window** in step 6 in the **~/Program.cs** file of .NET 6 application. +N> To close the Electron app when the Electron window is closed, add the following code under **// Open the Electron-Window** in step 6 in the **~/Program.cs** file of a .NET 6 application. {% tabs %} {% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="14 15 16" %} @@ -145,7 +145,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -8.Run the below command lines to do production builds based on platform +8.Run the following commands to create production builds for each platform. ``` dotnet electronize build /target win @@ -153,4 +153,4 @@ dotnet electronize build /target osx dotnet electronize build /target linux ``` -N> [View the complete Blazor Server electron application with Syncfusion® controls on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) +N> [View the complete Blazor Server Electron application with Syncfusion® components on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) diff --git a/blazor/getting-started/blazor-server-side-visual-studio.md b/blazor/getting-started/blazor-server-side-visual-studio.md index e7f9ed505c..31bfe1132c 100644 --- a/blazor/getting-started/blazor-server-side-visual-studio.md +++ b/blazor/getting-started/blazor-server-side-visual-studio.md @@ -9,17 +9,17 @@ documentation: ug # Getting Started with Blazor Server App -This article provides a step-by-step instructions for building Blazor Server App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Server App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -31,17 +31,17 @@ This section provides a brief explanation on how to manually create a Blazor Ser ### Create a new Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor Server App Creation Template](images/Blazor-server-app-creation.png) -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) while creating a Blazor Server Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) when creating a Blazor Server App. ![Blazor Server App with Interactive Mode](images/blazor-app-interactive-mode.png) ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,7 +52,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -66,7 +66,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, create a Server application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor Server App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -95,7 +95,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -115,7 +115,7 @@ dotnet --version ### Create a new Blazor Server App in .NET CLI -Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -142,7 +142,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} @@ -184,7 +184,7 @@ builder.Services.AddSyncfusionBlazor(); ### Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **App.razor** file as shown below: ```html @@ -202,7 +202,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page. N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. @@ -243,6 +243,6 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} diff --git a/blazor/getting-started/blazor-web-app-authentication.md b/blazor/getting-started/blazor-web-app-authentication.md index 0dc7d323e4..0dd8e535a1 100644 --- a/blazor/getting-started/blazor-web-app-authentication.md +++ b/blazor/getting-started/blazor-web-app-authentication.md @@ -23,47 +23,47 @@ This guide demonstrates how to build a **Blazor Web App with authentication** us ## Choose Project Template -* Select the **Blazor Web App** template using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and click **Next**. +* Select the **Blazor Web App** template using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), and then click **Next**. ![Create-blazor-web-app-template](images/blazor-web-template.jpeg) ## Configure Project Settings -* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the Configure for **HTTPS option is enabled**, and select **Individual Accounts** as the authentication type before clicking **Create**. This setup enables authentication support without persisting user data in a local database. +* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type before clicking **Create**. This enables authentication support without persisting user data in a local database. ![Project-setting](images/project-setting.png) ## Finalize Project Creation -Click the **Create** button to generate the Blazor Web App. Once created, run the project and locate the **Register** button. +Click **Create** to generate the Blazor Web App. After the project is created, run the app and locate the **Register** button. ![Click-register](images/register-button.png) ## Register a User -* Enter the necessary details, such as your **email address and password** into the registration form, then click **Register** to complete the account creation process. +* Enter the required details, such as **email address** and **password**, in the registration form, and then click **Register** to complete account creation. ![Enter-register-details](images/register-details.jpg) ## Apply Database Migrations -After completing registration, click **Apply Migrations** to set up the database schema and configure it with the necessary account-related tables and settings. +After registration completes, click **Apply Migrations** to create the database schema and configure account-related tables and settings. ![Apply-migration](images/apply-migration.jpg) ## Verify Login -Once migrations are applied, refresh the page. The home page will now display the logged-in user's email address along with a **Logout** option. +After migrations are applied, refresh the page. The home page displays the signed-in user’s email address and a **Logout** option. ![Verify-login](images/verify-login.png) -You can also integrate Syncfusion® Blazor Components within the **AuthorizeView** component by following these steps: +Syncfusion® Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App To add the **Blazor Calendar** component to your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. -Alternatively, you can install the packages using the following command in the **Package Manager Console**: +Alternatively, install the packages by using the following command in the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Then, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Then, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. ```cshtml @@ -101,9 +101,9 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in your application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below: +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in the application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below. -* For **.NET 9 and .NET 8** Blazor Web app, include it in the **~/Components/App.razor** file. +* For **.NET 9 and .NET 8** Blazor Web App, include these references in the **~/Components/App.razor** file. ```html @@ -119,11 +119,11 @@ The theme stylesheet and script are available via NuGet as [Static Web Assets](h ``` N> For more information on theming options, refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) documentation, which covers various methods such as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) for referencing themes in your Blazor application. -Additionally, explore the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn about different approaches for including script references in your Blazor project. +Additionally, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for including script references in a Blazor project. ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file within an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -141,12 +141,12 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will launch your default web browser and display the Syncfusion® Blazor Calendar component within the app interface. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This opens the default web browser and displays the Syncfusion® Blazor Calendar component within the app interface. ![Blazor Calendar Component](images/sync-components-auth.jpg) -N> For detailed implementation, The demo project can be downloaded from the [GitHub](https://github.com/SyncfusionExamples/blazor-authentication) repository. +N> For a complete implementation, download the demo project from the [GitHub repository](https://github.com/SyncfusionExamples/blazor-authentication). ## See Also diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md index af05bdd5f9..bc4999d9b7 100644 --- a/blazor/getting-started/blazor-web-app.md +++ b/blazor/getting-started/blazor-web-app.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Web App -This article provides a step-by-step instructions for building Blazor Web App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Web App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor Web App, you can check on this video. +To get started quickly with a Blazor Web App, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=hjPGxApA5W8" %} @@ -28,7 +28,7 @@ You can create a Blazor Web App using Syncfusion® ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -42,13 +42,13 @@ This section provides a brief explanation on how to manually create a Blazor Web You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web App. ### Install Syncfusion® Blazor Grid and Themes NuGet in the Blazor Web App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -61,7 +61,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -75,7 +75,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -91,11 +91,11 @@ cd BlazorWebApp.Client ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following command to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -109,7 +109,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -145,13 +145,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor DataGrid** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -163,7 +163,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -171,7 +171,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -186,7 +186,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -241,7 +241,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor DataGrid component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: @@ -309,6 +309,6 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-app.md b/blazor/getting-started/blazor-webassembly-app.md index b166a81070..8cb754dff4 100644 --- a/blazor/getting-started/blazor-webassembly-app.md +++ b/blazor/getting-started/blazor-webassembly-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor WebAssembly Standalone App -This article provides a step-by-step instructions for building Blazor WebAssembly App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor WebAssembly App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} @@ -23,7 +23,7 @@ You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) @@ -64,9 +64,9 @@ N> Syncfusion® Blazor components are availa ### Create a Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor WebAssembly App** using Visual Studio Code via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor WASM App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Install latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the .NET SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or command shell (Linux) or terminal (macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight c# tabtitle="Blazor WebAssembly App (~/Program.cs)" hl_lines="3 11" %} @@ -195,7 +195,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for adding script references in a Blazor application. ### Add Syncfusion® Blazor component @@ -233,6 +233,6 @@ Add the Syncfusion® Blazor DataGrid compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-authentication.md b/blazor/getting-started/blazor-webassembly-authentication.md index 1843ac6c82..1387f4cdca 100644 --- a/blazor/getting-started/blazor-webassembly-authentication.md +++ b/blazor/getting-started/blazor-webassembly-authentication.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor WASM App with Authentication Library -This article provides a step-by-step instructions for building and securing Blazor WebAssembly Standalone App with Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building and securing a Blazor WebAssembly Standalone App with the Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -19,11 +19,11 @@ This article provides a step-by-step instructions for building and securing Blaz You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) by setting the `Authentication type` to `Individual Accounts`. This selection adds authentication support and doesn't result in storing users in a database. -## Configure the application with Google Auth 2.0 OIDC +## Configure the application with Google OAuth 2.0 (OIDC) -* Set up `Google OAuth 2.0` authentication. For more information, refer [here](https://support.google.com/cloud/answer/6158849?hl=en) +* Set up Google OAuth 2.0 authentication. For more information, see the [Google Cloud documentation](https://support.google.com/cloud/answer/6158849?hl=en). -* Now, replace the `appsettings.json` with the following code which contains code to configure the application with `Google OAuth 2.0`. +* Replace the `appsettings.json` file with the following content to configure the application with `Google OAuth 2.0`. {% tabs %} {% highlight cshtml tabtitle="appsettings.json" %} @@ -45,11 +45,11 @@ You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [ ![OAuth 2.0 client ID](images/oauth-client-id.png) -* The `RedirectUri` (https:///authentication/login-callback) should be registered in the Google APIs console as mentioned below. +* The `RedirectUri` (https:///authentication/login-callback) must be registered in the Google APIs console as shown below. ![OAuth RedirectUri](images/oauth-rediredt-uri.png) -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. @@ -62,11 +62,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -75,7 +75,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly Standalone App. ```cshtml @@ -89,7 +89,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet reference in the `` section and the script reference at the end of the `` as follows: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` section and the script at the end of the `` of the main page as follows: * For **.NET 9 and .NET 8** Blazor WebAssembly Standalone app, include it in the **~/Components/App.razor** file. @@ -109,7 +109,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -127,7 +127,7 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Calendar component in the default web browser. ![Blazor Calendar Component](images/output-calendar-using-blazor-webassembly.png) diff --git a/blazor/getting-started/microsoft-teams-app.md b/blazor/getting-started/microsoft-teams-app.md index 1e7c0c97b9..9aa54960f0 100644 --- a/blazor/getting-started/microsoft-teams-app.md +++ b/blazor/getting-started/microsoft-teams-app.md @@ -9,51 +9,51 @@ documentation: ug # Getting Started with Microsoft Teams Application -This section explains how to create and run the first Microsoft Teams application (Tab App) with Syncfusion® Blazor components. +This section explains how to create and run a Microsoft Teams application (Tab App) with Syncfusion® Blazor components. ## Prerequisites -* Visual Studio 2022 [> 17.13 version] with the required work loads (Visual studio Installer -> Workloads -> ASP.NET and web development -> Select Microsoft 365 Agents development tools from Installation details). +* Visual Studio 2022 (version 17.13 or later) with the required workloads. In Visual Studio Installer, select Workloads → ASP.NET and web development, then enable Microsoft 365 Agents development tools under Installation details. - ![workload installation](images\MSTeams\workload-installation.png) + ![Visual Studio workloads installation for Microsoft 365 Agents](images/MSTeams/workload-installation.png) -* Microsoft Teams Application +* Microsoft Teams application -* Microsoft Edge or Google Chrome browser with developer tools. +* Microsoft Edge or Google Chrome with developer tools -* In the Teams client, go to the Apps icon > Manage your apps > Upload an app, and check for the "Upload a custom app" option to confirm if custom app upload is enabled. Contact Teams administrator, if you don't have the option to upload a custom app. +* In the Teams client, go to Apps icon → Manage your apps → Upload an app, and confirm that "Upload a custom app" is available. Contact a Teams administrator if the option is not available. - ![custom upload](images\MSTeams\custom-upload.png) + ![Verify Teams custom app upload permission](images/MSTeams/custom-upload.png) ## Create a new Microsoft Team Application with Tab using Visual Studio 1. Launch Visual Studio 2022, and in the start window click **Create a new project**. 2. Search for Microsoft 365 Agents app in Visual Studio template. Select **Microsoft 365 Agents** and click on Next. - ![Create Microsoft Teams App](images\MSTeams\create-msteams-app.png) + ![Create Microsoft Teams App](images/MSTeams/create-msteams-app.png) 3. Configure the project with required project name, select the location to save the application and click on Create. - ![Configure Microsoft Teams App](images\MSTeams\configure-msteams-app.png) + ![Configure Microsoft Teams App](images/MSTeams/configure-msteams-app.png) 4. Select the type of Microsoft 365 Agent application to create. In this example, **Microsoft application with Tab** is selected. -![Select type of Microsoft Teams Application](images\MSTeams\select-type-msteams-app.png) +![Select type of Microsoft Teams Application](images/MSTeams/select-type-msteams-app.png) 5. Wait for the project to be created, and its dependencies to be restored, then the project structure looks like below. - ![Microsoft Teams project structure](images\MSTeams\msteams-project-structure.png) + ![Microsoft Teams project structure](images/MSTeams/msteams-project-structure.png) ## Build and run the first Microsoft Teams Application 1. To configure the project with the Microsoft teams application, right Click on the M365 Agent Project and Select Microsoft M365 Account. - ![Configure dependecies with MS Teams Application](images\MSTeams\configure-teams-dependencies.png) -2. After configuring successfully, it displays the window with Microsoft 365 Account. If you already have an account Select the available Office 365 account and click on continue. If you dont have account, create a new account and add the newly created account and click on continue. + ![Configure dependencies with Microsoft Teams application](images/MSTeams/configure-teams-dependencies.png) +2. After configuration completes, a Microsoft 365 Account window appears. If an account exists, select the Office 365 account and click Continue. If you don't have an account, create a new account, add it, and then click Continue. - ![Select the MS365 account to SignIn](images\MSTeams\ms365-account-select.png) -3. After successful login. Click on Debug -> Start Debugging or click on F5 to run the application. -4. Once the application is build successfully, prompts the output window with create My365Agent application. Click on Add in the created application -![Newly created teams application](images\MSTeams\new-teams-app.png) -5. On clicking on "Open" the new Microsoft application with personal Tab is created. -![New Teams application with Personal Tab](images\MSTeams\new-app-personal-tab.png) + ![Select a Microsoft 365 account to sign in](images/MSTeams/ms365-account-select.png) +3. After successful sign-in, select Debug → Start Debugging or press F5 to run the application. +4. After a successful build, the output window prompts to create the My365Agent application. Click Add to add the created application. +![Newly created Teams application](images/MSTeams/new-teams-app.png) +5. Click Open to create the new Microsoft application with a personal tab. +![New Teams application with a personal tab](images/MSTeams/new-app-personal-tab.png) ## Install Syncfusion® Blazor Kanban and Themes NuGet in the App @@ -68,7 +68,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service @@ -208,6 +208,6 @@ Now, add the Syncfusion® Blazor Kanban comp {% endhighlight %} {% endtabs %} -![Microsoft Teams Application with Syncfusion Blazor controls](images\MSTeams\output-msteams-syncfusion.png) +![Microsoft Teams application with Syncfusion Blazor controls](images/MSTeams/output-msteams-syncfusion.png) -N> [View the complete Microsoft Teams Application with Blazor Syncfusion® Controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) +N> [View the complete Microsoft Teams application with Syncfusion® Blazor controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) diff --git a/blazor/getting-started/razor-class-library.md b/blazor/getting-started/razor-class-library.md index a8e0df84d0..07374559d6 100644 --- a/blazor/getting-started/razor-class-library.md +++ b/blazor/getting-started/razor-class-library.md @@ -9,7 +9,7 @@ documentation: ug # Creating Razor Class Library (RCL) using Syncfusion® Blazor components -This section provides information about creating Razor Class Library with the Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to create a Razor Class Library (RCL) that includes Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -17,7 +17,7 @@ This section provides information about creating Razor Class Library with the Sy ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor Class Library in Visual Studio 2022 @@ -39,7 +39,7 @@ This section provides information about creating Razor Class Library with the Sy ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the library, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,11 +51,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library -Now, import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. +Import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. ```html @@ -79,7 +79,7 @@ This Blazor component is defined in the RazorClassLibrary packa ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor class library in Visual Studio Code @@ -96,13 +96,13 @@ cd RazorUIClassLib {% endtabs %} -## Install Syncfusion® Blazor Navigations and Themes NuGet in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -116,7 +116,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library @@ -152,7 +152,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse ![add RCL in blazor app](images/blazor-razor-configure.png) - N> Razor Class Library project is added to the existing Blazor Application. + N> The Razor Class Library project is added to the existing Blazor Application. 3. Right-click the Blazor App project, and then select Add/Project reference. Now, click the checkbox and configure the **Razor Class Library**. @@ -187,7 +187,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse * For Blazor WebAssembly standalone app, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/wwwroot/index.html** file. - * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. + * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. ```html From 9cc5857a779e6b1050ad98490ca32090d40ff317 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Thu, 6 Nov 2025 18:41:41 +0530 Subject: [PATCH 7/7] Cleared CI error --- blazor/getting-started/razor-class-library.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/getting-started/razor-class-library.md b/blazor/getting-started/razor-class-library.md index 07374559d6..e2f5e07cee 100644 --- a/blazor/getting-started/razor-class-library.md +++ b/blazor/getting-started/razor-class-library.md @@ -7,7 +7,7 @@ component: Common documentation: ug --- -# Creating Razor Class Library (RCL) using Syncfusion® Blazor components +# Creating Razor Class Library (RCL) using Syncfusion® Blazor components This guide explains how to create a Razor Class Library (RCL) that includes Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. @@ -83,7 +83,7 @@ This Blazor component is defined in the RazorClassLibrary packa ## Create a Razor class library in Visual Studio Code -You can create a Razor class library using visual studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). +You can create a Razor class library using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). {% tabs %}