SurveyJS + Blazor + React Quickstart Template

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:

• SurveyJS Form Library
• Survey Creator / Form Builder
• SurveyJS PDF Generator
• SurveyJS Dashboard

This project uses React for the front-end part, but the SurveyJS components can also be similarly integrated with Angular, jQuery, and Vue 3, or used without any front-end framework. Refer to the following repository for an example with vanilla JavaScript: SurveyJS + Blazor + Vanilla JS Quickstart Template.

Run the application

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.

Template structure

This template covers most basic use cases. You can find code examples for them in the following files:

• Create a standalone survey
  • ClientAssets/Data/survey_json.js
  • ClientAssets/TypeScript/components/Survey.tsx
• Add Survey Creator to a page
  • ClientAssets/TypeScript/components/Creator.tsx
• Export a survey to a PDF document
  • ClientAssets/TypeScript/components/PDFGenerator.tsx
• Visualize survey results
  • As charts
    • ClientAssets/Data/dashboard_data.js
    • ClientAssets/TypeScript/components/Dashboard.tsx
  • As a table
    • ClientAssets/Data/dashboard_data.js
    • ClientAssets/TypeScript/components/Tabulator.tsx

How to integrate SurveyJS components into your Blazor application

SurveyJS components can be used with Angular, React, Vue.js, jQuery, and vanilla JavaScript. 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

Add SurveyJS to a Blazor application with a JavaScript framework

1. 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.

2. 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 the webpack.config.js file in the root directory of your project and update the entry and output 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"
     },
     // ...
   }

   View webpack.config.js

3. Update the TypeScript configuration
   If your project uses TypeScript, open the tsconfig.json file in the root directory and set the following properties in it:

   {
     "compilerOptions": {
       // ...
       "esModuleInterop": true,
       "target": "es5"
     },
     // ...
   }

4. 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 an id to it and use this id 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 an OnAfterRenderAsync method that imports the script file with the SurveyJS component and calls the file's init function. In addition, you should implement the IDisplosable 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;
     }
   }

Add SurveyJS to a Blazor application without a JavaScript framework

1. Set up the JavaScript environment
   Copy the following files from this template to the root directory of your project:

   • package.json
   • tsconfig.json
   • webpack.config.js

2. 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>

3. 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.

4. Add Razor components that render SurveyJS components
   Refer to step 4 of the instructions for Blazor applications with a JavaScript framework.

SurveyJS Resources

• Website
• Documentation
• Starter Demos
• What's New