Skip to content

Commit 854bb27

Browse files
charlescordialDevExpresscharlescordialDevExpress
committed
Fixing Example: Fix implemntation, lint, and build issues
1 parent 6e1e933 commit 854bb27

36 files changed

+9512
-301
lines changed

‎ASP.NET Core/ASP.NET Core.csproj‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
</PropertyGroup>
6+
<Target Name="DebugEnsureNodeEnv" BeforeTargets="BeforeBuild" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
7+
<!-- Ensure Node.js is installed -->
8+
<Exec Command="node --version" ContinueOnError="true">
9+
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
10+
</Exec>
11+
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
12+
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
13+
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
14+
</Target>
15+
<Target Name="RunGulp" BeforeTargets="BeforeBuild" Condition=" '$(Configuration)' == 'Debug' And Exists('$(SpaRoot)node_modules') ">
16+
<Exec WorkingDirectory="$(ProjectDir)" Command="node_modules\.bin\gulp add-resources" ContinueOnError="false">
17+
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
18+
</Exec>
19+
</Target>
20+
<ItemGroup>
21+
<PackageReference Include="DevExtreme.AspNet.Data" Version="5.*" />
22+
<PackageReference Include="DevExtreme.AspNet.Core" Version="25.1.3" />
23+
</ItemGroup>
24+
<ItemGroup>
25+
<Folder Include="wwwroot\images\" />
26+
</ItemGroup>
27+
28+
<ProjectExtensions>
29+
<VisualStudio>
30+
<UserProperties TemplateFeatures="NETCORE" />
31+
</VisualStudio>
32+
</ProjectExtensions>
33+
34+
</Project>

‎ASP.NET Core/ASP.NET Core.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 16
4+
VisualStudioVersion = 16.0.30330.147
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ASP.NET Core", "ASP.NET Core.csproj", "{435CB7A8-3168-4BD2-815F-E54F708AF968}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{435CB7A8-3168-4BD2-815F-E54F708AF968}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{435CB7A8-3168-4BD2-815F-E54F708AF968}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{435CB7A8-3168-4BD2-815F-E54F708AF968}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{435CB7A8-3168-4BD2-815F-E54F708AF968}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {08AFB133-D1F6-4FE9-A66A-586B96B002D0}
24+
EndGlobalSection
25+
EndGlobal

‎ASP.NET Core/Controllers/EmployeesController.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using ASP_NET_Core.Models.SampleData;
6+
using DevExtreme.AspNet.Data;
7+
using DevExtreme.AspNet.Mvc;
8+
using Microsoft.AspNetCore.Mvc;
9+
namespace ASP_NET_Core.Controllers
10+
{
11+
public class EmployeesController : Controller
12+
{
13+
[HttpGet]
14+
public object Get(DataSourceLoadOptions loadOptions) {
15+
return DataSourceLoader.Load(SampleData.Employees, loadOptions);
16+
}
17+
}
18+
}

‎ASP.NET Core/Controllers/HomeController.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using ASP_NET_Core.Models.SampleData;
6+
using Microsoft.AspNetCore.Mvc;
7+
namespace ASP_NET_Core.Controllers
8+
{
9+
public class HomeController : Controller
10+
{
11+
public IActionResult Index()
12+
{
13+
return View();
14+
}
15+
16+
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
17+
public IActionResult Error() {
18+
return View();
19+
}
20+
}
21+
}

‎ASP.NET Core/Models/Employee.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System;
2+
3+
namespace ASP_NET_Core.Models
4+
{
5+
public class Employee
6+
{
7+
public int ID { get; set; }
8+
public string FirstName { get; set; }
9+
public string LastName { get; set; }
10+
public string Position { get; set; }
11+
public string State { get; set; }
12+
public DateTime BirthDate { get; set; }
13+
}
14+
}

‎ASP.NET Core/Models/SampleData.cs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
using ASP_NET_Core.Models;
2+
using System;
3+
using System.Collections.Generic;
4+
5+
namespace ASP_NET_Core.Models.SampleData
6+
{
7+
static class SampleData
8+
{
9+
public static List<Employee> Employees = new List<Employee>() {
10+
new Employee {
11+
ID = 1,
12+
FirstName = "John",
13+
LastName = "Heart",
14+
Position = "CEO",
15+
State = "California",
16+
BirthDate = new DateTime(1963, 3, 16)
17+
},
18+
new Employee {
19+
ID = 2,
20+
FirstName = "Olivia",
21+
LastName = "Peyton",
22+
Position = "Sales Assistant",
23+
State = "California",
24+
BirthDate = new DateTime(1981, 6, 3)
25+
},
26+
new Employee {
27+
ID = 3,
28+
FirstName = "Robert",
29+
LastName = "Reagan",
30+
Position = "CMO",
31+
State = "Arkansas",
32+
BirthDate = new DateTime(1974, 9, 7)
33+
}
34+
};
35+
}
36+
}

