如何基于ASP.NET与Angular在网页展示SurveyJS调查结果？

一、后端ASP.NET部分：提供调查结构与响应数据 #

首先要确认数据库中同时存储了原调查的JSON配置结构和用户响应的类JSON字符串——前者是还原调查样式的核心，后者是填充的用户数据。如果之前只存了响应数据，必须补存原调查的JSON配置。

1. 创建数据传输模型

public class SurveyResponseDto
{
    public string SurveyJson { get; set; } // 原调查的JSON结构
    public object ResponseData { get; set; } // 反序列化后的用户响应数据
}

2. 编写Web API接口

[ApiController]
[Route("api/[controller]")]
public class SurveyResponsesController : ControllerBase
{
    private readonly YourDbContext _dbContext;

    public SurveyResponsesController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpGet("{responseId}")]
    public IActionResult GetSurveyResponse(int responseId)
    {
        var record = _dbContext.SurveyResponses.FirstOrDefault(r => r.Id == responseId);
        if (record == null) return NotFound();

        // 反序列化响应的类JSON字符串
        var responseData = JsonSerializer.Deserialize<object>(record.ResponseJson);

        return Ok(new SurveyResponseDto
        {
            SurveyJson = record.SurveyJson,
            ResponseData = responseData
        });
    }

    // 如果需要支持编辑后的保存，新增更新接口
    [HttpPut("{responseId}")]
    public IActionResult UpdateSurveyResponse(int responseId, [FromBody] object newResponseData)
    {
        var record = _dbContext.SurveyResponses.FirstOrDefault(r => r.Id == responseId);
        if (record == null) return NotFound();

        // 将新响应序列化为JSON字符串存入数据库
        record.ResponseJson = JsonSerializer.Serialize(newResponseData);
        _dbContext.SaveChanges();

        return Ok();
    }
}

二、前端Angular部分：用SurveyJS渲染调查 #

1. 安装SurveyJS依赖

npm install survey-angular-ui survey-core

2. 在Angular模块中导入SurveyJS组件

import { NgModule } from '@angular/core';
import { SurveyModule } from 'survey-angular-ui';
// 其他必要模块导入

@NgModule({
  imports: [
    // 其他模块
    SurveyModule
  ]
})
export class AppModule { }

3. 创建调查展示组件

import { Component, OnInit } from '@angular/core';
import { Model } from 'survey-core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-survey-display',
  template: `<survey [model]="surveyModel"></survey>`
})
export class SurveyDisplayComponent implements OnInit {
  surveyModel: Model;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 调用后端接口，替换为实际的响应ID
    this.http.get('/api/surveyresponses/1').subscribe((res: any) => {
      // 基于原调查JSON创建SurveyJS模型
      this.surveyModel = new Model(res.surveyJson);
      // 填充用户响应数据
      this.surveyModel.data = res.responseData;

      // 设置展示模式：可选值'display'（只读）、'edit'（可编辑）、'view'（极简只读）
      this.surveyModel.mode = 'display';
      // 如果需要可编辑，切换为：this.surveyModel.mode = 'edit';

      // 若开启编辑模式，监听完成事件提交新数据
      if (this.surveyModel.mode === 'edit') {
        this.surveyModel.onComplete.add((sender) => {
          this.http.put('/api/surveyresponses/1', sender.data).subscribe();
        });
      }
    });
  }
}

4. 导入SurveyJS默认样式
   在angular.json的styles数组中添加：

"styles": [
  // 你的其他样式文件
  "node_modules/survey-core/defaultV2.min.css"
]

关键注意事项 #

• 必须保证原调查的JSON配置与响应数据的字段完全匹配（比如问题ID对应响应中的键），否则会出现渲染异常。
• 若数据库中未存储原调查的JSON配置，需回溯创建调查时的配置数据，或修改存储逻辑，确保每次提交响应时同时关联保存原调查结构。
• 可通过SurveyJS的API自定义渲染样式、隐藏特定问题，满足业务需求。

内容的提问来源于stack exchange，提问作者Bentech