Razor Pages .Net 8 UrlAdaptor Do Not Work
I tried to write a lob application using ejs-grid (i.e. CRUD) operations with Razor Pages. It was not possible. I need help.
I have the following class/table:
public class PlannedRoute
{
public int PlannedRouteId { get; set; }
public string Name { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
public bool IsActive { get; set; }
public DateOnly NextPlannedDay { get; set; }
}
The following PlannedRouteUA.cshmtl:
@page
@model trackmate.web.Pages.CRUDs.PlannedRoutePages.PlannedRouteUAModel
@{
ViewData["Title"] = "Edit";
Layout = "~/Pages/CRUDs/Shared/_CrudLayout.cshtml";
}
<script>
function gridload() {
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': document.querySelector('input[type="hidden"][name="__RequestVerificationToken"]').value }];
}
</script>
@{
string fullUrl = $"{Request.Scheme}://{Request.Host}{Request.PathBase}{Request.Path}";
}
@Html.AntiForgeryToken()
<div class="control-section">
<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" load="onLoad">
<e-data-manager url="@fullUrl?handler=UrlDatasource" adaptor="UrlAdaptor" insertUrl="@fullUrl?handler=Insert" updateUrl="@fullUrl?handler=Update" removeUrl="@fullUrl?handler=Delete"></e-data-manager>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-pagesettings pageSize="5"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="PlannedRouteId" headerText="ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Center" width="100"></e-grid-column>
<e-grid-column field="Name" headerText="Ονομασία" textAlign="Center" width="100"></e-grid-column>
<e-grid-column field="Description" headerText="Περιγραφή" textAlign="Center" width="100"></e-grid-column>
<e-grid-column field="IsActive" headerText="Ενεργό?" editType="booleanedit" displayAsCheckBox="true" type="boolean" width="100"></e-grid-column>
<e-grid-column field="NextPlannedDay" headerText="Next Planned Day" customFormat="@(new { type ="date", format="dd/MM/yyyy" })" type="date" editType="datepickeredit" width="160"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function onLoad() {
this.dataSource.dataSource.headers = [{
'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val()}];
}
</script>
And the following: handlers:
public async Task<JsonResult> OnPostUpdateAsync()//[FromBody] ICRUDModel<PlannedRoute> value)
{
string body = await new StreamReader(Request.Body).ReadToEndAsync();
ICRUDModel<PlannedRoute>? account = Newtonsoft.Json.JsonConvert.DeserializeObject<ICRUDModel<PlannedRoute>>(body);
return new JsonResult("");
}
public async Task<JsonResult> OnPostUrlDatasourceAsync([FromBody] DataManagerRequest dm)
{
IEnumerable DataSource = await _context.PlannedRoutes
.ToListAsync();
DataOperations operation = new DataOperations();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
}
int count = DataSource.Cast<PlannedRoute>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? new JsonResult(new { result = DataSource, count = count }) : new JsonResult(DataSource);
}
Main default handler (UrlDatasource) works fine. I tried the synchronous and asynchronous calls. Both are fine.
The biggest problem is with the Insert/Update/Delete.
In Delete and Update, the default arguments ([FromBody] ICRUDModel<PlannedRoute> value) are always null.
In Delete, the message having a "key" possibly raises an exception with (the default) System.Text.Json, although it is deserialized by Newtonsoft. That is the reason I commented out the code as it is suggested her(https://ej2aspnetcore.azurewebsites.net/aspnetcore/grid/urladaptor#/ ).
With my code and deserializing with newtonsoft, I managed to get the data.
In update though, there is a strange issue. Javascript send more fields that those required and crashes the JSON conversion.
This is the body from the httprequest:
From the program in debugging, I have only one record and tried to "edit" (as it is shown on the image at the end). In "edit" I only corrected the field "NextPlannedDay". It was a default 1/1/1 and I changed it to 19/9/2024. BUT:
- In the http request body this field is defined to be 18/9 (?!)
- On the request body we have both nextPlannedDay: "0001-01-01" and NextPlannedDay: "2024-09-18T21:00:00.000Z\
- Similar to the above, we have many field double fields with the first letter changed from capital to small.
All htese additional fields crash the deserializers.
Here you can see that I selected 19/9, but inside the request body I have 18/9
