Integrating SurveyJS with ASP.NET Core and RequireJS in 2024

Why This Post?

Recently, we’ve seen a few queries about using SurveyJS (both Survey Creator and Form Library) with RequireJS—including a question on Stack Overflow . Rather than repeating the solution every time, I decided to blog about it and save some of my finite number of keystrokes left .

Why RequireJS in 2024?

That’s a fair question. RequireJS has been deprecated, and modern alternatives like ES Modules, Webpack, and Vite have taken its place. Moreover, SurveyJS integrates seamlessly with React, Angular, Vue, and even plain JavaScript (Get Started ).

However, not every project runs on the latest stack. Legacy systems often rely on tools like RequireJS, especially when evolving their tech stack incrementally. This is where SurveyJS shines. Its core, written in JavaScript, ensures compatibility across modern and legacy setups. This flexibility allows teams to adopt SurveyJS while future-proofing their systems.

Even though AMD (Asynchronous Module Definition)—the backbone of RequireJS—has faded from the spotlight, we still receive inquiries about integrating it with SurveyJS. If you’re stuck with RequireJS in your stack, this guide is for you.

How to Load SurveyJS and Survey Creator with RequireJS

This example demonstrates how to use SurveyJS in an ASP.NET Core Razor Pages application with RequireJS. While our sample focuses on Razor Pages, if you need a pure RequireJS setup, the SurveyJS official example is a great resource.

Step 1: Install Dependencies

First, we need to start with the required packages. Add the following to your package.json file:

"dependencies": {
  "knockout": "latest",
  "requirejs": "latest",
  "survey-core": "latest",
  "survey-knockout-ui": "latest",
  "survey-creator-core": "latest",
  "survey-creator-knockout": "latest"
}

These are the latest versions at the time of writing this post, but you can add specific versions if you need to. Note that the survey-core package is a peer dependency for survey-knockout-ui and survey-creator-core. These packages will allow us to use both the SurveyJS Form Library and Survey Creator modules.

Step 2: Configure RequireJS in _Layout.cshtml

Define the RequireJS configuration to manage module dependencies. We will use the _Layout.cshtml file to configure RequireJS for all Razor pages. Here’s a sample require.config setup:

<script type="text/javascript">
        var require = {
            baseUrl: "/bundles",
            paths: {
                knockout: "knockout-latest",
                "survey-core": "survey.core.min",
                "survey-creator-core": "survey-creator-core.min",
                "survey-knockout-ui": "survey-knockout-ui.min",
                "survey-creator-knockout": "survey-creator-knockout.min",
                "jsonData": "../js/json-data"
            },
            shim: {
                "survey-creator-core": {
                    deps: ["survey-core"],
                },
                "survey-knockout-ui": {
                    deps: ["survey-core", "knockout"],
                },
                "survey-creator-knockout": {
                    deps: [
                        "survey-creator-core",
                        "survey-knockout-ui"
                    ],
                },
            },
            urlArgs: "v=@version"
        };
</script>
<script src="~/lib/requirejs/require.js" asp-append-version="true"></script>

Note that survey-core and knockout are peer dependencies for both libraries. Yes, before Reactive virtual DOM libraries, we used KnockoutJS for MVVM data binding.

Few notes about the module configuration:

• survey-knockout-ui: The SurveyJS Form Library module for rendering forms (details ).
• survey-creator-knockout: The module for loading the WYSIWYG Form builder (details ).
• jsonData: this is where your survey’s definition, fetched as JSON, will be loaded from.
• note, we load the actual require.js as a script at the bottom of this snippet

Step 3: Using the SurveyJS modules

Here’s how to load and initialize the SurveyJS Form Library and Survey Creator modules within your Razor Pages app:

SurveyJS Form Library

This is the bare minimum code you need to render the SurveyJS Form Library. In this example, the json is loaded from the jsonData module already defined in the require.config snippet. You can see the full example on GitHub in the Survey.cshtml file.

<div id="surveyContainer" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%"></div>

@section Scripts {
    <script type="text/javascript">
        require(["survey-knockout-ui", "jsonData"], function (SurveyLibraryKnockout, jsonData) {
            if (SurveyLibraryKnockout && jsonData) {
                var survey = new SurveyLibraryKnockout.Survey(jsonData.surveyJSON);
                survey.render(document.getElementById("surveyContainer"));
            }
        });
    </script>
}

Survey Creator

Similary, this is the bare minimum code you need to render the Survey Creator - same pattern followed. The full code is available in the Creator.cshtml file.

<div id="surveyCreatorContainer" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%"></div>

@section Scripts {
        <script type="text/javascript">
            require(["survey-creator-knockout", "jsonData"], function (SurveyCreatorKnockout, jsonData) {
                if (SurveyCreatorKnockout && jsonData) {
                   const options = {
                        showLogicTab: true,
                    };
                    const creator = new SurveyCreatorKnockout.SurveyCreator(options);
                    creator.JSON = jsonData.surveyJSON;
                    creator.render("surveyCreatorContainer");
                }
            });
</script>
}

What’s Next?

You can find the complete source code for this example on GitHub: RequireJS with SurveyJS .

Here you will find the entire project with the interactive examples ready to run. Follow the steps in the README to get started.

Happy coding!