The controller is definitely being hit and it is returning data in the format I was expecting. I have javascript in the "RequestEnd" and I am seeing data there. There are no errors or warnings (that pertain to the listview) in the browser's developer console. The pager shows up but says there are zero records. I have been tossing code at this for waaaaay too long.
Any suggestions? Please.....
Controller:
[HttpPost]
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public async Task<IActionResult> UserProfiles_Search([DataSourceRequest] DataSourceRequest request)
{
Logger.LogInformation("In UserProfiles_Search");
// dummy data
var data = new List < UserProfile >(){
new UserProfile() { Title = "Mrs", FirstName = "Joanne", LastName = "Welch", EmailAddress = "joanne.welch@example.com", Id = Guid.Parse("3c7b201d-9744-4807-bd53-192251fb6e60") },
new UserProfile() { Title = "Miss", FirstName = "Florence", LastName = "Lawrence", EmailAddress = "florence.lawrence@example.com", Id = Guid.Parse("6691697e-faa5-41ec-89b0-b6a040be8d2d") },
new UserProfile() { Title = "Mrs", FirstName = "Stella", LastName = "Laurent", EmailAddress = "stella.laurent@example.com", Id = Guid.Parse("87cf6fef-0d9e-4fea-bbca-b48d9f478c61") },
new UserProfile() { Title = "Ms", FirstName = "Sharida", LastName = "Broeren", EmailAddress = "sharida.broeren@example.com", Id = Guid.Parse("d58fcf47-88ac-4753-8d08-3cbf0318c13d") },
new UserProfile() { Title = "Mr", FirstName = "William", LastName = "Liu", EmailAddress = "william.liu@example.com", Id = Guid.Parse("688fff10-e522-4267-a061-5553c627689e") },
new UserProfile() { Title = "Ms", FirstName = "Brielle", LastName = "Clark", EmailAddress = "brielle.clark@example.com", Id = Guid.Parse("00fa0fa0-494f-44e5-9bb2-5fbcea156eb7") },
new UserProfile() { Title = "Miss", FirstName = "تارا", LastName = "زارعی", EmailAddress = "tr.zraay@example.com", Id = Guid.Parse("3a7ddd17-33a3-489a-91b9-48055eefb55e") },
new UserProfile() { Title = "Mr", FirstName = "Necati", LastName = "Karadaş", EmailAddress = "necati.karadas@example.com", Id = Guid.Parse("33c54e50-7297-4af0-914c-484f182d0e52") },
new UserProfile() { Title = "Ms", FirstName = "Elizabeth", LastName = "Craig", EmailAddress = "elizabeth.craig@example.com", Id = Guid.Parse("6841bcec-6662-473e-9b1a-d5f533ab01d8") },
new UserProfile() { Title = "Mr", FirstName = "Karl", LastName = "Gordon", EmailAddress = "karl.gordon@example.com", Id = Guid.Parse("43ec6d51-5b3e-4e6d-ae78-4394234950b4") },
new UserProfile() { Title = "Mrs", FirstName = "Gretel", LastName = "Bender", EmailAddress = "gretel.bender@example.com", Id = Guid.Parse("54dab09c-1d6f-4544-aa23-0fb74f3f12c9") },
new UserProfile() { Title = "Mrs", FirstName = "Francelina", LastName = "Nunes", EmailAddress = "francelina.nunes@example.com", Id = Guid.Parse("3c62214b-c797-4cdb-9623-cbc51ec8a86f") },
new UserProfile() { Title = "Monsieur", FirstName = "Oskar", LastName = "Berger", EmailAddress = "oskar.berger@example.com", Id = Guid.Parse("4687147c-8630-4018-afb8-52cdb0e1937a") },
new UserProfile() { Title = "Miss", FirstName = "Emilie", LastName = "Carpentier", EmailAddress = "emilie.carpentier@example.com", Id = Guid.Parse("8b11fb43-93da-470c-bc1a-eddce87a3ecc") },
new UserProfile() { Title = "Mrs", FirstName = "Florence", LastName = "King", EmailAddress = "florence.king@example.com", Id = Guid.Parse("f203e0b7-ebe3-4a72-b82e-c910b9daa3fd") }
};
var resultData = await data.ToDataSourceResultAsync(request);
return Json(resultData);
}
Index.cshtml
@using SaskPower.DSS.CSRTools.Models.Models
@using SaskPower.DSS.CSRTools.Models.ViewModels
@model ProfileSearchViewModel
@{
Layout = "";
}
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="~/lib/kendo/styles/kendo.common.min.css" />
<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo/styles/kendo.bootstrap-v4.css" />
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jquery.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/jszip.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.all.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/kendo.aspnetmvc.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/cultures/kendo.culture.en-CA.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/kendo/scripts/messages/kendo.messages.en-CA.min.js"></script>
<script language="javascript" type="text/ecmascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/x-kendo-tmpl" id="userProfileSearchResultItem">
<div class="userProfileSingleResult">
<div class="name">#:firstName# #:lastName#</div>
<div class="email">#:emailAddress#</div>
<div class="id">#:id#</div>
</div>
</script>
<div class="profile-search">
<div class="result-count"></div>
<div class="results">
@(Html.Kendo().ListView<UserProfile>()
.Name("userProfileSearchResults")
.TagName("div")
.ClientTemplateId("userProfileSearchResultItem")
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => m.Id(p => p.Id))
.PageSize(25)
.Read(read=>read.Action("UserProfiles_Search", "Home"))
.ServerOperation(false)
.Events(evt => evt
.RequestEnd("userProfileRequestEnd")
)
)
.AutoBind(true)
.Pageable(pager => pager
.ButtonCount(10)
.Numeric(true)
.Enabled(true)
)
)
</div>
</div>
<script type="text/javascript" language="javascript">
function userProfileRequestEnd(event) {
console.log("in userProfileRequestEnd");
$(".profile-search .result-count").html("" + event.response.data.length + " profiles found");
}
</script>
</body>
</html>
Model:
public class UserProfile
{
public Guid Id { get; set; }
public string Title { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string EmailAddress { get; set; }
}
Thanks
-Cam
Rank 1
Rank 1
Iron
Rank 1
Iron
1 Answer, 1 is accepted
Rank 1
Iron
.Net Core uses the System.Text.Json namespace by default for the serialization of all Json. It, by default, converts the property names to have a lower case first letter (myPropertyName) where as NewtonSoft defaulted to leave the case as it was in the original object. Because of this, all of the Telerik JavaScript can't find any of the properties (JavaScript is case sensitive) and everything looks like it is null.
In your startup you should have something like:
services.AddControllersWithViews();
You will need to change it to be:
services.AddControllersWithViews().AddJsonOptions(options=>
{
options.JsonSerializerOptions.PropertyNamingPolicy = null;
});This will leave the case alone and the Telerik JavaScript will work.
-Cam
Rank 1
[JsonProperty("Id")]
public int Id { get; set; }
to return field names unchanged. The json I see returned looks fine to me.
Hi Juergen,
We have s article dedicated on JSON serialization in different versions of ASP.NET Core available here: https://docs.telerik.com/aspnet-core/compatibility/json-serialization If this is not helpful I can suggest sharing further details on the scenario you have, so the community and the admins can provide better suggestions.