如何在ASP.NET Core Razor视图的WebDataRocks报表中保留用户选中的切片？

核心思路 #

通过捕获WebDataRocks的切片变更事件，将用户调整后的字段配置（slice）保存起来，下次加载报表时复用该配置，而非每次都使用初始切片。

方案1：前端本地存储（单会话/单设备） #

适合不需要跨设备同步的场景，用localStorage或sessionStorage保存切片配置：

1. 捕获切片变更并保存
   在Razor视图的WebDataRocks初始化代码中，添加reportchange事件监听：

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        dataSource: { /* 你的数据源配置 */ },
        slice: { /* 初始字段配置 */ }
    },
    reportchange: function() {
        // 获取当前最新的切片配置
        var currentSlice = pivot.getReport().slice;
        // 按用户标识保存，避免多用户冲突
        localStorage.setItem("wdr_user_slice_" + "@User.Identity.Name", JSON.stringify(currentSlice));
    }
});

2. 加载时恢复配置
   初始化报表前，先读取本地存储的切片，若存在则替换初始配置：

window.addEventListener('load', function() {
    var savedSlice = localStorage.getItem("wdr_user_slice_" + "@User.Identity.Name");
    var initialReport = {
        dataSource: { /* 你的数据源配置 */ },
        slice: { /* 初始字段配置 */ }
    };
    // 有保存的切片则覆盖初始配置
    if (savedSlice) {
        initialReport.slice = JSON.parse(savedSlice);
    }
    // 初始化WebDataRocks
    var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        report: initialReport
    });
});

方案2：后端持久化存储（跨会话/多设备） #

需要用户配置跨设备同步时，将切片保存到后端数据库或缓存：

1. 前端提交切片到后端
   在reportchange事件中，通过AJAX将切片配置提交到ASP.NET Core接口：

reportchange: function() {
    var currentSlice = pivot.getReport().slice;
    // 提交到后端Action
    fetch('/Report/SaveUserSlice', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': '@Html.AntiForgeryToken()'
        },
        body: JSON.stringify({
            UserId: "@User.FindFirstValue(ClaimTypes.NameIdentifier)",
            SliceConfig: currentSlice
        })
    });
}

2. 后端接收并保存
   在Controller中添加保存和读取的Action：

// 保存用户切片配置
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult SaveUserSlice([FromBody] UserSliceModel model)
{
    // 将model.SliceConfig序列化为JSON字符串，保存到数据库用户表对应字段
    // 示例：_dbContext.UserSettings.Update(userSetting);
    return Ok();
}

// 获取用户保存的切片配置
[HttpGet]
public IActionResult GetUserSlice()
{
    var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
    var userSetting = _dbContext.UserSettings.FirstOrDefault(u => u.UserId == userId);
    if (userSetting != null && !string.IsNullOrEmpty(userSetting.SliceConfig))
    {
        return Json(JsonConvert.DeserializeObject(userSetting.SliceConfig));
    }
    // 返回默认切片配置
    return Json(new { /* 初始字段配置 */ });
}

// 辅助模型
public class UserSliceModel
{
    public string UserId { get; set; }
    public object SliceConfig { get; set; }
}

3. 加载报表时从后端读取
   初始化WebDataRocks前，先调用后端接口获取保存的切片：

window.addEventListener('load', async function() {
    // 从后端获取用户保存的切片
    const response = await fetch('/Report/GetUserSlice');
    const savedSlice = await response.json();
    var initialReport = {
        dataSource: { /* 你的数据源配置 */ },
        slice: savedSlice || { /* 初始字段配置 */ }
    };
    // 初始化WebDataRocks
    var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        report: initialReport
    });
});

注意事项 #

• 用户修改筛选条件点击「显示报表」时，需确保提交筛选条件的同时携带当前切片配置，后端结合两者生成对应数据。
• 多报表场景下，存储时需增加报表标识，避免不同报表的配置冲突。

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