DevExtreme v 22.1 ASP.NET Core 应用程序项目，配置PivotGrid控件
官方文档：https://docs.devexpress.com/AspNetCore/401026/devextreme-based-controls/get-started/configure-a-visual-studio-project#complete-the-project-configuration
建一个新项目
基于 DevExtreme 的 ASP.NET Core 控件随DevExtreme v 22.1 ASP.NET Core 应用程序项目模板一起提供。该模板包括控件所需的所有服务器端和客户端资源，并演示了如何配置DataGrid控件。
下面的步骤描述了如何使用这个项目模板。
-
在 Visual Studio 的起始页上单击Create a new project ，选择DevExtreme v 22.1 ASP.NET Core Application模板，然后单击Next。
-
在配置您的新项目窗口中，指定项目名称和位置，然后单击创建。
-
在Create a new DevExtreme v 22.1 ASP.NET Core Application窗口中，指定项目设置：
- ASP.NET Core 版本
- 应用程序类型：Razor 页面或MVC 视图
-
布局：
- Bootstrap - 基于 Bootstrap 4 入门模板创建轻量级应用程序。
- Material - 创建一个响应式应用程序，该应用程序具有基于Drawer控件的导航布局，并使用颜色样本使用自定义主题进行样式设置。有关更多信息，请参阅此博客文章。
-
单击创建。Visual Studio 使用 DataGrid 控件创建一个项目。您还可以将其他控件添加到项目中。
#将 Dev Extreme 添加到现有项目
要将现有项目配置为使用基于 DevExtreme 的控件，请将 DevExtreme 资源添加到项目并设置布局（完整的项目配置）。
#添加 Dev Extreme 资源
-
在 Visual Studio 中打开您的项目（请参阅支持的版本）。
-
右键单击解决方案资源管理器窗口中的项目，然后在菜单中选择将DevExtreme 添加到项目命令。
-
在调用的对话框中，单击OK。
Visual Studio 需要几秒钟来完成以下操作：
- 服务器端包添加到参考部分：DevExtreme.AspNet.Core，DevExtreme.AspNet.Data。
- 客户端资源添加到wwwroot文件夹：css\devextreme，js\devextreme。
- 修改了以下项目文件：Startup.cs（适用于 .NET 3.1 或 .NET 5.0）、Program.cs（适用于 .NET 6.0）、_ViewImports.cshtml、NuGet.config。
- _DevExtremeLayout.cshtml文件已创建（请参阅下文了解如何使用它）。
此过程记录在“输出”窗口中。
#完成项目配置
重要的
要完成项目配置，请确保在项目中链接客户端资源。您可以使用已链接资源的 Dev Extreme 布局文件或自行链接资源。
#使用 Dev Extreme 布局文件
当您单击将DevExtreme 添加到项目菜单命令时，DevExtreme 布局文件 ( _DevExtremeLayout.cshtml ) 将添加到项目中。此文件包含指向所有客户端资源的链接。
要使用此布局，请转到_ViewStart.cshtml文件（位于Pages或View/Shared文件夹中）并更改_Layout为_DevExtremeLayout.
@{
Layout = "_DevExtremeLayout";
}
重要的
如果您将 Dev Extreme 添加到新的 ASP，请使用此方法。NET 核心项目。如果您有自定义项目，请在项目布局中链接资源，如下所述。
#链接项目中的资源
资源通常链接在项目的布局中 -位于Views/Shared文件夹（对于 MVC 项目）或Pages文件夹（对于 Razor 页面）中的_Layout.cshtml文件。
修改这个文件如下：
-
将以下 CSS 和脚本链接添加到该
<head>部分：<head> ... @* Uncomment to use the HtmlEditor control *@ @* <script src="https://unpkg.com/devextreme-quill/dist/dx-quill.min.js"></script> *@ @* Uncomment to use the Gantt control *@ @*<link href="~/css/devextreme/dx-gantt.css" rel="stylesheet" />*@ @* Uncomment to use the Diagram control *@ @*<link href="~/css/devextreme/dx-diagram.css" rel="stylesheet" />*@ <link href="~/css/devextreme/dx.light.css" rel="stylesheet" /> @* Uncomment to use the Gantt control *@ @*<script src="~/js/devextreme/dx-gantt.js"></script>*@ @* Uncomment to use the Diagram control *@ @*<script src="~/js/devextreme/dx-diagram.js"></script>*@ <script src="~/js/devextreme/jquery.js"></script> @* Uncomment to use Globalize for localization *@ @*<script src="~/js/devextreme/cldr.js"></script>*@ @*<script src="~/js/devextreme/cldr/event.js"></script>*@ @*<script src="~/js/devextreme/cldr/supplemental.js"></script>*@ @*<script src="~/js/devextreme/cldr/unresolved.js"></script>*@ @*<script src="~/js/devextreme/globalize.js"></script>*@ @*<script src="~/js/devextreme/globalize/message.js"></script>*@ @*<script src="~/js/devextreme/globalize/number.js"></script>*@ @*<script src="~/js/devextreme/globalize/currency.js"></script>*@ @*<script src="~/js/devextreme/globalize/date.js"></script>*@ @* Uncomment to enable client-side export *@ @*<script src="~/js/devextreme/jszip.js"></script>*@ <script src="~/js/devextreme/dx.all.js"></script> @* Uncomment to provide geo-data for the VectorMap control *@ @*<script src="~/js/devextreme/vectormap-data/world.js"></script>*@ <script src="~/js/devextreme/aspnet/dx.aspnet.mvc.js"></script> <script src="~/js/devextreme/aspnet/dx.aspnet.data.js"></script> </head> -
如果布局文件包含之前添加的 jQuery 链接（它们可能被放置在
<environment>容器中），则删除它们。... <!-- Remove the jQuery links below --> <environment names="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> ... <environment names="Staging,Production"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ...
笔记
您的项目现在可以使用 DevExtreme ASP.NET Core 控件。有关详细信息，请参阅向项目添加控件。
