在本篇博客中，我们将探讨如何使用最新的 DevExpress 22.1.3 版本的 PivotGrid 控件结合 .NET 6 MVC 构建一个功能丰富的统计页面。我们将介绍如何创建一个基本的 MVC 网页，并将 PivotGrid 控件集成到该页面中，以展示和分析统计数据。
步骤 1：创建 .NET 6 MVC 项目
首先，我们需要创建一个新的 .NET 6 MVC 项目。在 Visual Studio 中，选择 "创建新项目"，然后选择 ".NET Web Application" 模板。在下一个界面中，选择 ".NET 6" 版本，并选择 "MVC" 配置选项。接下来，为项目命名并选择所需的位置，最后点击 "创建"。
步骤 2：安装 DevExpress 22.1.3
在开始使用 DevExpress PivotGrid 控件之前，我们需要先安装相应的 NuGet 包。打开项目的 NuGet 管理器，在搜索框中输入 "DevExpress.MVC" 并安装最新版本的包。确保选择适用于 .NET 6 版本的包。
步骤 3：设置 PivotGrid 控件
在我们的 MVC 项目中，需要添加一个 Controller 和一个 View。在 Controllers 文件夹中，创建一个名为 "StatisticsController" 的新 Controller。在该 Controller 中，创建一个名为 "Index" 的 Action 方法，并在该方法中返回一个 View。
public class StatisticsController : Controller
{
public IActionResult Index()
{
return View();
}
}
接下来，在 Views 文件夹中的 "Statistics" 文件夹中创建一个名为 "Index.cshtml" 的视图文件。在该视图文件中，我们将设置 PivotGrid 控件来展示统计数据。
@model IEnumerable<MyApp.Models.StatisticsViewModel>
@{
ViewBag.Title = "统计页面";
Layout = null;
}
@using DevExpress.Web.Mvc.UI
<h2>统计页面</h2>
@Html.DevExpress().PivotGrid(
settings =>
{
settings.Name = "pivotGrid";
settings.CallbackRouteValues = new { Controller = "Statistics", Action = "PivotGridPartial" };
// 设置数据源
settings.DataSource = Model;
// 设置行字段
settings.Fields.Add(field =>
{
field.FieldName = "CategoryName";
field.Area = DevExpress.XtraPivotGrid.PivotArea.RowArea;
field.Caption = "类别";
});
// 设置列字段
settings.Fields.Add(field =>
{
field.FieldName = "Year";
field.Area = DevExpress.XtraPivotGrid.PivotArea.ColumnArea;
field.Caption = "年份";
});
// 设置数据字段
settings.Fields.Add(field =>
{
field.FieldName = "Value";
field.Area = DevExpress.XtraPivotGrid.PivotArea.DataArea;
field.Caption = "数值";
field.CellFormat.FormatType = DevExpress.Utils.FormatType.Numeric;
field.CellFormat.FormatString = "N0";
field.SummaryType = DevExpress.Data.PivotGrid.PivotSummaryType.Sum;
});
}
).Bind(Model).GetHtml()
以上代码中，我们创建了一个 PivotGrid 控件，并将它绑定到一个名为 "pivotGrid" 的实例上。我们设置了数据源为一个名为 "StatisticsViewModel" 的模型。接下来，我们设置了行字段、列字段和数据字段，分别表示展示的类别、年份和数值。我们还设置了数据字段的格式和汇总类型。
步骤 4：返回部分视图
为了实现异步数据加载和更新 PivotGrid 控件，我们需要在 Controller 中添加一个用于返回部分视图的 Action 方法。在我们的 "StatisticsController" 控制器中，添加一个名为 "PivotGridPartial" 的方法，并返回一个 PartialViewResult。
public IActionResult PivotGridPartial()
{
var model = GetStatisticsData(); // 自定义方法，用于获取统计数据
return PartialView("_PivotGridPartial", model);
}
接下来，我们需要创建一个名为 "_PivotGridPartial.cshtml" 的部分视图文件。在该文件中，我们将通过使用 PartialView 方法来获取数据并更新 PivotGrid 控件。
@model IEnumerable<MyApp.Models.StatisticsViewModel>
@Html.DevExpress().PivotGrid(settings =>
{
settings.Name = "pivotGrid";
settings.ClientSideEvents.BeginCallback = "onPivotGridBeginCallback";
// 设置数据源
settings.DataSource = Model;
// 设置行字段
settings.Fields.Add(field =>
{
field.FieldName = "CategoryName";
field.Area = DevExpress.XtraPivotGrid.PivotArea.RowArea;
field.Caption = "类别";
});
// 设置列字段
settings.Fields.Add(field =>
{
field.FieldName = "Year";
field.Area = DevExpress.XtraPivotGrid.PivotArea.ColumnArea;
field.Caption = "年份";
});
// 设置数据字段
settings.Fields.Add(field =>
{
field.FieldName = "Value";
field.Area = DevExpress.XtraPivotGrid.PivotArea.DataArea;
field.Caption = "数值";
field.CellFormat.FormatType = DevExpress.Utils.FormatType.Numeric;
field.CellFormat.FormatString = "N0";
field.SummaryType = DevExpress.Data.PivotGrid.PivotSummaryType.Sum;
});
}).GetHtml()
<script>
function onPivotGridBeginCallback(s, e) {
s.PerformCallback();
}
</script>
步骤 5：获取统计数据
最后，我们还需要通过自定义方法获取统计数据。在 "StatisticsController" 中，添加一个名为 "GetStatisticsData" 的私有方法，并在该方法中返回模拟的统计数据。你可以根据实际需求从数据库或其他数据源中获取真实的统计数据。
private List<StatisticsViewModel> GetStatisticsData()
{
var data = new List<StatisticsViewModel>
{
new StatisticsViewModel { CategoryName = "类别 1", Year = "2021", Value = 100 },
new StatisticsViewModel { CategoryName = "类别 2", Year = "2021", Value = 200 },
new StatisticsViewModel { CategoryName = "类别 1", Year = "2022", Value = 150 },
new StatisticsViewModel { CategoryName = "类别 2", Year = "2022", Value = 250 },
};
return data;
}
结论
在本篇博客中，我们学习了如何使用最新版本的 DevExpress 22.1.3 PivotGrid 控件结合 .NET 6 MVC 构建一个统计页面。我们了解了如何设置 PivotGrid 控件、如何返回部分视图以及如何获取统计数据。通过使用 PivotGrid 控件，我们可以轻松地展示和分析大量的统计数据，使我们的应用程序更具可视化和交互性。希望这篇博客对您有所帮助！
参考链接：
评论 (0)