SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template shows how to integrate the following SurveyJS components into a Blazor application:
This project uses React for the front-end part, but the SurveyJS components can also be similarly integrated with Angular, Knockout, jQuery, Vue 2, and Vue 3.
git clone https://github.com/surveyjs/surveyjs-blazor.git
cd surveyjs-blazor
npm i
dotnet run
Open http://localhost:5208/ in your web browser.
NOTE: This application uses .NET Core 8.0. Make sure that you have ASP.NET Core Runtime 8.0 installed on your machine.
This template covers most basic use cases. You can find code examples for them in the following files:
- Create a standalone survey
- Add Survey Creator to a page
- Export a survey to a PDF document
- Visualize survey results
SurveyJS components can be used with Angular, React, Vue.js, Knockout, and jQuery. You can integrate SurveyJS into a Blazor application that already uses one of these JavaScript frameworks/libraries or into one that doesn't use any of them. Follow the instructions below:
- Add SurveyJS to a Blazor application with a JavaScript framework
- Add SurveyJS to a Blazor application without a JavaScript framework
-
Install SurveyJS libraries and configure SurveyJS components
Use the following tutorials to get started with SurveyJS components in your framework:- Get Started with Form Library: Angular | Vue.js | React | HTML/CSS/JavaScript
- Get Started with Survey Creator: Angular | Vue.js | React | HTML/CSS/JavaScript
- Get Started with Dashboard: Angular | Vue.js | React | HTML/CSS/JavaScript
- Get Started with PDF Generator: Angular | Vue.js | React | HTML/CSS/JavaScript
For component configuration examples in React, you can refer to the ClientAssets/TypeScript/components directory.
-
Update the Webpack configuration
To compile SurveyJS components into JavaScript and CSS files, you need to add new entry points to the Webpack configuration. Open thewebpack.config.js
file in the root directory of your project and update theentry
andoutput
objects. The following code shows how these objects are configured in this quick start template. In your project, the file paths may be different.// webpack.config.js // ... module.exports = { // ... entry: { "survey-creator": "./ClientAssets/TypeScript/edit.tsx", "form-library": "./ClientAssets/TypeScript/run.tsx", dashboard: "./ClientAssets/TypeScript/dashboard.tsx", tabulator: "./ClientAssets/TypeScript/table.tsx", pdf: "./ClientAssets/TypeScript/pdf.tsx", }, output: { libraryTarget: 'module', path: path.resolve(__dirname, "./wwwroot/static"), publicPath: "/static/", filename: "[name].js" }, // ... }
-
Update the TypeScript configuration
If your project uses TypeScript, open thetsconfig.json
file in the root directory and set the following properties in it:{ "compilerOptions": { // ... "esModuleInterop": true, "target": "es5" }, // ... }
-
Add Razor components that render SurveyJS components
4.1. Specify the Razor component's route using the
@page
directive.@page "/dashboard"
4.2. Apply the
InteractiveServer
render mode using the@rendermode
directive.@rendermode InteractiveServer
4.3. Add a link to the Webpack-generated style sheet. This link depends on the SurveyJS component for which you create the Razor component.
<link href="static/dashboard.css" rel="stylesheet"/>
4.4. Add a markup element (usually
<div>
) in which the SurveyJS component will be rendered. Assign anid
to it and use thisid
to access the element in JavaScript code.<div id="root"></div>
4.5. Load the Webpack-generated script in the Razor component. Inject the
IJSRuntime
dependency to be able to call JavaScript functions from C# code. Add anOnAfterRenderAsync
method that imports the script file with the SurveyJS component and calls the file'sinit
function. In addition, you should implement theIDisplosable
interface to release the resources allocated to the imported JavaScript file.@inject IJSRuntime jsRuntime @implements IDisposable @code{ private IJSObjectReference? module; protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); module = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./static/dashboard.js"); await module.InvokeVoidAsync("init"); } void IDisposable.Dispose() { module?.DisposeAsync(); module = null; } }
-
Set up the JavaScript environment
Copy the following files from this template to the root directory of your project: -
Add a pre-build task for the JavaScript part
Open the.csproj
file of your project in a text editor and add the following pre-build task. It installs npm packages and builds the JavaScript part of your project every time you build the entire project:<Project Sdk="Microsoft.NET.Sdk.Web"> <!-- ... --> <Target Name="PreBuild" BeforeTargets="PreBuildEvent"> <Exec Command="npm install" WorkingDirectory="." /> <Exec Command="npm run build" WorkingDirectory="." /> </Target> </Project>
-
Configure SurveyJS components
SurveyJS components support a number of JavaScript frameworks. The current template uses React. If you are not using any JavaScript framework or using React, you can simply copy files from the ClientAssets directory to your project and adjust them as required. -
Add Razor components that render SurveyJS components
Refer to step 4 of the instructions for Blazor applications with a JavaScript framework.