Umbraco V10集成DevExpress前端组件问题求助及示例需求

我已经成功在Umbraco V10中集成了DevExtreme组件，以下是完整的实现步骤和示例：

1. 确认NuGet包安装 #

确保已安装适配.NET 6（Umbraco 10基于.NET 6）的DevExtreme包：

• DevExtreme.AspNet.Core
• DevExtreme.AspNet.Data

可通过CLI命令安装：

Install-Package DevExtreme.AspNet.Core
Install-Package DevExtreme.AspNet.Data

2. 配置Program.cs #

在项目的Program.cs中添加DevExpress服务注册和中间件配置，注意中间件顺序：

var builder = WebApplication.CreateBuilder(args);

// 注册Umbraco服务
builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .Build();

// 注册DevExtreme服务
builder.Services.AddDevExpressControls();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
// 必须放在UseRouting之前、UseStaticFiles之后
app.UseDevExpressControls();
app.UseRouting();

// Umbraco中间件
app.UseUmbraco()
    .WithMiddleware(u =>
    {
        u.UseBackOffice();
        u.UseWebsite();
    })
    .WithEndpoints(u =>
    {
        u.UseInstallerEndpoints();
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
    });

app.Run();

3. 配置视图母版页（_Layout.cshtml） #

在网站前端母版页中引入DevExtreme的CSS和JS资源：

<!-- 在<head>标签内添加样式 -->
<link rel="stylesheet" href="~/dx/devextreme.css" />

<!-- 在</body>标签前添加脚本 -->
<script src="~/dx/devextreme.js"></script>

4. 添加_ViewImports.cshtml引用 #

在Views文件夹的_ViewImports.cshtml中添加DevExtreme命名空间，确保视图能识别扩展方法：

@using DevExtreme.AspNet.Mvc
@addTagHelper *, DevExtreme.AspNet.Core

5. 创建测试图表视图 #

创建Partial View（比如Views/Shared/ChartPartial.cshtml），写入标准柱状图代码：

@(Html.DevExtreme().Chart()
    .ID("sampleBarChart")
    .DataSource(ds => ds.Mvc()
        .Controller("SampleData")
        .LoadAction("GetBarChartData")
    )
    .Series(series => series.Add()
        .ArgumentField("Product")
        .ValueField("Sales")
        .Type(SeriesType.Bar)
    )
    .Title("产品销量统计")
    .ArgumentAxis(axis => axis.Title("产品名称"))
    .ValueAxis(axis => axis.Title("销量"))
    .Legend(legend => legend.Visible(false))
)

6. 创建数据接口控制器 #

创建控制器（比如Controllers/SampleDataController.cs），提供图表模拟数据：

using Microsoft.AspNetCore.Mvc;

namespace YourProjectNamespace.Controllers;

public class SampleDataController : Controller
{
    public IActionResult GetBarChartData()
    {
        var data = new List<object>
        {
            new { Product = "产品A", Sales = 120 },
            new { Product = "产品B", Sales = 180 },
            new { Product = "产品C", Sales = 90 },
            new { Product = "产品D", Sales = 210 }
        };
        return Json(data);
    }
}

7. 在Umbraco模板中引用图表 #

打开Umbraco前端模板（比如Views/Templates/YourTemplate.cshtml），添加Partial View引用：

<div class="chart-container">
    @await Html.PartialAsync("ChartPartial")
</div>

常见排查点 #

• 确认DevExtreme包版本与.NET 6兼容，避免版本不匹配导致API异常
• 检查Program.cs中中间件顺序，UseDevExpressControls必须在UseRouting之前
• 确保Umbraco的静态文件配置没有拦截~/dx开头的资源请求
• 如果视图中无法识别Html.DevExtreme()，检查_ViewImports.cshtml是否添加了正确的命名空间

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