提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

DevExtreme v 22.1 ASP.NET Core 应用程序项目，配置PivotGrid控件

NetASPCore配置项目应用程序 控件
2023-09-11 14:21:27 时间

官方文档：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控件。

下面的步骤描述了如何使用这个项目模板。

  1. 在 Visual Studio 的起始页上单击Create a new project ，选择DevExtreme v 22.1 ASP.NET Core Application模板，然后单击Next。

    项目模板

  2. 在配置您的新项目窗口中，指定项目名称和位置，然后单击创建。

  3. 在Create a new DevExtreme v 22.1 ASP.NET Core Application窗口中，指定项目设置：

    • ASP.NET Core 版本
    • 应用程序类型：Razor 页面或MVC 视图

    • 布局：

    项目设置

  4. 单击创建。Visual Studio 使用 DataGrid 控件创建一个项目。您还可以将其他控件添加到项目中。

#将 Dev Extreme 添加到现有项目

要将现有项目配置为使用基于 DevExtreme 的控件，请将 DevExtreme 资源添加到项目并设置布局（完整的项目配置）。

#添加 Dev Extreme 资源

  1. 在 Visual Studio 中打开您的项目（请参阅支持的版本）。

  2. 右键单击解决方案资源管理器窗口中的项目，然后在菜单中选择将DevExtreme 添加到项目命令。

    上下文菜单项

  3. 在调用的对话框中，单击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文件。

修改这个文件如下：

  1. 将以下 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>

  2. 如果布局文件包含之前添加的 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>
...

笔记

您还可以通过 bundleconfig 应用捆绑和缩小。json。

您的项目现在可以使用 DevExtreme ASP.NET Core 控件。有关详细信息，请参阅向项目添加控件。

相关文章