官方文檔：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 控件。有關詳細信息，請參閱向項目添加控件。