WEB most jól működik Datatables-sel.

This commit is contained in:
2025-03-11 16:54:50 +01:00
parent e5b1649c42
commit 8f9e5df847
11 changed files with 370 additions and 7 deletions
+3
View File
@@ -39,4 +39,7 @@ Global
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {42493626-0B67-416A-A154-08ACD837DAEA}
EndGlobalSection
EndGlobal
@@ -0,0 +1,101 @@
@page
@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointEditPageModel
@{
ViewData["Title"] = "Ellenőrzési pont";
var checkpointId = Model.CheckPoint.Id;
var url = Url.Page("./CheckPointEditPage", "LoadCheckListTemplateRows", new { id = checkpointId });
}
<h1>@ViewData["Title"]</h1>
<input type="hidden" id="checkPointEditUrl" value="@url" />
<div>
<form method="post">
<input type="hidden" id="hiddenCheckPointId" value="@Model.CheckPoint.Id" />
<div class="form-group">
<label asp-for="CheckPoint.ShortName"></label>
<input asp-for="CheckPoint.ShortName" class="form-control" />
<span asp-validation-for="CheckPoint.ShortName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CheckPoint.Code"></label>
<input asp-for="CheckPoint.Code" class="form-control" />
<span asp-validation-for="CheckPoint.Code" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Mentés</button>
</form>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-primary float-right">Új elem hozzáadása</button>
</div>
<div>
<table id="tbCheckPointsEditPage" class="table table-bordered table-hover table-sm" style="width:100%">
<thead class="table-primary">
<tr>
<th>ID</th>
<th>RowIndex</th>
<th>OperationDescription</th>
<th>AnswerType</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tfoot class="table-light">
<tr>
<th>ID</th>
<th>RowIndex</th>
<th>OperationDescription</th>
<th>AnswerType</th>
<th class="text-center">Action</th>
</tr>
</tfoot>
</table>
</div>
@section Scripts {
<script>
const table = new DataTable('#tbCheckPointsEditPage', {
ajax: {
url: $('#checkPointEditUrl').val(),
type: "GET",
dataSrc : "data"
},
columns: [
{ data: "id" },
{ data: "rowIndex" },
{ data: "operationDescription" },
{ data: "answerType" },
{ data: null, render: function (data, type, row) {
return `<button class="btn btn-primary edit-btn" data-id="${row.id}">Módosítás</button>
<button class="btn btn-danger delete-btn" data-id="${row.id}">Törlés</button>
`;
}}
],
columnDefs: [
{
"targets": 0,
"visible": false
},
{
"targets": 4,
"className": "text-center",
"width": "15%"
}
],
processing:true
});
$('#tbCheckPointsEditPage').on('click', '.edit-btn', function ()
{
const row = table.row($(this).closest('tr')).data();
});
$('#tbCheckPointsEditPage').on('click', '.delete-btn', function ()
{
const row = table.row($(this).closest('tr')).data();
});
</script>
}
@@ -0,0 +1,32 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WorkFlowCheck.Common.DTO;
using WorkFlowCheck.Web.Services.Interfaces;
namespace WorkFlowCheck.Web.Pages.BaseStock.CheckPoints
{
public class CheckPointEditPageModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
private readonly IBaseStockService _baseStockService;
[BindProperty]
public CheckPointDTO CheckPoint { get; set; }
public CheckPointEditPageModel(ILogger<IndexModel> logger, IBaseStockService baseStockService)
{
_baseStockService = baseStockService;
_logger = logger;
}
public async Task OnGet(int id)
{
CheckPoint = await _baseStockService.GetCheckPoint(id);
}
public async Task<JsonResult> OnGetLoadCheckListTemplateRows(int id)
{
CheckPoint = await _baseStockService.GetCheckPoint(id);
return new JsonResult(new { data = CheckPoint.CheckListTemplateRowDTO });
}
}
}
@@ -0,0 +1,74 @@
@page
@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointsPageModel
@{
ViewData["Title"] = "Ellenőrzési pontok";
}
<h1>@ViewData["Title"]</h1>
<div class="d-flex justify-content-end">
<button class="btn btn-primary float-right">Új elem hozzáadása</button>
</div>
<div>
<table id="tbCheckPointsPage" class="table table-bordered table-hover table-sm" style="width:100%">
<thead class="table-primary">
<tr>
<th>ID</th>
<th>Short Name</th>
<th>Code</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tfoot class="table-light">
<tr>
<th>ID</th>
<th>Short Name</th>
<th>Code</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
@section Scripts {
<script>
const table = new DataTable('#tbCheckPointsPage', {
ajax: {
url: "@Url.Page("./CheckPointsPage", "LoadCheckPoints")",
type: "GET",
dataSrc : "data"
},
columns: [
{ data: "id" },
{ data: "shortName" },
{ data: "code" },
{ data: null, render: function (data, type, row) {
return `<button class="btn btn-primary edit-btn" data-id="${row.id}">Módosítás</button>
<button class="btn btn-danger delete-btn" data-id="${row.id}">Törlés</button>
`;
}}
],
columnDefs: [
{
"targets": 0,
"visible": false
},
{
"targets": 3,
"className": "text-center",
"width": "15%"
}
],
processing:true
});
$('#tbCheckPointsPage').on('click', '.edit-btn', function ()
{
const row = table.row($(this).closest('tr')).data();
window.location.href = `@Url.Page("./CheckPointEditPage")?id=${row.id}`;
});
$('#tbCheckPointsPage').on('click', '.delete-btn', function ()
{
const row = table.row($(this).closest('tr')).data();
});
</script>
}
@@ -0,0 +1,27 @@
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WorkFlowCheck.Common.DTO;
using WorkFlowCheck.Web.Services.Interfaces;
namespace WorkFlowCheck.Web.Pages.BaseStock.CheckPoints
{
public class CheckPointsPageModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
private readonly IBaseStockService _baseStockService;
public CheckPointsPageModel(ILogger<IndexModel> logger, IBaseStockService baseStockService)
{
_logger = logger;
_baseStockService = baseStockService;
}
public void OnGet()
{
}
public async Task<JsonResult> OnGetLoadCheckPoints()
{
var results = await _baseStockService.GetAllCheckPoints();
return new JsonResult(new { data = results });
}
}
}
@@ -7,12 +7,13 @@
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/WorkFlowCheck.Web.styles.css" asp-append-version="true" />
<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-6gM1RUmcWWtU9mNI98EhVNlLX1LDErxSDu2o/YRIeXq34o77tQYTXLzJ/JLBNkNV" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">WorkFlowCheck.Web</a>
<a class="navbar-brand" asp-area="" asp-page="/Index">Workflow Check Admin Site</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -22,6 +23,16 @@
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark" href="#" id="baseStockDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Törzsadatok
</a>
<ul class="dropdown-menu" aria-labelledby="baseStockDropdown">
<li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/CheckPoints/CheckPointsPage">Ellenőrzési pontok</a></li>
<li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Almenu2">Almenü 2</a></li>
<li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Almenu3">Almenü 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
@@ -38,13 +49,16 @@
<footer class="border-top footer text-muted">
<div class="container">
&copy; 2025 - WorkFlowCheck.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
&copy; @DateTime.Now.Year - Workflow Check App - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-10kTwhFyUU637a6/7q0kLBdo8jQWjxteg63DT/K8Sdq/nCDaDAkH+Nq/MIrsp8wc" crossorigin="anonymous"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
+5 -3
View File
@@ -1,4 +1,7 @@
using Serilog;
using WorkFlowCheck.Web.Services;
using WorkFlowCheck.Web.Services.Interfaces;
var builder = WebApplication.CreateBuilder(args);
Log.Logger = new LoggerConfiguration()
@@ -7,10 +10,9 @@ Log.Logger = new LoggerConfiguration()
builder.Services.AddMemoryCache();
builder.Services.AddHttpContextAccessor();
builder.Services.AddHttpClient();
builder.Services.AddScoped<IBaseStockService, BaseStockService>();
builder.Host.UseSerilog();
// Add services to the container.
@@ -0,0 +1,23 @@
namespace WorkFlowCheck.Web.Services
{
public class BaseService
{
public readonly HttpClient _httpClient;
public readonly IConfiguration _configuration;
public BaseService(HttpClient httpClient, IConfiguration configuration)
{
_httpClient = httpClient;
_configuration = configuration;
var apiBaseUrl = configuration["ApiBaseUrl"]; // API-cím elérése a konfigurációból
_httpClient.BaseAddress = new Uri(apiBaseUrl);
var apiKey = configuration["ApiKey"];
_httpClient.DefaultRequestHeaders.Add("X-Api-Key", apiKey);
}
}
}
@@ -0,0 +1,64 @@
using Serilog;
using WorkFlowCheck.Common.DTO;
using WorkFlowCheck.Web.Services.Interfaces;
namespace WorkFlowCheck.Web.Services
{
public class BaseStockService : BaseService, IBaseStockService
{
public BaseStockService(HttpClient httpClient, IConfiguration configuration) : base(httpClient, configuration)
{
}
public async Task<List<CheckPointDTO>> GetAllCheckPoints()
{
string endpoint = $"{_httpClient.BaseAddress}api/Sync/GetAllCheckPoints";
var retVal = new List<CheckPointDTO>();
try
{
var response = await _httpClient.GetFromJsonAsync<ApiResponseDTO<List<CheckPointDTO>>>(endpoint);
if (response != null)
{
if (response.IsSuccess)
{
return response.Data;
}
}
}
catch (Exception ex)
{
Log.Error(ex.Message);
}
return retVal;
}
public async Task<CheckPointDTO> GetCheckPoint(int id)
{
string endpoint = $"{_httpClient.BaseAddress}api/Sync/GetCheckPoints/{id}";
var retVal = new CheckPointDTO();
try
{
var response = await _httpClient.GetFromJsonAsync<ApiResponseDTO<CheckPointDTO>>(endpoint);
if (response != null)
{
if (response.IsSuccess)
{
return response.Data;
}
}
}
catch (Exception ex)
{
Log.Error(ex.Message);
}
return retVal;
}
public async Task<CheckPointDTO> UpdateCheckPoint(CheckPointDTO checkPointDto)
{
return null;
}
}
}
@@ -0,0 +1,11 @@
using WorkFlowCheck.Common.DTO;
namespace WorkFlowCheck.Web.Services.Interfaces
{
public interface IBaseStockService
{
Task<List<CheckPointDTO>> GetAllCheckPoints();
Task<CheckPointDTO> GetCheckPoint(int id);
Task<CheckPointDTO> UpdateCheckPoint(CheckPointDTO checkPoint);
}
}
+14 -2
View File
@@ -1,12 +1,21 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="datatables.net-bs5" Version="2.2.2" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net-bs5\2.2.2\contentFiles\any\any\wwwroot\css\dataTables.bootstrap5.css" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net-bs5\2.2.2\contentFiles\any\any\wwwroot\css\dataTables.bootstrap5.min.css" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net-bs5\2.2.2\contentFiles\any\any\wwwroot\js\dataTables.bootstrap5.js" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net-bs5\2.2.2\contentFiles\any\any\wwwroot\js\dataTables.bootstrap5.min.js" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net\2.2.2\contentFiles\any\any\wwwroot\js\dataTables.js" />
<Content Remove="C:\Users\ivanszabo\.nuget\packages\datatables.net\2.2.2\contentFiles\any\any\wwwroot\js\dataTables.min.js" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="jquery" Version="3.7.1" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.11" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="Serilog.AspNetCore" Version="8.0.3" />
@@ -14,4 +23,7 @@
<PackageReference Include="Serilog.Sinks.File" Version="6.0.0" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="7.2.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\WorkFlowCheck.Common\WorkFlowCheck.Common.csproj" />
</ItemGroup>
</Project>