‎ASP.NET Core/Program.cs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Hosting;
6+
using Microsoft.Extensions.Configuration;
7+
using Microsoft.Extensions.Hosting;
8+
using Microsoft.Extensions.Logging;
9+
10+
namespace ASP_NET_Core
11+
{
12+
public class Program
13+
{
14+
public static void Main(string[] args)
15+
{
16+
CreateHostBuilder(args).Build().Run();
17+
}
18+
19+
public static IHostBuilder CreateHostBuilder(string[] args) =>
20+
Host.CreateDefaultBuilder(args)
21+
.ConfigureWebHostDefaults(webBuilder => {
22+
webBuilder.UseStartup<Startup>();
23+
});
24+
}
25+
}

‎ASP.NET Core/Readme.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# ASP.NET Core DevExtreme Example
2+
3+
## Installation
4+
5+
Download the example and use Visual Studio 2022 (or later) or Visual Studio Code to open the project. This project targets .NET 8.0.
6+
7+
## Client-side resources and bundling
8+
9+
This project uses [NPM](https://www.npmjs.com/) and [Gulp.js](https://gulpjs.com/) to install client-side libraries. The project restores NPM packages before the first build. Then, Gulp bundles required scripts and CSS files into the resulting package during the first and every next build.
10+
11+
The project includes:
12+
- DevExtreme 24.2.3
13+
- DevExtreme.AspNet.Core 24.2.*
14+
- DevExtreme.AspNet.Data 5.*
15+
- jQuery 3.7.1
16+
- Bootstrap 5.3.3
17+
18+
The resulted bundles will be located in the `wwwroot` folder:
19+
* `css/vendor.css` - a file with all CSS styles.
20+
* `css/icons` and `css/fonts` - folders that contain fonts and icons for DevExtreme themes.
21+
* `js/vendor.js` - a file that contains all scripts.
22+
23+
The default bundle includes jQuery, Bootstrap, and DevExtreme.
24+
25+
### Add more 3rd-party libraries for additional features/components
26+
27+
The main logic is located in the the `gulpfile.js` file at the root application level. The file contains two tasks:
28+
29+
* the `add-resources` task
30+
31+
* copies JavaScript files located in the `scripts` array and adds them to `vendor.js`. The script bundle is moved to `wwwroot\js`.
32+
* copies CSS styles located in the `styles` array and merges them into the `vendor.css` bundle. Then, this bundle is moved to `wwwroot\css`
33+
* copies DevExtreme `fonts` and `icons` folders from NPM to `wwwroot\css`
34+
35+
* the `clean` task removes all previously created files (`vendor.js` and `vendor.css`) and folders (`icons` and `fonts`)
36+
37+
If you need to include more features, you can uncomment one of the following sections:
38+
39+
* Gantt - scripts and styles for [dxGantt](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Gantt/Getting_Started_with_Gantt/).
40+
* Diagram - scripts and styles for [dxDiagram](https://js.devexpress.com/DevExtreme/Guide/UI_Components/Diagram/Getting_Started_with_Diagram/).
41+
* Export - scripts and styles for the exporting feature: [Export Data to Excel](https://js.devexpress.com/DevExtreme/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/#Export_Data).
42+
* HtmlEditor - scripts and styles for [dxHtmlEditor](https://js.devexpress.com/DevExtreme/Guide/UI_Components/HtmlEditor/Overview/).
43+
* Full Bundle - scripts and styles for all above mentioned features/components.
44+
45+
## Code
46+
47+
Take a look at the following files of this example to see the required code:
48+
49+
**Controllers:**
50+
- `Controllers/HomeController.cs` - Main controller with Index action
51+
- `Controllers/SampleDataController.cs` - API controller for sample data
52+
53+
**Models:**
54+
- `Models/SampleData.cs` - Sample data model
55+
- `Models/SampleOrder.cs` - Sample order model
56+
57+
**Views:**
58+
- `Views/Home/Index.cshtml` - Main page with DevExtreme components
59+
- `Views/Shared/_Layout.cshtml` - Layout template
60+
- `Views/_ViewImports.cshtml` - Global imports
61+
- `Views/_ViewStart.cshtml` - View start configuration
62+
63+
**Configuration:**
64+
- `Program.cs` - Application entry point
65+
- `Startup.cs` - Service configuration
66+
- `gulpfile.js` - Build automation
67+
- `package.json` - NPM dependencies
68+
- `ASP.NET Core.csproj` - Project file
69+
70+
## Development server
71+
72+
Use the Visual Studio `Run (F5)` command or `dotnet run` command to run the project. The application will be available at `https://localhost:5001` (HTTPS) or `http://localhost:5000` (HTTP).
73+
74+
## Further help
75+
76+
You can learn more about the ASP.NET Core components' syntax in our documentation: [Concepts](https://docs.devexpress.com/AspNetCore/400574/devextreme-based-controls/concepts/razor-syntax)
77+
The client-side API is based on jQuery [jQuery documentation](https://api.jquery.com/) and described in the following topics:
78+
* [Get and Set Properties](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties)
79+
* [Call Methods](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Call_Methods)
80+
* [Get a UI Component Instance](https://js.devexpress.com/DevExtreme/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_a_UI_Component_Instance)
81+
82+
To get more help on DevExtreme submit an issue in the [Support Center](https://supportcenter.devexpress.com/ticket/create)
83+
84+

‎ASP.NET Core/Startup.cs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Builder;
6+
using Microsoft.AspNetCore.Hosting;
7+
using Microsoft.Extensions.Configuration;
8+
using Microsoft.Extensions.DependencyInjection;
9+
using Microsoft.Extensions.Hosting;
10+
11+
namespace ASP_NET_Core
12+
{
13+
public class Startup
14+
{
15+
public Startup(IConfiguration configuration)
16+
{
17+
Configuration = configuration;
18+
}
19+
20+
public IConfiguration Configuration { get; }
21+
22+
// This method gets called by the runtime. Use this method to add services to the container.
23+
public void ConfigureServices(IServiceCollection services)
24+
{
25+
// Add framework services.
26+
services
27+
.AddControllersWithViews()
28+
.AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
29+
}
30+
31+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
32+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
33+
{
34+
if (env.IsDevelopment())
35+
{
36+
app.UseDeveloperExceptionPage();
37+
}
38+
else
39+
{
40+
app.UseExceptionHandler("/Home/Error");
41+
}
42+
app.UseStaticFiles();
43+
44+
app.UseRouting();
45+
46+
app.UseAuthorization();
47+
48+
app.UseEndpoints(endpoints => {
49+
endpoints.MapControllerRoute(
50+
name: "default",
51+
pattern: "{controller=Home}/{action=Index}/{id?}");
52+
});
53+
}
54+
}
55+
}

‎ASP.NET Core/Views/Home/Index.cshtml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@(Html.DevExtreme().DataGrid<Employee>()
2+
.ShowBorders(true)
3+
.Width(500)
4+
.DataSource(d => d.WebApi().Controller("Employees").LoadAction("Get").Key("ID"))
5+
.Columns(columns =>
6+
{
7+
columns.AddFor(m => m.FirstName);
8+
columns.AddFor(m => m.LastName);
9+
columns.AddFor(m => m.BirthDate);
10+
})
11+
.OnCellPrepared("onCellPrepared")
12+
)
13+
14+
@(Html.DevExtreme().Tooltip()
15+
.ID("tooltip")
16+
.Position(Position.Right)
17+
)
18+
19+
<script>
20+
function onCellPrepared(e) {
21+
if (e.rowType === "data" && e.column.dataField === "FirstName") {
22+
var tooltipInstance = $("#tooltip").dxTooltip("instance");
23+
e.cellElement.mouseover(function (arg) {
24+
tooltipInstance.option("contentTemplate", function (contentElement) {
25+
contentElement.html(`<div class='tooltipContent'><div><b>Position:</b> ${e.data.Position}</div>` +
26+
`<div><b>State:</b> ${e.data.State}</div></div>`);
27+
});
28+
tooltipInstance.show(arg.target);
29+
});
30+
e.cellElement.mouseout(function (arg) {
31+
tooltipInstance.hide();
32+
});
33+
}
34+
}
35+
</script>

0 commit comments

Comments
 (0)